How do I handle exceptions?

Question

Angular has a great $exceptionHandler. Is there anything like this for react.js?

I would like to log my errors to an external API. Examples:

• https://github.com/occ/TraceKit
• http://trackjs.com/
• https://plus.google.com/+PaulIrish/posts/12BVL5exFJn

Answer 1

There's no magic like in angular. If there's an uncaught error, it propagates up the scopes until it hits window, and then an error event is emitted – the same behavior as an error without react.

var App = React.createClass({
  render: function(){
    throw new Error("rawr!");
    return <div>Hello, world!</div>
  }
});

window.addEventListener('error', function(e){
  // e instanceof ErrorEvent
  console.error('caught the error: ' + e.message);
});

If you look into cross browser support, please update this answer or add a comment with citations.

Instead of logging it to the console (which already happens by default), you can send it anywhere you like.

Unlike some other frameworks, an uncaught error is always a bug in your code. It should never happen.

You may also need to do some special handling of promise errors by explicitly adding a .catch(reportError) to the end of chains, and checking that it's a TypeError or ReferenceError.