react-error-boundary

Simple reusable React error boundary component

ReactError handling
bvaughn/react-error-boundaryreact-error-boundary

README

react-error-boundary


Reusable React error boundary component. Supports all React renderers (including React DOM and React Native).

If you like this project, 🎉 become a sponsor or ☕ buy me a coffee


Getting started


  1. ```sh
  2. # npm
  3. npm install react-error-boundary

  5. # pnpm
  6. pnpm add react-error-boundary

  8. # yarn
  9. yarn add react-error-boundary
  10. ```

API


ErrorBoundary component

Wrap an ErrorBoundary 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 prop

The simplest way to render a default "something went wrong" type of error message.
  1. ```js
  2. "use client";

  4. import { ErrorBoundary } from "react-error-boundary";

  6. <ErrorBoundary fallback={<div>Something went wrong</div>}>
  7.   <ExampleApplication />
  8. </ErrorBoundary>
  9. ```

ErrorBoundary with fallbackRender prop

"Render prop" function responsible for returning a fallback UI based on a thrown value.
  1. ```js
  2. "use client";

  4. import { ErrorBoundary } from "react-error-boundary";

  6. function fallbackRender({ error, resetErrorBoundary }) {
  7.   // Call resetErrorBoundary() to reset the error boundary and retry the render.

  9.   return (
  10.     <div role="alert">
  11.       <p>Something went wrong:</p>
  12.       <pre style={{ color: "red" }}>{error.message}</pre>
  13.     </div>
  14.   );
  15. }

  17. <ErrorBoundary
  18.   fallbackRender={fallbackRender}
  19.   onReset={(details) => {
  20.     // Reset the state of your app so the error doesn't happen again
  21.   }}
  22. >
  23.   <ExampleApplication />
  24. </ErrorBoundary>;
  25. ```

ErrorBoundary with FallbackComponent prop

React component responsible for returning a fallback UI based on a thrown value.
  1. ```js
  2. "use client";

  4. import { ErrorBoundary } from "react-error-boundary";

  6. function Fallback({ error, resetErrorBoundary }) {
  7.   // Call resetErrorBoundary() to reset the error boundary and retry the render.

  9.   return (
  10.     <div role="alert">
  11.       <p>Something went wrong:</p>
  12.       <pre style={{ color: "red" }}>{error.message}</pre>
  13.     </div>
  14.   );
  15. }

  17. <ErrorBoundary
  18.   FallbackComponent={Fallback}
  19.   onReset={(details) => {
  20.     // Reset the state of your app so the error doesn't happen again
  21.   }}
  22. >
  23.   <ExampleApplication />
  24. </ErrorBoundary>;
  25. ```

Logging errors with onError


  1. ```js
  2. "use client";

  4. import { ErrorBoundary } from "react-error-boundary";

  6. const logError = (error: Error, info: { componentStack: string }) => {
  7.   // Do something with the error, e.g. log to an external API
  8. };

  10. const ui = (
  11.   <ErrorBoundary FallbackComponent={ErrorFallback} onError={logError}>
  12.     <ExampleApplication />
  13.   </ErrorBoundary>
  14. );
  15. ```

useErrorBoundary hook

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:

  1. ```js
  2. "use client";

  4. import { useErrorBoundary } from "react-error-boundary";

  6. function Example() {
  7.   const { showBoundary } = useErrorBoundary();

  9.   useEffect(() => {
  10.     fetchGreeting(name).then(
  11.       response => {
  12.         // Set data in state and re-render
  13.       },
  14.       error => {
  15.         // Show error boundary
  16.         showBoundary(error);
  17.       }
  18.     );
  19.   });

  21.   // Render ...
  22. }
  23. ```