Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-error-boundary with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactErrorBoundary = require("react-error-boundary")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-error-boundary v1.2.5

Sample reusable React error boundary component for React 16+


A simple, reusable React error boundary component for React 16+.

NPM registry NPM license

React v16 introduced the concept of “error boundaries”.

This component provides a simple and reusable wrapper that you can use to wrap around your components. Any rendering errors in your components hierarchy can then be gracefully handled.


The simplest way to use <ErrorBoundary> is to wrap it around any component that may throw an error. This will handle errors thrown by that component and its descendants too.

import ErrorBoundary from 'react-error-boundary';

  <ComponentThatMayError />

You can react to errors (e.g. for logging) by providing an onError callback:

import ErrorBoundary from 'react-error-boundary';

const myErrorHandler = (error: Error, componentStack: string) => {
  // Do something with the error
  // E.g. log to an error logging client here

<ErrorBoundary onError={myErrorHandler}>
  <ComponentThatMayError />

You can also customize the fallback component’s appearance:

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

const MyFallbackComponent = ({ componentStack, error }) => (
    <p><strong>Oops! An error occured!</strong></p>
    <p>Here’s what we know…</p>
    <p><strong>Error:</strong> {error.toString()}</p>
    <p><strong>Stacktrace:</strong> {componentStack}</p>

<ErrorBoundary FallbackComponent={MyFallbackComponent}>
  <ComponentThatMayError />

You can also use it as a higher-order component:

import { ErrorBoundaryFallbackComponent, withErrorBoundary } from 'react-error-boundary';

const ComponentWithErrorBoundary = withErrorBoundary(
  ErrorBoundaryFallbackComponent, // Or pass in your own fallback component
  onErrorHandler: (error, componentStack) => {
    // Do something with the error
    // E.g. log to an error logging client here

<ComponentWithErrorBoundary />
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free