crumbtrail-react 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +87 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# crumbtrail-react
|
|
2
|
+
|
|
3
|
+
React bindings for [Crumbtrail](https://crumbtrail.dev): catch render errors with
|
|
4
|
+
the session attached, and record component state so a bug report carries the state
|
|
5
|
+
the component was actually in when it broke.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install crumbtrail-react crumbtrail-core
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Or let the wizard do it:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npx crumbtrail
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
This package needs `crumbtrail-core` initialised first — see
|
|
20
|
+
[`crumbtrail-core`](https://www.npmjs.com/package/crumbtrail-core) for that
|
|
21
|
+
three-line setup. React 18 or newer.
|
|
22
|
+
|
|
23
|
+
## Error boundary
|
|
24
|
+
|
|
25
|
+
Wrap a subtree so a render error is flagged as a bug with the surrounding session
|
|
26
|
+
already captured:
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { Crumbtrail, PRESET_PASSIVE } from "crumbtrail-core";
|
|
30
|
+
import { CrumbtrailErrorBoundary } from "crumbtrail-react";
|
|
31
|
+
|
|
32
|
+
const crumbtrail = Crumbtrail.init({
|
|
33
|
+
...PRESET_PASSIVE,
|
|
34
|
+
httpEndpoint: "https://api.crumbtrail.dev",
|
|
35
|
+
httpAuthToken: process.env.CRUMBTRAIL_KEY,
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
export function App() {
|
|
39
|
+
return (
|
|
40
|
+
<CrumbtrailErrorBoundary logger={crumbtrail} fallback={<p>Something broke.</p>}>
|
|
41
|
+
<Checkout />
|
|
42
|
+
</CrumbtrailErrorBoundary>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
| Prop | Type | Description |
|
|
48
|
+
| --- | --- | --- |
|
|
49
|
+
| `logger` | `Crumbtrail` | The instance returned by `Crumbtrail.init()`. |
|
|
50
|
+
| `children` | `ReactNode` | The subtree to guard. |
|
|
51
|
+
| `fallback` | `ReactNode` | Optional UI to render after an error. |
|
|
52
|
+
|
|
53
|
+
## Capturing state
|
|
54
|
+
|
|
55
|
+
`useBugState` registers a value so it's attached to any bug flagged while the
|
|
56
|
+
component is mounted:
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { useBugState } from "crumbtrail-react";
|
|
60
|
+
|
|
61
|
+
function Checkout({ crumbtrail }) {
|
|
62
|
+
const [cart, setCart] = useState([]);
|
|
63
|
+
const [step, setStep] = useState("address");
|
|
64
|
+
|
|
65
|
+
useBugState(crumbtrail, "cart", cart);
|
|
66
|
+
useBugState(crumbtrail, "step", step);
|
|
67
|
+
|
|
68
|
+
// ...
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Values are **redacted by default** using the same policy as the rest of the SDK, so
|
|
73
|
+
a state field called `token` or `password` never leaves the browser in the clear.
|
|
74
|
+
Pass `{ captureRawState: true }` as the fourth argument only when you're certain the
|
|
75
|
+
value is safe.
|
|
76
|
+
|
|
77
|
+
## Links
|
|
78
|
+
|
|
79
|
+
- **Website** — https://crumbtrail.dev
|
|
80
|
+
- **Docs** — https://crumbtrail.dev/docs
|
|
81
|
+
- **How it works** — https://crumbtrail.dev/how-it-works
|
|
82
|
+
- **Source** — https://github.com/crumbtrail-dev/crumbtrail-js
|
|
83
|
+
- **Issues** — https://github.com/crumbtrail-dev/crumbtrail-js/issues
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
MIT
|