Handle React Errors in v15 🙌 (handle_unstableError Example)

Edit: for ReactV16 you need to read about componentDidCatch

If you’re writing reactjs daily you have probably seen this error:

Example: http://jsfiddle.net/uqkkLaxs/ (view the source)

So whats the deal?! React doesn’t know how to handle your errors! When `render()` returns an `Error` instead of a `<Component/>`, it cannot mount that shit and instead spits out the above note. (it only knows how to render components!)

TL:DR; React v15 has a solution.

unstable_handleError: function(){
this.setState({error: "oops"})
}

`unstable_handleError()` is a new function for all components which is called when render or children render an error. Here’s an example component:

class Boundary extends React.Component {
...
      unstable_handleError() {
logErrorSoYouCanFixTheThing()
this.setState({error: true});
}
      render() {
if (this.state.error){
return <SafeComponent/>
} else {
return <ComponentWithErrors/>
}
}
}

On mount there is no error, so it renders `<ComponentWithErrors/>`.

Assuming the `<ComponentWithErrors/>` throws an error, this component’s `unstable_handleError()` will be called and state will update to `error: true`.

When state updates, the `<SafeComponent/>` is instead rendered!

How do I know this is coming?!?! the TESTS in the source code!

https://github.com/facebook/react/blob/15-stable/src/renderers/shared/stack/reconciler/__tests__/ReactErrorBoundaries-test.js

Good luck and happy reacting.