Simple reusable React error boundary component
npm install react-error-recycleReusable React error boundary component. Supports all React renderers (including React DOM and React Native).
``shnpm
npm install react-error-recycle
API
$3
Wrap an
component around other React components to "catch" errors and render a fallback UI. The component supports several ways to render a fallback (as shown below).> Note
ErrorBoundary is a _client_ component. You can only pass props to it that are serializeable or use it in files that have a "use client"; directive.####
ErrorBoundary with fallback propThe simplest way to render a default "something went wrong" type of error message.
`js
"use client";import { ErrorBoundary } from "react-error-recycle";
Something went wrong
####
with fallbackRender prop"Render prop" function responsible for returning a fallback UI based on a thrown value.
`js
"use client";import { ErrorBoundary } from "react-error-recycle";
function fallbackRender({ error, resetErrorBoundary }) {
// Call resetErrorBoundary() to reset the error boundary and retry the render.
return (
Something went wrong:
{error.message}
);
}
onReset={(details) => {
// Reset the state of your app so the error doesn't happen again
}}
>
;
`####
with FallbackComponent propReact component responsible for returning a fallback UI based on a thrown value.
`js
"use client";import { ErrorBoundary } from "react-error-recycle";
function Fallback({ error, resetErrorBoundary }) {
// Call resetErrorBoundary() to reset the error boundary and retry the render.
return (
Something went wrong:
{error.message}
);
}
onReset={(details) => {
// Reset the state of your app so the error doesn't happen again
}}
>
;
`#### Logging errors with
js
"use client";import { ErrorBoundary } from "react-error-recycle";
const logError = (error: Error, info: { componentStack: string }) => {
// Do something with the error, e.g. log to an external API
};
const ui = (
);
`$3
Convenience hook for imperatively showing or dismissing error boundaries.
#### Show the nearest error boundary from an event handler
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.
This hook can be used to pass those errors to the nearest error boundary:
js
"use client";import { useErrorBoundary } from "react-error-recycle";
function Example() {
const { showBoundary } = useErrorBoundary();
useEffect(() => {
fetchGreeting(name).then(
(response) => {
// Set data in state and re-render
},
(error) => {
// Show error boundary
showBoundary(error);
}
);
});
// Render ...
}
`#### Dismiss the nearest error boundary
A fallback component can use this hook to request the nearest error boundary retry the render that originally failed.
js
"use client";import { useErrorBoundary } from "react-error-recycle";
function ErrorFallback({ error }) {
const { resetBoundary } = useErrorBoundary();
return (
Something went wrong:
{error.message}
);
}
`$3
This package can also be used as a higher-order component that accepts all of the same props as above:
js
"use client";import { withErrorBoundary } from "react-error-recycle";
const ComponentWithErrorBoundary = withErrorBoundary(ExampleComponent, {
fallback:
Something went wrong,
onError(error, info) {
// Do something with the error
// E.g. log to an error logging client here
},
});// Can be rendered as
`---
FAQ
cannot be used as a JSX componentThis error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly, e.g.:
If using NPM:
`json
{
...
"overrides": {
"@types/react": "17.0.60"
},
...
}
`If using Yarn:
json
{
...
"resolutions": {
"@types/react": "17.0.60"
},
...
}
``---
This blog post shows more examples of how this package can be used, although it was written for the version 3 API.