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

# npm
npm install react-error-boundary
# pnpm
pnpm add react-error-boundary
# yarn
yarn add react-error-boundary

A reusable React error boundary component. Wrap this component around other React components to "catch" errors and render a fallback UI.

ℹ️ The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent. Refer to the documentation to determine which is best for your application.

ℹ️ This 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.

None

<ErrorBoundary fallback={<div class="text-red">Something went wrong</div>} />

<ErrorBoundary FallbackComponent={Fallback} />

<ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) => <div>...</div>} />

This 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:

{
  ...
  "overrides": {
    "@types/react": "17.0.60"
  },
  ...
}

If using Yarn:

{
  ...
  "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.