import ErrorBoundary from '@invisionag/iris-react-errorboundary';

react-error-boundary is a component that catches JavaScript errors anywhere in its child component tree and displays a fallback UI instead. This prevents the entire react app from unmounting by using React 16's componentDidCatch lifecycle method.

Usage

Basic

Renders a fallback UI when <SomeComponent /> throws an error. (As seen in the default Story)

<ErrorBoundary>
  <SomeComponent />
</ErrorBoundary>

showStackTrace

When using the default fallback UI the showStackTrace prop controlles if the stacktrace is shown. By default the stacktrace isn't shown in the production enviroment.

// Will never show the stacktrace
<ErrorBoundary showStackTrace={false}>
  <SomeComponent />
</ErrorBoundary>

renderError

The renderError prop lets you render a custom fallback UI. It expects a function that takes an ErrorObject and returns a React Node.

type ErrorObject = {
  error: Error,
  componentStack: string,
};

renderError = (errorObject: ErrorObject) => (
  <SomeAlternateComponent errorObject={errorObject} />
);

<ErrorBoundary renderError={renderError}>
  <SomeComponent />
</ErrorBoundary>