Have ideas to improve npm?Join in the discussion! »

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

    1.2.5 • Public • Published

    react-error-boundary

    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.

    Usage

    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';
     
    <ErrorBoundary>
      <ComponentThatMayError />
    </ErrorBoundary>

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

    You can also customize the fallback component’s appearance:

    import { ErrorBoundary } from 'react-error-boundary';
     
    const MyFallbackComponent = ({ componentStack, error }) => (
      <div>
        <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>
      </div>
    );
     
    <ErrorBoundary FallbackComponent={MyFallbackComponent}>
      <ComponentThatMayError />
    </ErrorBoundary>

    You can also use it as a higher-order component:

    import { ErrorBoundaryFallbackComponent, withErrorBoundary } from 'react-error-boundary';
     
    const ComponentWithErrorBoundary = withErrorBoundary(
      ComponentThatMayError,
      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 />

    Install

    npm i [email protected]

    Version

    1.2.5

    License

    MIT

    Unpacked Size

    118 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar
    • avatar