You can use higher order components, wrap your root component with a HOC and in that HOC's render method, If there is an error, instead of returning the wrapped component return something else gives information about the error. If you use the higher order components you do not need to change the existing component, just wrap it by some HOC. For reference my favorite article about HOCs medium.com/@franleplant/react-higher-order-compon…
const errorWrapperHOC = function(wrappedComponent) {
return class ErrorHoccedComp extends Component {
render() {
const { error } = this.props; // pass it here somehow.
if (!error) {
return <WrappedComponent {...this.props}/>
}
if (error == '404') {
return <h1>404</h1>
}
if (error == '500') {
return <h1>500</h1>
}
return <h1>unknown error happened.</h1>
}
}
}