JSPM

  • Created
  • Published
  • Downloads 6512519
  • Score
    100M100P100Q282831F
  • License MIT

Sample reusable React error boundary component for React 16+

Package Exports

  • react-error-boundary

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-error-boundary) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-error-boundary

Sample reusable React error boundary component for React 16+

The simplest way to use a boundary is to wrap it around any component that may throw an error. This will handle errors thrown by that component's descendants also.

import ErrorBoundary from 'react-error-boundary';

<ErrorBoundary>
  <ComponentThatMayError />
</ErrorBoundary>

You can react to errors (eg for logging) by providing an onError callback:

import ErrorBoundary from 'react-error-boundary';

const myErrorHandler = (error: Error, componentStack: string) => {
  // ...
};

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

You can also customize the fallback appearance:

const MyFallbackComponent = ({ componentStack, error }) => (
  <div/>
)

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

You can also use it as a HOC:

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

const ComponentWithErrorBoundary = withErrorBoundary(
  ComponentToDecorate: Element<any>,
  CustomFallbackComponent: ?Element<any>,
  onErrorHandler: ?(error: Error, componentStack: string) => void,
);