#### ErrorBoundary 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-boundary";

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

return (


{error.message}

fallbackRender={fallbackRender}
onReset={(details) => {
// Reset the state of your app so the error doesn't happen again
}}
>

;
`

#### ErrorBoundary with FallbackComponent prop

React component responsible for returning a fallback UI based on a thrown value.

`js
"use client";

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

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

return (


{error.message}

FallbackComponent={Fallback}
onReset={(details) => {
// Reset the state of your app so the error doesn't happen again
}}
>

;
`

#### Logging errors with onError

`js
"use client";

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

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-boundary";

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-boundary";

function ErrorFallback({ error }) {
const { resetBoundary } = useErrorBoundary();

return (


{error.message}

`js
"use client";

import { withErrorBoundary } from "react-error-boundary";

const ComponentWithErrorBoundary = withErrorBoundary(ExampleComponent, {
fallback:

// Can be rendered as
`

---

FAQ

ErrorBoundary cannot be used as a JSX component

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:

`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.