Skip to content

How to Disable the Error Overlay in React in Development Mode

Getting rid of react-error-overlay from Create React App

Developing in React, you will inevitably stumble across some runtime errors. When that occurs in a CRA app, the react-error-overlay library will generate a special error page to help developers identify and debug those errors efficiently.

However, there are situations where you need to disable the default error overlay, especially when simulating production conditions or when it interferes with your development workflow.

In this article, you will learn how to disable the React error overlay in development mode.

Create React App: Runtime Error Handling in Development

Every time an uncaught error occurs while working locally on a React project initialized with Create React App, you will see the following error overlay:

An example of a React error overlay
An example of a React error overlay

If you are a React developer, you must be familiar with it. What you may not know is that that view comes from the react-error-overlay library.

That provides useful information about the error, including the stack trace and the source file where the issue occurred. Its goal is to help developers quickly identify and fix issues during development.

So, why should you want to disable it? Let’s find it out!

Why Avoid the React Error Overlay

While the React error overlay is beneficial in most scenarios, there are specific use cases where you may prefer to remove it. Here are a few:

  • Simulating the production environment: When testing your application in a development environment, you might want to hide the error overlay to replicate the behavior of the production environment more accurately.
  • Custom error handling: If you have some error boundary components in place, the default behavior might interfere with your custom error handling logic.
  • Visual distractions: The error overlay can sometimes hinder your development workflow by covering a significant portion of the screen, making it difficult to focus on other areas of the application.

Hide the React Error Overlay

The easiest way to get rid of the React error overlay is to hide it via CSS.

Simulate an error and inspect the HTML element added by react-error-overlay to the page:

The HTML element of the React error overlay
The HTML element of the React error overlay

As you can see, that is nothing more than an <iframe> mounted on the <body>.

To hide the React error overlay in development, add the following CSS rule to a global .css file such as index.css:

body > iframe {
  display: none;
}

Fantastic! You just got rid of react-error-overlay.

Note that you will still be able to see runtime errors in the console:

The stack trace of an error logged in the console
The stack trace of an error logged in the console

Conclusion

In this step-by-step tutorial, you learned how to disable the default error page in React when working in development mode. While the error overlay is a valuable tool for identifying and fixing errors during development, there are instances where you might need to hide it. As shown here, this takes only a single CSS rule.

Thanks for reading! I hope you found this article helpful.

nv-author-image

Antonello Zanini

I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.View Author posts

Want technical content like this in your blog?