react-error-boundaries

react-error-boundaries

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

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

# build
npm run build

License

MIT