Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

react-error-boundaries

1.1.4 • Public • Published

react-error-boundaries

version downloads MIT License

A reusable React error boundaries component. Based on React 16.2.0.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Effect picture:

react-error-boundaries

Install

npm install react-error-boundaries

Usage

Import:

// import all
import { ErrorBoundary, withErrorHandler, errorHandlerDecorator, FallbackView } from 'react-error-boundaries'
// import default ErrorBoundary
import ErrorBoundary from 'react-error-boundaries'

Intro:

  • ErrorBoundary: React container component to handler error
  • withErrorHandler: React HOC to customize the errorCallback function and FallbackComponent
  • errorHandlerDecorator: By this, you can use error boundary as ES7 decorator
  • FallbackView: The default fallback component, show when error occur. props: { error: Objec, errorInfo: Object, closeErrorModal: Function }(Unable in production, if import you will got undefined)

Use as a component container:

// import first
import React from 'react'
import ReactDOM from 'react-dom'
import ErrorBoundary from 'react-error-boundaries'
 
const App = () => {
    return (
    <ErrorBoundary>
        <YourComponents />
    </ErrorBoundary>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

And you can handle errors by providing an onError callback, and customize the FallbackComponent by providing a Component.

FallbackComponent will receive props:

  • closeErrorModal: Function, call when click close button
  • error: An error that has been thrown.
  • errorInfo: An object with componentStack key. The property has information about component stack during thrown error.
// import first
import React from 'react'
import ReactDOM from 'react-dom'
import ErrorBoundary from 'react-error-boundaries'
 
function onError(error, errorInfo, props) {
  // you can report Error to service here
  console.error('onError:', error.message);
}
 
const App = () => {
    return (
    <ErrorBoundary onError={onError} FallbackComponent={YourFallbackView}>
        <YourComponents />
    </ErrorBoundary>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

Use as class decorator:

// import first
import React from 'react'
import { errorHandlerDecorator } from 'react-error-boundaries'
 
// ES7 decorator, need babel plugin "transform-decorators-legacy"
@errorHandlerDecorator
class YourComponent extends React.Component {
  constructor(props) {
    super(props);
  }
 
  render() {
    return (
      <div>
        contents
      </div>
    );
  }
}
// or not use @decorator just like this:
// export default errorHandlerDecorator(YourComponent)
 
function onError(error, errorInfo, props) {
  // you can report Error to service here
  console.log('onError:', error.message);
}
 
ReactDOM.render(<YourComponent onError={onError} />, document.getElementById('root'));

You can also customize the FallbackComponent in HOC way:

// import first, FallbackView is default Fallback Component
import { withErrorHandler, FallbackView } from 'react-error-boundaries'
 
// customize the errorCallback
function onError(error, errorInfo, props) {
  // you can report Error to service here
  console.error('onError:', error.message);
}
 
/* example 1 */
 
const ComponentWithErrorBoundary = withErrorHandler(
  YourFallbackComponent, // Fallback Component to display errors, to replace default FallbackView
  YourComponent          // Component to decorate
);
ReactDOM.render(<ComponentWithErrorBoundary onError={onError} />, document.getElementById('root'));
 
/* example 2 */
// customize as a ES7 decorator
const yourErrorHandlerDecorator = withErrorHandler(
  YourFallbackComponent // Fallback Component to display errors, to replace default FallbackView
);
 
@yourErrorHandlerDecorator
class YourComponent extends React.component {
    //......
}
ReactDOM.render(<YourComponent onError={onError} />, document.getElementById('root'));

Try example

Input i in search input and error will throw.

# run example, auto open browser and enable hot loader 
npm install
npm start

How to disable it

To enable it by set process.env.NODE_ENV or process.env.ERROR_ENV as development, so you can disable it by setting process.env.NODE_ENV to be production and not set process.env.ERROR_ENV as development.

With webpack by setting like this to disable it:

plugins: [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: '"production"'
    }
  })
]

With config like this to enable it even in NODE_ENV is production:

plugins: [
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: '"production"',
      ERROR_ENV: '"development"'
    }
  })
]

License

MIT

Install

npm i react-error-boundaries

DownloadsWeekly Downloads

415

Version

1.1.4

License

MIT

Last publish

Collaborators

  • avatar