If you are using react-router you can use Miss components to handle routes that have no handlers defined. This is the equivalent of 404 error pages in traditional web applications.

A 500 error page will be encountered only if your backend API returns an error. If the user can continue do other things while some service call has failed you can just show an error notification and/or disable certain aspects of your site. For example if a stock ticker fails to update it should be greyed out to indicate that the data is stale.

However, if the error is severe and there is nothing to be done by the user anymore - and no way to gracefully recover from the flow, user should be redirected to a static 500 error page. This page can also be reused by your reverse proxy (eg nginx) when the application server itself is down.

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>
        }
    }
}