File tree Expand file tree Collapse file tree 1 file changed +21
-6
lines changed Expand file tree Collapse file tree 1 file changed +21
-6
lines changed Original file line number Diff line number Diff line change 2
2
3
3
Sample reusable React error boundary component for React 16+
4
4
5
+ The simplest way to use a boundary is to wrap it around any component that may throw an error.
6
+ This will handle errors thrown by that component's descendents also.
7
+
5
8
``` jsx
6
9
import ErrorBoundary from ' react-error-boundary' ;
7
10
8
- // The simplest way to use a boundary;
9
- // Wrap around any component that may throw an error:
10
11
< ErrorBoundary>
11
12
< ComponentThatMayError / >
12
13
< / ErrorBoundary>
14
+ ```
15
+
16
+ You can also react to errors (eg for logging) by providing an ` onError ` callback:
17
+
18
+ ``` jsx
19
+ import ErrorBoundary from ' react-error-boundary' ;
20
+
21
+ const myErrorHandler = (error : Error , componentStack : string ) => {
22
+ // ...
23
+ };
13
24
14
- // You can also react to errors (eg for logging):
15
- const myErrorHandler = (error , componentStack ) => {/* ... */ }
16
25
< ErrorBoundary onError= {myErrorHandler}>
17
26
< ComponentThatMayError / >
18
27
< / ErrorBoundary>
28
+ ```
29
+
30
+ You can also customize the fallback appearance:
31
+
32
+ ``` jsx
33
+ const MyFallbackComponent = ({ componentStack, error }) => (
34
+ < div/ >
35
+ )
19
36
20
- // You can also customize the fallback appearance:
21
- const MyFallbackComponent = ({ componentStack, error }) => (/* ... */ )
22
37
< ErrorBoundary FallbackComponent= {MyFallbackComponent}>
23
38
< ComponentThatMayError / >
24
39
< / ErrorBoundary>
You can’t perform that action at this time.
0 commit comments