9 | A React error boundary hook for function components4 | 5 |
9 |
10 |
11 | 
12 |
13 |
14 | 
15 |
16 |
17 | 
18 |
19 |
20 | 
21 |
22 |
23 | 
24 |
25 |
26 | ## What is this? 🧐
27 |
28 | React 16 introduced [Error Boundaries](https://reactjs.org/docs/error-boundaries.html). As of React 18, there still is [no equivalent hook](https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes) for function components.
29 |
30 | This library draws inspiration from Preact's [useErrorBoundary](https://preactjs.com/guide/v10/hooks/#useerrorboundary) and attempts to recreate a similar API.
31 |
32 | ## Installation & Usage 📦
33 |
34 | 1. Add this package to your project:
35 | - `yarn add react-use-error-boundary`
36 |
37 | Just trying things out or want to skip the build step? Use the unpkg URL:
38 |
39 | ```
40 |
41 | ```
42 |
43 | ## Examples 🚀
44 |
45 | Whenever the component or a child component throws an error you can use this hook to catch the error and display an error UI to the user.
46 |
47 | ```jsx
48 | // error = The error that was caught or `undefined` if nothing
49 | // errored. If something other than an instance of `Error`
50 | // was thrown, it will be wrapped in an `Error` object by calling
51 | // `new Error()` on the thrown value.
52 | //
53 | // resetError = Call this function to mark an error as resolved. It's
54 | // up to your app to decide what that means and if it is possible
55 | // to recover from errors.
56 | //
57 | const [error, resetError] = useErrorBoundary();
58 | ```
59 |
60 | For application monitoring, it's often useful to notify a service of any errors. `useErrorBoundary` accepts an optional callback that will be invoked when an error is encountered. The callback is invoked with `error` and `errorInfor` which are identical to [React's componentDidCatch arguments](https://reactjs.org/docs/error-boundaries.html). Identical to React, `error` is the error that was thrown, and `errorInfo` is the component stack trace.
61 |
62 | ```jsx
63 | const [error] = useErrorBoundary((error, errorInfo) =>
64 | logErrorToMyService(error, errorInfo)
65 | );
66 | ```
67 |
68 | A full example may look like this:
69 |
70 | ```jsx
71 | import { withErrorBoundary, useErrorBoundary } from "react-use-error-boundary";
72 |
73 | const App = withErrorBoundary(({ children }) => {
74 | const [error, resetError] = useErrorBoundary(
75 | // You can optionally log the error to an error reporting service
76 | (error, errorInfo) => logErrorToMyService(error, errorInfo)
77 | );
78 |
79 | if (error) {
80 | return (
81 | {error.message}
83 | 84 |Error: {error as string}
; 45 | } 46 | 47 | return54 | Error: 55 | Bombs away 💣 56 |
57 | `); 58 | }); 59 | 60 | it("does not invoke the componentDidCatch handler when there is not an error", () => { 61 | const componentDidCatch = jest.fn(); 62 | 63 | const Example: FC = withErrorBoundary(() => { 64 | const [error] = useErrorBoundary(componentDidCatch); 65 | if (error) { 66 | return null; 67 | } 68 | 69 | return