Disable error overlay in development mode

create-react-app

We don't provide an option to disable the error overlay in development. Error boundaries do not take its place (they are meant for production use).

There is no harm having both the development error overlay and your error boundary; simply press Escape if you'd like to view your error boundary.

We feel the error overlay provides tremendous value over your typical error boundary (source code, click to open, etc). It is also vital as we explore enabling hot component reloading as a default behavior for all users.

If you feel strongly about disabling the overlay, you'll need to eject from react-scripts and discontinue use of webpackHotDevClient. A less intrusive method may be removing the error event listener installed by the overlay off of window.

An alternate solution is to add the following CSS style:

iframe
{
    display: none;
}

This prevents the error from showing.

The error overlay can be disabled by using the stopReportingRuntimeErrors helper utility in the react-error-overlay package.

First, install the react-error-overlay package:

yarn add react-error-overlay

Then in index.js — right before mounting the root React component, import the utility and invoke it like this:

import { stopReportingRuntimeErrors } from "react-error-overlay";

if (process.env.NODE_ENV === "development") {
  stopReportingRuntimeErrors(); // disables error overlays
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Error overlays in create-react-app should now be disabled.

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.

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'),

Disable error overlay in development mode

Related

Recent Posts