react-error-boundaries

react-error-boundaries

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:

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 }

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:

// 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}>
        <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'));

In HOC way, you can also customize the FallbackComponent for better appearance:

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

License

MIT