Gatsby: How to disable React error overlay?

Created on 5 Jan 2020  路  3Comments  路  Source: gatsbyjs/gatsby

I find the react-error-overlay useless because the same info and stack trace is in my console and the error overlay is super slow and blocking browser UI as it loads the stack traces. How do I disable it?

I have tried:
````js
// gatsby-browser.js
import { setConfig } from 'react-hot-loader';

setConfig({ ErrorOverlay: () => null });

window.addEventListener('error', (e) => {
e.stopImmediatePropagation();
e.preventDefault();
});
````

which was supposed to work? but does nothing.

Any thoughts? Thanks!

question or discussion

Most helpful comment

Ok, I have a workable solution now. And it sure makes debugging errors snappier without this overlay. Chrome dev tools was bogging for many seconds parsing the sources lines etc. and totally blocking debugger UI and my OS.

I created a folder in my project react-error-overlay and the index.js file in there exports all the required functions and does nothing:
js module.exports = { setEditorHandler: () => { }, reportBuildError: () => { }, reportRuntimeError: () => { }, dismissBuildError: () => { }, startReportingRuntimeErrors: () => {}, dismissRuntimeErrors: () => { }, stopReportingRuntimeErrors: () => { }, };
and pointed the Gatsby webpack alias plugin there:
js // gatsby-config.js plugins: [ { resolve: 'gatsby-plugin-root-import', options: { src: path.join(__dirname, 'src'), '~': path.join(__dirname), 'react-error-overlay': path.join(__dirname, 'your-project/react-error-overlay'), }, }, ]

After clearing the cache and restarting it took this file instead and now doesn't bog on every error.

All 3 comments

Ok, I have a workable solution now. And it sure makes debugging errors snappier without this overlay. Chrome dev tools was bogging for many seconds parsing the sources lines etc. and totally blocking debugger UI and my OS.

I created a folder in my project react-error-overlay and the index.js file in there exports all the required functions and does nothing:
js module.exports = { setEditorHandler: () => { }, reportBuildError: () => { }, reportRuntimeError: () => { }, dismissBuildError: () => { }, startReportingRuntimeErrors: () => {}, dismissRuntimeErrors: () => { }, stopReportingRuntimeErrors: () => { }, };
and pointed the Gatsby webpack alias plugin there:
js // gatsby-config.js plugins: [ { resolve: 'gatsby-plugin-root-import', options: { src: path.join(__dirname, 'src'), '~': path.join(__dirname), 'react-error-overlay': path.join(__dirname, 'your-project/react-error-overlay'), }, }, ]

After clearing the cache and restarting it took this file instead and now doesn't bog on every error.

@nolandg that's helpful although hot reloading stops working when there is an error detected 馃槩

馃憣 I had to remove eslint-loader from webpack config

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  // prevent gatsby build failing on eslint errors
  const defaultConfig = getConfig();
  defaultConfig.module.rules = defaultConfig.module.rules.filter(
    rule => rule.loader !== 'eslint-loader'
  );
  actions.replaceWebpackConfig(defaultConfig);
}
Was this page helpful?
0 / 5 - 0 ratings