react-error-boundary
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    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 descendents 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,
    );

    Install

    npm i react-error-boundary@1.2.1

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • kentcdodds
    • brianvaughn