Important note:

Errors are caught in render but are not caught in event handlers. The example button “button will not throw” will not utilize Error Boundry and will still be shown in the javascript console.

I highly recommend clicking through into this codesandbox to view the example components. Below is a basic PotentialError Component

class PotentialError extends React.Component {

constructor(props) {

super(props);

this.state = { error: false };

}

componentDidCatch(error, info) {

this.setState({ error, info });

}

render() {

if (this.state.error) {

return <h1>Error: {this.state.error.toString()}</h1>;

}

return this.props.children;

}

}

Then at the top or anywhere you can use it like so:

<PotentialError><AwesomeApp /></PotentialError>

Another awesome feature of componentDidCatch is the info object which contains the error Stack!

{this.state.info && this.state.info.componentStack}

This will tell you exactly where your component flopped!

Let me know how you’re playing with error boundaries!