npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

react-error-boundary

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

Keywords

none

install

npm i react-error-boundary

Downloadsweekly downloads

16,958

version

1.2.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability