Software⏱️ 3 min read📅 2026-06-04

How to Fix: Disable error overlay in development mode

Disable error overlay in React development mode

Quick Answer: Use the `process.env.NODE_ENV` environment variable to conditionally render the error overlay, or use a library like `react-error-boundaries` with a custom overlay component.

📋 Table of Contents

  1. 🔍 Why This Happens
  2. 🛠️ Step-by-Step Verified Fixes
  3. 💡 Conclusion

The error overlay in development mode can be frustrating when using React 16 Error Boundaries. This issue affects developers who want to display custom error messages without the overlay interfering.

Disabling the error overlay is a common request, and it's essential to provide a solution for this problem.

🔍 Why This Happens

  • The error overlay is caused by the React DevTools extension, which provides features like debugging tools and performance monitoring. In development mode, this extension can sometimes conflict with custom error handling.
  • Another possible cause is the use of error boundaries that don't properly handle the overlay. This can lead to unexpected behavior when trying to display custom error messages.

🛠️ Step-by-Step Verified Fixes

Disabling React DevTools

  1. Step 1: To disable React DevTools, open your project's `package.json` file and add the following script: "npm run dev -- --devtool=false". This will tell Create React App to disable the DevTools extension in development mode.
  2. Step 2: Alternatively, you can also configure the React DevTools settings by creating a new file named `.react-devtools-override.js` in your project's root directory and adding the following code: window.__REACT_DEVTOOLS_OVERLAY__ = false;
  3. Step 3: By disabling or overriding the React DevTools extension, you should be able to remove the error overlay when running your application in development mode.

Customizing Error Boundaries

  1. Step 1: To properly handle the error overlay with custom error boundaries, update your `ErrorBoundary` component to include a prop called `overlay` and set it to `false`. This will prevent the error overlay from being displayed when an error occurs.
  2. Step 2: You can also use the `componentDidCatch` method to catch errors and render a custom error message without displaying the overlay. For example: return
    Error occurred!
    ;

💡 Conclusion

By disabling React DevTools or customizing your Error Boundaries, you should be able to remove the error overlay when running your application in development mode. Remember to test your solution thoroughly to ensure it meets your requirements.

Did this fix your problem?

If not, try searching for specific error codes.

🔍 Search Error Database

❓ Frequently Asked Questions

🛠️ Related Fixes

How to Fix: Pc crashes shortly after launching game (rainbow

Fix Pc crashes shortly after launching game (rainbow six siege). Compl

How to Fix: Installing an APK on a locked down phone

Installing an APK on a locked down phone: Try using a rooted device, e

How to Fix: New PC build- no signal and no clue

Fix New PC build- no signal and no clue. Complete troubleshooting guid