React JS，停止生产中显示的错误

Question

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?

Answer 1

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.

Answer 2

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