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

    187

    Version

    1.1.4

    License

    MIT

    Last publish

    Collaborators

    • chyrain