react-error-boundaries

react-error-boundaries

A reusable React error boundaries component.

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.

Base on React 16.2.0, babel required:

{
    "presets": [
        "stage-3",
        "react"
    ],
    "plugins": [
        "transform-decorators-legacy",
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}

Usage

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

Use as class decorator:

// import first
import { errorHandlerDecorator } from 'react-error-boundaries'

@errorHandlerDecorator
export default class FilterableProductTable extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        contents
      </div>
    );
  }
}

Define your errorCallback function and FallbackComponent:

// import first
import { withErrorHandler } from 'react-error-boundaries'

const yourErrorHandler = withErrorHandler(
  errorCallback,    // report Error to service
  FallbackComponent // Component to display errors
)

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