How to disable React error overlay?

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:

// 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!

[nolandg]

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:

module.exports = {
  setEditorHandler: () => { },
  reportBuildError: () => { },
  reportRuntimeError: () => { },
  dismissBuildError: () => { },
  startReportingRuntimeErrors: () => {},
  dismissRuntimeErrors: () => { },
  stopReportingRuntimeErrors: () => { },
};

and pointed the Gatsby webpack alias plugin there:

// 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.

[pedroBruno7]

I think I found a good CSS only solution to disable the error overlay (the modal) on gatsby. This does not work because on gatsby the html is completely different

I added to my global css:

gatsby-fast-refresh {
  display: none !important;
}

body {
  padding: 0 !important;
  overflow: auto !important;
}

For my goal it was perfect. I wanted to not display the error overlay when the error was caught by an Error Boundary. With this CSS solution, the overlay will not appear when the Error Boundary catches the error, but when there is no Error Boundary, the screen goes full white, alerting the developer there is an error