reactjs try catch in render does not catch children errors - error-handling

Question

I'm trying to add error catching to the render function of a component. This works fine when I throw an error in the actual render function, but if there are errors in the children of the component, the try does not catch the errors (or they are intercepted by the child component error handlers, I'm not sure?)
Is there anyway to force the errors to the parent.
const SimpleComponent = React.createClass({
render: function(){
try{
throw 'new error'
return <div>{this.props.children}</div>
}catch(e){
console.log('error', e);
}
}
})
The above works
const SimpleComponent = React.createClass({
render: function(){
try{
return <div>{this.props.children}</div>
}catch(e){
console.log('error', e);
}
}
})
const ChildComponent = React.createClass({
render: function(){
throw 'child error'
}
})
<SimpleComponent>
<ChildComponent />
</SimpleComponent>
This above does not catch

Answer 1

Use componentDidCatch() method from react 16.
Check this for more info

Answer 2

You can leverage React's BatchingStrategy API to easily wrap a try/catch around all of your React code. The benefit of this over window.onerror is that you get a nice stack trace in all browsers. Even modern browsers like Microsoft Edge and Safari don't provide stack traces to window.onerror.
Note that this solution won't always prevent React from getting into a bad state. However, this solution will at least allow you to handle the error, for example displaying an error banner/modal, or sending stack trace error logs to your service.
Here's what it looks like with React 15.4:
import ReactUpdates from "react-dom/lib/ReactUpdates";
import ReactDefaultBatchingStrategy from "react-dom/lib/ReactDefaultBatchingStrategy";
let isHandlingError = false;
const ReactTryCatchBatchingStrategy = {
// this is part of the BatchingStrategy API. simply pass along
// what the default batching strategy would do.
get isBatchingUpdates () { return ReactDefaultBatchingStrategy.isBatchingUpdates; },
batchedUpdates (...args) {
try {
ReactDefaultBatchingStrategy.batchedUpdates(...args);
} catch (e) {
if (isHandlingError) {
// our error handling code threw an error. just throw now
throw e;
}
isHandlingError = true;
try {
// replace this with whatever error handling logic you like.
// e.g. dispatch redux action notifying the app that an error occurred:
// `store.dispatch({type: "EXCEPTION", payload: e});`
console.error(e);
} finally {
isHandlingError = false;
}
}
},
};
ReactUpdates.injection.injectBatchingStrategy(ReactTryCatchBatchingStrategy);
Full writeup here: https://engineering.classdojo.com/blog/2016/12/10/catching-react-errors/

Answer 3

I'd recommend the (currently) unstable lifecycle event unstable_handleError in your parent component.
public unstable_handleError(err: any) {
this.setState({
error: err
});
}
The error hook will likely become official API in future releases.
See this issue for details
https://github.com/facebook/react/issues/2461