Capturing render errors

The Bugsnag ErrorBoundary allows you to capture React render errors in your application. You can also use the FallbackComponent to display a custom error screen to your users:

// Start Bugsnag first...
Bugsnag.start({...})

// Create the error boundary...
const ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React)

const onError = (event) => {
  // callback will only run for errors caught by boundary
}

const ErrorView = ({ clearError }) =>
  <div>
    <p>Inform users of an error in the component tree.
    Use clearError to reset ErrorBoundary state and re-render child tree.</p>
    <button onClick={clearError}>Reset</button>
  </div>

const App = () => {
  // Your main App component
}

export default () =>
  <ErrorBoundary FallbackComponent={ErrorView} onError={onError}>
    <App />
  </ErrorBoundary>

See React’s documentation to find out more about Error Boundaries.

Customizing the error boundary

The Bugsnag ErrorBoundary component accepts some additional props:

  • onError – this allows you to pass in an onError callback which runs only for errors caught by the error boundary.
  • FallbackComponent – by default the error boundary will attempt to re-render the child tree which may result in nothing being rendered at all. If you specify a FallbackComponent, when an error happens Bugsnag will render this instead. This means you can display a user-friendly error state.

Resetting the child tree

When the FallbackComponent is rendered by the ErrorBoundary component, the ErrorBoundary supplies clearError as a prop to FallbackComponent. Calling clearError() will cause a re-render of the child tree instead of the FallbackComponent.

Render errors in the dashboard

When render errors happen, they will be reported to Bugsnag along with any React-specific info that was available at the time.

In the dashboard, you’ll see errors reported with extra debugging info in a “React” tab. For example:

React error information in the the dashboard