Disable error overlay in development mode

前端未结

关注

 11  955

长情又很酷

Is there a way to disable the error overlay when running a create-react-app in development mode?

This is the overlay I\'m talking about:

I\'m askin

相关标签:

11条回答

情话喂你

2020-11-30 08:47

In the file webpack.config.js, comment the line:

 // require.resolve('react-dev-utils/webpackHotDevClient'),

And uncomment:

require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),

In the file webpackDevServer.config.js, comment:

// transportMode: 'ws',
// injectClient: false,

0 讨论(0)

深忆病人

2020-11-30 08:49

You can suppress React's error event handling by capturing the event first. for example, by placing in public/index.html's <head>:

<script>
      window.addEventListener('error', function(e){
        // prevent React's listener from firing
        e.stopImmediatePropagation();
        // prevent the browser's console error message 
        e.preventDefault();
      });
</script>

Since you probably still want React's error overlay for errors outside the error boundary, consider this option:

<script>
      window.addEventListener('error', function(e){
        const {error} = e;
        if (!error.captured) {
          error.captured = true;
          e.stopImmediatePropagation();
          e.preventDefault();
          // Revisit this error after the error boundary element processed it 
          setTimeout(()=>{
            // can be set by the error boundary error handler
            if (!error.shouldIgnore) {
              // but if it wasn't caught by a boundary, release it back to the wild
              throw error;
            }
          })
        }
      });
</script>

assuming your error boundary does something like:

    static getDerivedStateFromError(error) {
        error['shouldIgnore'] = true;
        return { error };
    }

The result is a behaviour that follows try...catch line of reasoning.

0 讨论(0)

名媛妹妹

2020-11-30 08:55
In config/webpack.config.dev.js, comment out the following line in the entry array
```
require.resolve('react-dev-utils/webpackHotDevClient'),
```
And uncomment these two:
```
require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
没有蜡笔的小新

2020-11-30 08:55

I think this makes sense but sometimes when you are typing and have an error boundary then the overlay pops up with each character stroke and is annoying. I can remove the handler I suppose.

0 讨论(0)
发布评论:

提交评论
- 加载中...
南方客

2020-11-30 08:57
An alternate solution is to add the following CSS style:
```
iframe
{
    display: none;
}
```
This prevents the error from showing.
0 讨论(0)
发布评论:

提交评论
- 加载中...

庸人自扰

2020-11-30 08:57

To avoid bundling in this large dev library disable with a dynamic import:

yarn add react-error-overlay

if (process.env.NODE_ENV === 'development') {
  import('react-error-overlay').then(m => {
    m.stopReportingRuntimeErrors();
  });
}

0 讨论(0)

1 2 下一页