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!
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);
}
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-overlayand theindex.jsfile 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.