react-error-boundary 4.0.0 → 4.0.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 +25 -4
- package/dist/react-error-boundary.d.ts +2 -2
- package/dist/react-error-boundary.d.ts.map +1 -1
- package/dist/react-error-boundary.js +5 -4
- package/dist/react-error-boundary.js.map +1 -1
- package/dist/react-error-boundary.module.js +5 -4
- package/dist/react-error-boundary.module.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# react-error-boundary
|
|
2
2
|
|
|
3
|
-
Reusable React [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) component.
|
|
3
|
+
Reusable React [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) component. Supports all React renderers (including React DOM and React Native). Refer to [this blog post](https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react) for more examples of how this package can be used.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
### If you like this project, [buy me a coffee](http://givebrian.coffee/).
|
|
6
6
|
|
|
7
7
|
## Getting started
|
|
8
8
|
|
|
@@ -98,6 +98,8 @@ const ui = (
|
|
|
98
98
|
### `useErrorBoundary` hook
|
|
99
99
|
Convenience hook for imperatively showing or dismissing error boundaries.
|
|
100
100
|
|
|
101
|
+
#### Show the nearest error boundary from an event handler
|
|
102
|
+
|
|
101
103
|
React only handles errors thrown during render or during component lifecycle methods (e.g. effects and did-mount/did-update). Errors thrown in event handlers, or after async code has run, will not be caught.
|
|
102
104
|
|
|
103
105
|
This hook can be used to pass those errors to the nearest error boundary:
|
|
@@ -106,7 +108,7 @@ This hook can be used to pass those errors to the nearest error boundary:
|
|
|
106
108
|
import { useErrorBoundary } from "react-error-boundary";
|
|
107
109
|
|
|
108
110
|
function Example() {
|
|
109
|
-
const {
|
|
111
|
+
const { showBoundary } = useErrorBoundary();
|
|
110
112
|
|
|
111
113
|
useEffect(() => {
|
|
112
114
|
fetchGreeting(name).then(
|
|
@@ -115,7 +117,7 @@ function Example() {
|
|
|
115
117
|
},
|
|
116
118
|
error => {
|
|
117
119
|
// Show error boundary
|
|
118
|
-
|
|
120
|
+
showBoundary(error);
|
|
119
121
|
}
|
|
120
122
|
);
|
|
121
123
|
});
|
|
@@ -124,6 +126,25 @@ function Example() {
|
|
|
124
126
|
}
|
|
125
127
|
```
|
|
126
128
|
|
|
129
|
+
#### Dismiss the nearest error boundary
|
|
130
|
+
A fallback component can use this hook to request the nearest error boundary retry the render that original failed.
|
|
131
|
+
|
|
132
|
+
```js
|
|
133
|
+
import { useErrorBoundary } from "react-error-boundary";
|
|
134
|
+
|
|
135
|
+
function ErrorFallback({ error }) {
|
|
136
|
+
const { resetBoundary } = useErrorBoundary();
|
|
137
|
+
|
|
138
|
+
return (
|
|
139
|
+
<div role="alert">
|
|
140
|
+
<p>Something went wrong:</p>
|
|
141
|
+
<pre style={{ color: "red" }}>{error.message}</pre>
|
|
142
|
+
<button onClick={resetBoundary}>Try again</button>
|
|
143
|
+
</div>
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
127
148
|
### `withErrorBoundary` HOC
|
|
128
149
|
This package can also be used as a [higher-order component](https://legacy.reactjs.org/docs/higher-order-components.html) that accepts all of the same props as above:
|
|
129
150
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Component, ComponentType, FunctionComponent, ReactElement, ReactNode, ErrorInfo, PropsWithChildren, PropsWithRef } from "react";
|
|
2
2
|
export type ErrorBoundaryContextType = {
|
|
3
|
-
didCatch:
|
|
3
|
+
didCatch: boolean;
|
|
4
4
|
error: any;
|
|
5
5
|
resetErrorBoundary: (...args: any[]) => void;
|
|
6
6
|
};
|
|
@@ -53,7 +53,7 @@ export class ErrorBoundary extends Component<PropsWithRef<PropsWithChildren<Erro
|
|
|
53
53
|
resetErrorBoundary: (...args: any[]) => void;
|
|
54
54
|
componentDidCatch(error: Error, info: ErrorInfo): void;
|
|
55
55
|
componentDidUpdate(prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState): void;
|
|
56
|
-
render():
|
|
56
|
+
render(): import("react").FunctionComponentElement<import("react").ProviderProps<import("ErrorBoundaryContext").ErrorBoundaryContextType | null>>;
|
|
57
57
|
}
|
|
58
58
|
export type UseErrorBoundaryApi<Error> = {
|
|
59
59
|
resetBoundary: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAEA,uCAAuC;IACrC,QAAQ,EAAE,
|
|
1
|
+
{"mappings":";AAEA,uCAAuC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,GAAG,CAAC;IACX,kBAAkB,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,OAAO,MAAM,8EACyC,CAAC;ACDvD,gCAAgC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;AAEjE,4BAA4B;IAC1B,KAAK,EAAE,GAAG,CAAC;IACX,kBAAkB,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,gCAAgC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,OAAO,CAAC,EAAE,CACR,OAAO,EACH;QAAE,MAAM,EAAE,gBAAgB,CAAC;QAAC,IAAI,EAAE,GAAG,EAAE,CAAA;KAAE,GACzC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC;QAAC,IAAI,EAAE,GAAG,EAAE,GAAG,SAAS,CAAA;KAAE,KACrE,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;CACnB,CAAC;AAEF,8CAA8C,wBAAwB,GAAG;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,iBAAiB,EAAE,cAAc,aAAa,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,KAAK,CAAC;CACxB,CAAC;AAEF,2CAA2C,wBAAwB,GAAG;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAC1B,cAAc,EAAE,qBAAqB,CAAC;CACvC,CAAC;AAEF,6CAA6C,wBAAwB,GAAG;IACtE,QAAQ,EAAE,aACR,OAAO,EACP,MAAM,GAAG,iBAAiB,GAAG,gBAAgB,CAC9C,GAAG,IAAI,CAAC;IACT,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAC1B,cAAc,CAAC,EAAE,KAAK,CAAC;CACxB,CAAC;AAEF,iCACI,8BAA8B,GAC9B,+BAA+B,GAC/B,4BAA4B,CAAC;ACtCjC,0BAA0B;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CAAC;AAO5D,0BAA2B,SAAQ,UACjC,aAAa,kBAAkB,kBAAkB,CAAC,CAAC,EACnD,kBAAkB,CACnB;IACC,KAAK,qBAAgB;IAErB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;;IAI5C,kBAAkB,YAAa,GAAG,EAAE,UAWlC;IAEF,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS;IAI/C,kBAAkB,CAChB,SAAS,EAAE,kBAAkB,EAC7B,SAAS,EAAE,kBAAkB;IAyB/B,MAAM;CAsCP;AE1GD,gCAAgC,KAAK,IAAI;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,iCAAiC,KAAK,GAAG,GAAG,KAAK,oBAAoB,KAAK,CAAC,CAiC1E;ACtCD,kCAAkC,KAAK,SAAS,MAAM,EACpD,SAAS,EAAE,cAAc,KAAK,CAAC,EAC/B,kBAAkB,EAAE,kBAAkB,GACrC,cAAc,KAAK,CAAC,CActB","sources":["src/src/ErrorBoundaryContext.ts","src/src/types.ts","src/src/ErrorBoundary.ts","src/src/assertErrorBoundaryContext.ts","src/src/useErrorBoundary.ts","src/src/withErrorBoundary.ts","src/src/index.ts","src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"export * from \"./ErrorBoundary\";\nexport * from \"./ErrorBoundaryContext\";\nexport * from \"./useErrorBoundary\";\nexport * from \"./withErrorBoundary\";\n\n// TypeScript types\nexport * from \"./types\";\n"],"names":[],"version":3,"file":"react-error-boundary.d.ts.map"}
|
|
@@ -74,14 +74,15 @@ class $6d6d4999e62b3ee0$export$e926676385687eaf extends (0, $8zHUo$react.Compone
|
|
|
74
74
|
render() {
|
|
75
75
|
const { children: children , fallbackRender: fallbackRender , FallbackComponent: FallbackComponent , fallback: fallback } = this.props;
|
|
76
76
|
const { didCatch: didCatch , error: error } = this.state;
|
|
77
|
+
let childToRender = children;
|
|
77
78
|
if (didCatch) {
|
|
78
79
|
const props = {
|
|
79
80
|
error: error,
|
|
80
81
|
resetErrorBoundary: this.resetErrorBoundary
|
|
81
82
|
};
|
|
82
|
-
if ((0, $8zHUo$react.isValidElement)(fallback))
|
|
83
|
-
else if (typeof fallbackRender === "function")
|
|
84
|
-
else if (FallbackComponent)
|
|
83
|
+
if ((0, $8zHUo$react.isValidElement)(fallback)) childToRender = fallback;
|
|
84
|
+
else if (typeof fallbackRender === "function") childToRender = fallbackRender(props);
|
|
85
|
+
else if (FallbackComponent) childToRender = (0, $8zHUo$react.createElement)(FallbackComponent, props);
|
|
85
86
|
else throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
|
|
86
87
|
}
|
|
87
88
|
return (0, $8zHUo$react.createElement)((0, $4a61716688322eb0$export$b16d9fb1a22de840).Provider, {
|
|
@@ -90,7 +91,7 @@ class $6d6d4999e62b3ee0$export$e926676385687eaf extends (0, $8zHUo$react.Compone
|
|
|
90
91
|
error: error,
|
|
91
92
|
resetErrorBoundary: this.resetErrorBoundary
|
|
92
93
|
}
|
|
93
|
-
},
|
|
94
|
+
}, childToRender);
|
|
94
95
|
}
|
|
95
96
|
}
|
|
96
97
|
function $6d6d4999e62b3ee0$var$hasArrayChanged(a = [], b = []) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;ACAA;;;;ACAA;AAQO,MAAM,4CACX,CAAA,GAAA,0BAAY,EAAmC,IAAI;;;
|
|
1
|
+
{"mappings":"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","sources":["src/index.ts","src/ErrorBoundary.ts","src/ErrorBoundaryContext.ts","src/useErrorBoundary.ts","src/assertErrorBoundaryContext.ts","src/withErrorBoundary.ts","src/types.ts"],"sourcesContent":["export * from \"./ErrorBoundary\";\nexport * from \"./ErrorBoundaryContext\";\nexport * from \"./useErrorBoundary\";\nexport * from \"./withErrorBoundary\";\n\n// TypeScript types\nexport * from \"./types\";\n","import {\n Component,\n createElement,\n ErrorInfo,\n isValidElement,\n PropsWithChildren,\n PropsWithRef,\n} from \"react\";\nimport { ErrorBoundaryContext } from \"./ErrorBoundaryContext\";\nimport { ErrorBoundaryProps, FallbackProps } from \"./types\";\n\ntype ErrorBoundaryState = { didCatch: boolean; error: any };\n\nconst initialState: ErrorBoundaryState = {\n didCatch: false,\n error: null,\n};\n\nexport class ErrorBoundary extends Component<\n PropsWithRef<PropsWithChildren<ErrorBoundaryProps>>,\n ErrorBoundaryState\n> {\n state = initialState;\n\n static getDerivedStateFromError(error: Error) {\n return { didCatch: true, error };\n }\n\n resetErrorBoundary = (...args: any[]) => {\n const { error } = this.state;\n\n if (error !== null) {\n this.props.onReset?.({\n args,\n reason: \"imperative-api\",\n });\n\n this.setState(initialState);\n }\n };\n\n componentDidCatch(error: Error, info: ErrorInfo) {\n this.props.onError?.(error, info);\n }\n\n componentDidUpdate(\n prevProps: ErrorBoundaryProps,\n prevState: ErrorBoundaryState\n ) {\n const { didCatch } = this.state;\n const { resetKeys } = this.props;\n\n // There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array,\n // we'd end up resetting the error boundary immediately.\n // This would likely trigger a second error to be thrown.\n // So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.\n\n if (\n didCatch &&\n prevState.error !== null &&\n hasArrayChanged(prevProps.resetKeys, resetKeys)\n ) {\n this.props.onReset?.({\n next: resetKeys,\n prev: prevProps.resetKeys,\n reason: \"keys\",\n });\n\n this.setState(initialState);\n }\n }\n\n render() {\n const { children, fallbackRender, FallbackComponent, fallback } =\n this.props;\n const { didCatch, error } = this.state;\n\n let childToRender = children;\n\n if (didCatch) {\n const props: FallbackProps = {\n error,\n resetErrorBoundary: this.resetErrorBoundary,\n };\n\n if (isValidElement(fallback)) {\n childToRender = fallback;\n } else if (typeof fallbackRender === \"function\") {\n childToRender = fallbackRender(props);\n } else if (FallbackComponent) {\n childToRender = createElement(FallbackComponent, props);\n } else {\n throw new Error(\n \"react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop\"\n );\n }\n }\n\n return createElement(\n ErrorBoundaryContext.Provider,\n {\n value: {\n didCatch,\n error,\n resetErrorBoundary: this.resetErrorBoundary,\n },\n },\n childToRender\n );\n }\n}\n\nfunction hasArrayChanged(a: any[] = [], b: any[] = []) {\n return (\n a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))\n );\n}\n","import { createContext } from \"react\";\n\nexport type ErrorBoundaryContextType = {\n didCatch: boolean;\n error: any;\n resetErrorBoundary: (...args: any[]) => void;\n};\n\nexport const ErrorBoundaryContext =\n createContext<ErrorBoundaryContextType | null>(null);\n","import { useContext, useMemo, useState } from \"react\";\nimport { assertErrorBoundaryContext } from \"./assertErrorBoundaryContext\";\nimport { ErrorBoundaryContext } from \"./ErrorBoundaryContext\";\n\nexport type UseErrorBoundaryApi<Error> = {\n resetBoundary: () => void;\n showBoundary: (error: Error) => void;\n};\n\nexport function useErrorBoundary<Error = any>(): UseErrorBoundaryApi<Error> {\n const context = useContext(ErrorBoundaryContext);\n\n assertErrorBoundaryContext(context);\n\n const [state, setState] = useState<{\n error: Error | null;\n hasError: boolean;\n }>({\n error: null,\n hasError: false,\n });\n\n const memoized = useMemo(\n () => ({\n resetBoundary: () => {\n context?.resetErrorBoundary();\n setState({ error: null, hasError: false });\n },\n showBoundary: (error: Error) =>\n setState({\n error,\n hasError: true,\n }),\n }),\n [context?.resetErrorBoundary]\n );\n\n if (state.hasError) {\n throw state.error;\n }\n\n return memoized;\n}\n","import { ErrorBoundaryContextType } from \"./ErrorBoundaryContext\";\n\nexport function assertErrorBoundaryContext(\n value: any\n): value is ErrorBoundaryContextType {\n if (\n value == null ||\n typeof value.didCatch !== \"boolean\" ||\n typeof value.resetErrorBoundary !== \"function\"\n ) {\n throw new Error(\"ErrorBoundaryContext not found\");\n }\n\n return true;\n}\n","import { ComponentType, createElement } from \"react\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { ErrorBoundaryProps } from \"./types\";\n\nexport function withErrorBoundary<Props extends Object>(\n Component: ComponentType<Props>,\n errorBoundaryProps: ErrorBoundaryProps\n): ComponentType<Props> {\n const Wrapped: ComponentType<Props> = (props: Props) => {\n return createElement(\n ErrorBoundary,\n errorBoundaryProps,\n createElement(Component, props)\n );\n };\n\n // Format for display in DevTools\n const name = Component.displayName || Component.name || \"Unknown\";\n Wrapped.displayName = `withErrorBoundary(${name})`;\n\n return Wrapped;\n}\n","import {\n Component,\n ComponentType,\n FunctionComponent,\n ReactElement,\n ReactNode,\n} from \"react\";\n\ndeclare function FallbackRender(props: FallbackProps): ReactNode;\n\nexport type FallbackProps = {\n error: any;\n resetErrorBoundary: (...args: any[]) => void;\n};\n\ntype ErrorBoundarySharedProps = {\n onError?: (error: Error, info: { componentStack: string }) => void;\n onReset?: (\n details:\n | { reason: \"imperative-api\"; args: any[] }\n | { reason: \"keys\"; prev: any[] | undefined; next: any[] | undefined }\n ) => void;\n resetKeys?: any[];\n};\n\nexport type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {\n fallback?: never;\n FallbackComponent: ComponentType<FallbackProps>;\n fallbackRender?: never;\n};\n\nexport type ErrorBoundaryPropsWithRender = ErrorBoundarySharedProps & {\n fallback?: never;\n FallbackComponent?: never;\n fallbackRender: typeof FallbackRender;\n};\n\nexport type ErrorBoundaryPropsWithFallback = ErrorBoundarySharedProps & {\n fallback: ReactElement<\n unknown,\n string | FunctionComponent | typeof Component\n > | null;\n FallbackComponent?: never;\n fallbackRender?: never;\n};\n\nexport type ErrorBoundaryProps =\n | ErrorBoundaryPropsWithFallback\n | ErrorBoundaryPropsWithComponent\n | ErrorBoundaryPropsWithRender;\n"],"names":[],"version":3,"file":"react-error-boundary.js.map"}
|
|
@@ -58,14 +58,15 @@ class $44d7e150ebc754d2$export$e926676385687eaf extends (0, $hgUW1$Component) {
|
|
|
58
58
|
render() {
|
|
59
59
|
const { children: children , fallbackRender: fallbackRender , FallbackComponent: FallbackComponent , fallback: fallback } = this.props;
|
|
60
60
|
const { didCatch: didCatch , error: error } = this.state;
|
|
61
|
+
let childToRender = children;
|
|
61
62
|
if (didCatch) {
|
|
62
63
|
const props = {
|
|
63
64
|
error: error,
|
|
64
65
|
resetErrorBoundary: this.resetErrorBoundary
|
|
65
66
|
};
|
|
66
|
-
if ((0, $hgUW1$isValidElement)(fallback))
|
|
67
|
-
else if (typeof fallbackRender === "function")
|
|
68
|
-
else if (FallbackComponent)
|
|
67
|
+
if ((0, $hgUW1$isValidElement)(fallback)) childToRender = fallback;
|
|
68
|
+
else if (typeof fallbackRender === "function") childToRender = fallbackRender(props);
|
|
69
|
+
else if (FallbackComponent) childToRender = (0, $hgUW1$createElement)(FallbackComponent, props);
|
|
69
70
|
else throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
|
|
70
71
|
}
|
|
71
72
|
return (0, $hgUW1$createElement)((0, $ebb31c7feaa4405e$export$b16d9fb1a22de840).Provider, {
|
|
@@ -74,7 +75,7 @@ class $44d7e150ebc754d2$export$e926676385687eaf extends (0, $hgUW1$Component) {
|
|
|
74
75
|
error: error,
|
|
75
76
|
resetErrorBoundary: this.resetErrorBoundary
|
|
76
77
|
}
|
|
77
|
-
},
|
|
78
|
+
}, childToRender);
|
|
78
79
|
}
|
|
79
80
|
}
|
|
80
81
|
function $44d7e150ebc754d2$var$hasArrayChanged(a = [], b = []) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;ACAA;;;;ACAA;AAQO,MAAM,4CACX,CAAA,GAAA,oBAAY,EAAmC,IAAI;;;
|
|
1
|
+
{"mappings":"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","sources":["src/index.ts","src/ErrorBoundary.ts","src/ErrorBoundaryContext.ts","src/useErrorBoundary.ts","src/assertErrorBoundaryContext.ts","src/withErrorBoundary.ts","src/types.ts"],"sourcesContent":["export * from \"./ErrorBoundary\";\nexport * from \"./ErrorBoundaryContext\";\nexport * from \"./useErrorBoundary\";\nexport * from \"./withErrorBoundary\";\n\n// TypeScript types\nexport * from \"./types\";\n","import {\n Component,\n createElement,\n ErrorInfo,\n isValidElement,\n PropsWithChildren,\n PropsWithRef,\n} from \"react\";\nimport { ErrorBoundaryContext } from \"./ErrorBoundaryContext\";\nimport { ErrorBoundaryProps, FallbackProps } from \"./types\";\n\ntype ErrorBoundaryState = { didCatch: boolean; error: any };\n\nconst initialState: ErrorBoundaryState = {\n didCatch: false,\n error: null,\n};\n\nexport class ErrorBoundary extends Component<\n PropsWithRef<PropsWithChildren<ErrorBoundaryProps>>,\n ErrorBoundaryState\n> {\n state = initialState;\n\n static getDerivedStateFromError(error: Error) {\n return { didCatch: true, error };\n }\n\n resetErrorBoundary = (...args: any[]) => {\n const { error } = this.state;\n\n if (error !== null) {\n this.props.onReset?.({\n args,\n reason: \"imperative-api\",\n });\n\n this.setState(initialState);\n }\n };\n\n componentDidCatch(error: Error, info: ErrorInfo) {\n this.props.onError?.(error, info);\n }\n\n componentDidUpdate(\n prevProps: ErrorBoundaryProps,\n prevState: ErrorBoundaryState\n ) {\n const { didCatch } = this.state;\n const { resetKeys } = this.props;\n\n // There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array,\n // we'd end up resetting the error boundary immediately.\n // This would likely trigger a second error to be thrown.\n // So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.\n\n if (\n didCatch &&\n prevState.error !== null &&\n hasArrayChanged(prevProps.resetKeys, resetKeys)\n ) {\n this.props.onReset?.({\n next: resetKeys,\n prev: prevProps.resetKeys,\n reason: \"keys\",\n });\n\n this.setState(initialState);\n }\n }\n\n render() {\n const { children, fallbackRender, FallbackComponent, fallback } =\n this.props;\n const { didCatch, error } = this.state;\n\n let childToRender = children;\n\n if (didCatch) {\n const props: FallbackProps = {\n error,\n resetErrorBoundary: this.resetErrorBoundary,\n };\n\n if (isValidElement(fallback)) {\n childToRender = fallback;\n } else if (typeof fallbackRender === \"function\") {\n childToRender = fallbackRender(props);\n } else if (FallbackComponent) {\n childToRender = createElement(FallbackComponent, props);\n } else {\n throw new Error(\n \"react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop\"\n );\n }\n }\n\n return createElement(\n ErrorBoundaryContext.Provider,\n {\n value: {\n didCatch,\n error,\n resetErrorBoundary: this.resetErrorBoundary,\n },\n },\n childToRender\n );\n }\n}\n\nfunction hasArrayChanged(a: any[] = [], b: any[] = []) {\n return (\n a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))\n );\n}\n","import { createContext } from \"react\";\n\nexport type ErrorBoundaryContextType = {\n didCatch: boolean;\n error: any;\n resetErrorBoundary: (...args: any[]) => void;\n};\n\nexport const ErrorBoundaryContext =\n createContext<ErrorBoundaryContextType | null>(null);\n","import { useContext, useMemo, useState } from \"react\";\nimport { assertErrorBoundaryContext } from \"./assertErrorBoundaryContext\";\nimport { ErrorBoundaryContext } from \"./ErrorBoundaryContext\";\n\nexport type UseErrorBoundaryApi<Error> = {\n resetBoundary: () => void;\n showBoundary: (error: Error) => void;\n};\n\nexport function useErrorBoundary<Error = any>(): UseErrorBoundaryApi<Error> {\n const context = useContext(ErrorBoundaryContext);\n\n assertErrorBoundaryContext(context);\n\n const [state, setState] = useState<{\n error: Error | null;\n hasError: boolean;\n }>({\n error: null,\n hasError: false,\n });\n\n const memoized = useMemo(\n () => ({\n resetBoundary: () => {\n context?.resetErrorBoundary();\n setState({ error: null, hasError: false });\n },\n showBoundary: (error: Error) =>\n setState({\n error,\n hasError: true,\n }),\n }),\n [context?.resetErrorBoundary]\n );\n\n if (state.hasError) {\n throw state.error;\n }\n\n return memoized;\n}\n","import { ErrorBoundaryContextType } from \"./ErrorBoundaryContext\";\n\nexport function assertErrorBoundaryContext(\n value: any\n): value is ErrorBoundaryContextType {\n if (\n value == null ||\n typeof value.didCatch !== \"boolean\" ||\n typeof value.resetErrorBoundary !== \"function\"\n ) {\n throw new Error(\"ErrorBoundaryContext not found\");\n }\n\n return true;\n}\n","import { ComponentType, createElement } from \"react\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { ErrorBoundaryProps } from \"./types\";\n\nexport function withErrorBoundary<Props extends Object>(\n Component: ComponentType<Props>,\n errorBoundaryProps: ErrorBoundaryProps\n): ComponentType<Props> {\n const Wrapped: ComponentType<Props> = (props: Props) => {\n return createElement(\n ErrorBoundary,\n errorBoundaryProps,\n createElement(Component, props)\n );\n };\n\n // Format for display in DevTools\n const name = Component.displayName || Component.name || \"Unknown\";\n Wrapped.displayName = `withErrorBoundary(${name})`;\n\n return Wrapped;\n}\n","import {\n Component,\n ComponentType,\n FunctionComponent,\n ReactElement,\n ReactNode,\n} from \"react\";\n\ndeclare function FallbackRender(props: FallbackProps): ReactNode;\n\nexport type FallbackProps = {\n error: any;\n resetErrorBoundary: (...args: any[]) => void;\n};\n\ntype ErrorBoundarySharedProps = {\n onError?: (error: Error, info: { componentStack: string }) => void;\n onReset?: (\n details:\n | { reason: \"imperative-api\"; args: any[] }\n | { reason: \"keys\"; prev: any[] | undefined; next: any[] | undefined }\n ) => void;\n resetKeys?: any[];\n};\n\nexport type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {\n fallback?: never;\n FallbackComponent: ComponentType<FallbackProps>;\n fallbackRender?: never;\n};\n\nexport type ErrorBoundaryPropsWithRender = ErrorBoundarySharedProps & {\n fallback?: never;\n FallbackComponent?: never;\n fallbackRender: typeof FallbackRender;\n};\n\nexport type ErrorBoundaryPropsWithFallback = ErrorBoundarySharedProps & {\n fallback: ReactElement<\n unknown,\n string | FunctionComponent | typeof Component\n > | null;\n FallbackComponent?: never;\n fallbackRender?: never;\n};\n\nexport type ErrorBoundaryProps =\n | ErrorBoundaryPropsWithFallback\n | ErrorBoundaryPropsWithComponent\n | ErrorBoundaryPropsWithRender;\n"],"names":[],"version":3,"file":"react-error-boundary.module.js.map"}
|