Skip to content
Utility React error handler decorator. Described in the following blog post:
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Readme.md
index.js
package.json

Readme.md

What is it?

This is a little utility that wraps your ES6 (or even ES5) React Component's lifecycle methods with a try/catch and is useful in development because it exposes errors thrown that are swallowed by React by default. Now you can more easily diagnose errors during development.

NOTE: It's not likely a good idea to run with this enabled in production as it could affect performance of your React components.

Will this work when Browsers implement Classes?

To be honest, I'm not sure (would love to find out soon). This does work with a Babel and Typescript transpiled ES6 class.

More details

You can follow this GitHub Issue for more details. Thanks to inspiration from skiano/react-safe-render.

Usage with an es7 @decorator

import wrapReactLifecycleMethodsWithTryCatch from 'react-component-errors'

@wrapReactLifecycleMethodsWithTryCatch
class MyComponent extends React.Component {
  componentDidMount(){
    throw new Error("Test error");
  }
  render(){
    return <div>Hello</div>;
  }
}

Usage without a decorator

import wrapReactLifecycleMethodsWithTryCatch from 'react-component-errors'

class MyComponent extends React.Component {
  componentDidMount(){
    throw new Error("Test error");
  }
  render(){
    return <div>Hello</div>;
  }
}
wrapReactLifecycleMethodsWithTryCatch(MyComponent);

Config

import {config} from 'react-component-errors'

config.enabled: default is true you can set to false to disable wrapping components with try/catch config.errorHandler: default will console.error a helpful error message. See example below to override and customize errorHandler.

Override errorHandler using config

You can see the below running in a plnkr where we give the helper our own errorHandler which uses Toastr to display error messages.

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import toastr from 'toastr';
import wrapReactLifecycleMethodsWithTryCatch, {config} from 'npm:react-component-errors';

config.errorHandler = (errorReport) => {
   console.error(`Error in ${errorReport.component}.${errorReport.method}(${(errorReport.arguments ? '...' : '')}): ${errorReport.error}`, errorReport);
   toastr.error(`Error in ${errorReport.component}.${errorReport.method}(${(errorReport.arguments ? '...' : '')}): ${errorReport.error}`);
};

@wrapReactLifecycleMethodsWithTryCatch
class MyComponent extends React.Component {

  componentWillMount(){
    throw new Error("Test error");
  }

  render(){
    return <div>{this.state.message}</div>;
  }
}


ReactDOM.render(<MyComponent />, document.getElementById('main'));

License

Code released under the MIT license.

You can’t perform that action at this time.