So recently we launched our first React JS application online. However, when people open the site, then move to a different tab and close their computer, an error message displays when they come back. Here is what they see(not this exact image but the same idea):
Once the user refreshes the page, it works perfectly again...
I'm wondering 2 things:
1) is there a way to hide these errors?
2) is there a good way to refresh the page when/if they appear?
You are using development build. From create-react-app docs (I assume it is create-react-app):
When you’re ready to deploy to production, create a minified bundle with
npm run build.
However uncaught error will cause the whole tree to be unmounted so I suggest to use componentDidCatch hook.
You should create an error boundary one level above the App component and call it something like Wrapper below.
class Wrapper extends React.Component {
componentDidCatch(error, info) {
// Do something useful with error like logging to error reporting system
// then force reload (if that's what you want):
window.location.reload(true);
}
render() {
return (<App/>)
}
}
