Simple reusable React error boundary component
Switch branches/tags
Nothing to show
Clone or download
bvaughn Merge pull request #22 from rishabhsrao/setup-travisci
Setup TravisCI with lint, flow and test scripts
Latest commit 41e300b Sep 8, 2018


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 />