skiano / react-safe-render

Helper to make sure your react components do not kill your entire Application when they fail to render

React Safe Render

Helper to make sure your react components do not kill your entire application when their lifecylce methods fail.

Usage

Before any other components are created

var React = require('react');

require('react-safe-render')(React, {
  errorHandler: function (errReport) {
    
    // if a component fails you can handle the failure however you want
    
    errReport.displayName // name of component that failed
    errReport.props // the props that the component recieved
    errReport.method // name of method that failed (ie: componentWillMount)
    errReport.arguments // arguments for the method that failed (if there were any)
    errReport.error // the original error object
  }
});

Note on es2015

At the moment this only works for components made via React.createClass(). It will not catch errors if you use the Component class directly.

Disable for a single component

If you want to disable the error handler for a component, you can use a static property

React.createClass({
  statics: {
    bubbleErrors: true
  },

  // ...

});

License

MIT

react-safe-render's Issues

Error report has no state

I noticed that react-safe-render exposes some parts of the component such as displayName, props, and the lifecycle method that threw the error. Is their a reason the state isn't exposed as well? Why not expose the component itself in the report?

An additional benefit other than your entire tree not getting locked up is that you can now reveal exactly which components in your app are failing and what state they were in when they failed. It would be useful to have as much information as possible. Thoughts?