107

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:

enter image description here

I'm asking this because im using error boundaries (React 16 Error Boundaries) in my app to display error messages when components crashes, but the error overlay pops up and covers my messages.

Wilson Vargas
  • 2,841
  • 1
  • 19
  • 28
Daniel Hildesson
  • 1,083
  • 2
  • 7
  • 6

17 Answers17

63

An alternate solution is to add the following CSS style:

iframe
{
    display: none;
}

This prevents the error from showing.

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Eithan pitt
  • 841
  • 9
  • 12
52

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.

Razor
  • 27,418
  • 8
  • 53
  • 76
Joe Haddad
  • 1,688
  • 12
  • 11
  • 1
    Really great tip! Now I don't have to fiddle with environment variables to test my error boundaries. – developarvin Mar 05 '18 at 06:42
  • 30
    FWIW pressing "escape" does nothing for me, as does clicking the "x" in the top right corner. I didn't know this was even a thing you could do until I saw this post, but then found it didn't work. Trying to test Error Boundaries has been incredibly frustrating because of this overlay behavior, so I'm not sure the current implementation is the best solution. – rhodesjason Mar 11 '18 at 22:31
  • That sounds like a bug! Can you please file an issue on the create-react-app info and we can look into it more? – Joe Haddad Mar 12 '18 at 18:18
  • 1
    Only now I noticed this tiny "x" in the top-right corner and realized this screen is actually a kind of a modal window, not a standalone page. I am absolutely sure you have to make this more visible. Probably even add some explanation of how this window can be closed to reveal the failed component underneath it. – Neurotransmitter Nov 21 '18 at 10:14
  • 35
    If you are maintainer, please add an option to hide this overlay, it is really annoying. Every time it appear I need to close it or refresh browser page to continue my work. It did not provide any helpful information, because I need to debug this code, and I use browser console stack trace to find error line of code. – degr Sep 04 '19 at 12:27
  • It is not clear from the overlay whether or not the error was indeed caught. An option to hide caught errors but show uncaught ones so we can experience the app as it will appear in production while using console to do our own error reporting, or changing the appearance of the overlay when the error was caught by a boundary so it's not identical to the uncaught overlay, would be more natural. – Omniscience Oct 27 '19 at 13:43
  • 9
    @JoeHaddad `A less intrusive method may be removing the error event listener installed by the overlay off of window` Could you show how, please (code example)? Thank you! – tonix Oct 30 '19 at 19:48
  • 31
    It's nice that you feel the overlay provides tremendous value, but I don't see what the harm is in allowing people to disable it. Pointless feature for me. – Overcode Jan 27 '20 at 20:59
  • 1
    Not all browsers will have the error boundary component under the overlay, i.e. pressing `Escape` in firefox won't help. – Nikolay Shebanov Apr 06 '20 at 15:00
  • 4
    I don't think this overlay provides any value. I would love to disable it forever. First of all - it's bloody slow! – Onkeltem May 24 '20 at 20:42
  • 31
    When developing error boundary components and styling/testing how they look, this is an extremely annoying feature. It slows down development and adds no value. You should allow developers to decide whether they want this feature turned on or not. – Chris Haines Jun 08 '20 at 10:47
  • 4
    Personally I just want to disable it because it takes longer to load vs. an empty page, and I can see all the error details I need in the console. I can literally see the info I need to see faster ... if Chrome isn't too busy trying to load HTML I don't need. – machineghost Jun 18 '20 at 00:49
  • 1
    I've posted an answer below which leverages `stopReportingRuntimeErrors` function from the react-error-overlay package to disable the error overlay. – hzhu Jul 12 '20 at 04:54
  • Also, is there a way to enable it in production? – John Jul 15 '20 at 10:02
  • 2
    This had me spend way too much time testing my ErrorBoundary. I agree that the overlay-nature of this screen should be emphasized so people don't start chasing 'Uncaught Errors' that have been in fact caught. – Adam Hosman Oct 12 '20 at 08:54
  • Downvoted because it's that classic stack overflow/github response of "well we think it's great so be quiet child!" - I'm only using CRA because of the codebase I've inherited, frankly it's a continuous hindrance. – Matt Fletcher May 11 '21 at 16:13
  • This is one of the many reasons I find React and JS frameworks extremely annoying. Their development and production processes differ greatly. Do this in dev, but don't do it that way for prod, use this other build for prod, but only use these config params... ugh. When I'm building something I want to see it how my end users are going to see it without having to jump through hoops. – Matt K May 11 '21 at 20:16
  • We have error messages that are sometimes very large and it produces 100% CPU and freezes my computer because of what I think is a regex that is run on the react-error-overlay...I need to disable it but currently the stopReportingRuntimeErrors solution has this bug https://github.com/facebook/create-react-app/issues/10611 – Colin D May 18 '21 at 01:12
  • 1
    Super annoying, why can't we just disable it? I don't need an error overlay screaming at me, I can clearly read the `console` for any info I need. The overlay should be Opt-In – TetraDev Jun 01 '21 at 20:15
  • Please disable it, or at least provide a clear and EASY way of exiting (no coding, additional plugins, modules, etc to be set up!). Also, it seems that my code runs fine (the website builds fine in the background), so what kind of errors are these, anyway? They are not picked up by my IDE? – CMorgan Jul 05 '21 at 14:02
  • 2
    When we use exceptions to handle API errors such as 404 or 500, the overlay doesn't bring any "tremendous value"... – vcarel Aug 16 '21 at 17:11
  • Is there a way to hide this on certain errors ? It interrupt my user registration processe in development – Dimitri Kopriwa Dec 14 '21 at 10:19
  • Let errors go please, so I can debug them. The error page almost completely breaks my project. It just appears to lock up if an error occurs. I hate react-error-overlay very much. – doug65536 Aug 26 '22 at 12:14
  • this interferes with our selenium tests. it's impractical to run a production build every time we need to run a test/debug cycle – KeatsKelleher May 29 '23 at 14:28
13

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.

hzhu
  • 3,759
  • 5
  • 29
  • 39
  • 8
    This doesn't seem to work. I get a blank screen and and errors in the console `Uncaught Error: Not currently listening` and `index.js:1 Uncaught Error: Expected options to be injected.` – SColvin Nov 26 '20 at 18:40
12

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.

oguz ismail
  • 1
  • 16
  • 47
  • 69
Omry Nachman
  • 232
  • 3
  • 4
  • 5
    Doesn't seem to work as of today. I get the following error if I use `e.stopImmediatePropagation();`: `Uncaught Error: An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the "Pause on exceptions" behavior of the DevTools, which requires some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue.` – tonix Oct 29 '19 at 19:25
10

for some reason the overlay popped up for me only now while upgrading to Webpack 5. In any case, you can now cancel the overlay by adding in your webpack.config.js:

module.exports = {
  //...
  devServer: {
    client: {
      overlay: false,
    },
  },
};

Or through the CLI: npx webpack serve --no-client-overlay

Taken from here: https://webpack.js.org/configuration/dev-server/#overlay

Adam
  • 101
  • 1
  • 2
9

To solve this issue, you could use CSS:

body > iframe {
  display: none;
}
GavinBelson
  • 2,514
  • 25
  • 36
feralamillo
  • 819
  • 8
  • 10
4

To avoid bundling in this large dev library in prod you can use a dynamic import:

yarn add react-error-overlay
if (process.env.NODE_ENV === 'development') {
  import('react-error-overlay').then(m => {
    m.stopReportingRuntimeErrors();
  });
}
Dominic
  • 62,658
  • 20
  • 139
  • 163
4

If you are using the latest version with react-script >= 5.0.0, you just need to add an environment variable ESLINT_NO_DEV_ERRORS=true. https://create-react-app.dev/docs/advanced-configuration

Micael Mota
  • 433
  • 3
  • 7
3

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'),
ings0c
  • 172
  • 7
3

So this overlay is an iframe which is added over your error boundary's fallback component. You can anyway do his by hiding it completely like-

iframe#webpack-dev-server-client-overlay {
  display: none;
}

Check id which iframe is using

karan bhatia
  • 434
  • 1
  • 6
  • 20
2

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.

JimTheDev
  • 3,469
  • 1
  • 23
  • 26
2

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,
β.εηοιτ.βε
  • 33,893
  • 13
  • 69
  • 83
MrChe
  • 25
  • 4
2

hide it with adblock

It is very useful to disable the errors temporarily so you don't have to comment/uncomment parts of your code that is not used at the moment, but it definitely will be after a few more changes.

The quickest solution is to just use adblock to pick the iframe with the errors.

It is trivial to toggle it with a single click to enable / disable adblock on the given page.

It is counter-intuitive to overlay the rendered page in development mode just to inform the user the newly imported objects or the recenlty created variables are not yet used.

I would say it is an arrow to the knee for beginners :)

Szabolcs Dombi
  • 5,493
  • 3
  • 39
  • 71
1

There is no option for it.

But, if you strongly wanted to disable modal window, just comment out this line

https://github.com/facebook/create-react-app/blob/26f701fd60cece427d0e6c5a0ae98a5c79993640/packages/react-dev-utils/webpackHotDevClient.js#L173

ColCh
  • 3,016
  • 3
  • 20
  • 20
0

I had the same problem and I have been digging in the create-react-app source for a long time. I can't find any way to disable it, but you can remove the listeners it puts in place, which effectivly stops the error message. Open the developerconsole and select the html tag. There you can remove the event listeners on error and unhandlerejection which is put in place by unhandledError.js. You can also close the error message by clicking the x in the upper right corner of the screen, and then you should see your message.

Jani
  • 67
  • 6
  • 1
    Clicking the x in the upper right corner of the screen should be good enough indeed. You'll probably be working just a few hours on the Error boundary and view anyway. So, it isn't worth the time to actually find out how to disable the overlay. Just click the X – Christiaan Westerbeek Oct 31 '18 at 10:23
0

Gathering answers here together, I managed to solve this issue for myself.

Here is the package I created for this.

jeron-diovis
  • 788
  • 1
  • 8
  • 19
0

The css fix has changed:

body > hmr-error-overlay {
  display: none;
}

I'll also recommend adding this block on init so that you don't get silent errors:


window.addEventListener('error', function (e) {
  console.error(e.message);
  // prevent React's listener from firing
  e.stopImmediatePropagation();
  // prevent the browser's console error message
  e.preventDefault();
});
Black Mamba
  • 13,632
  • 6
  • 82
  • 105