Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable error overlay in development mode

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.

like image 503
Daniel Hildesson Avatar asked Oct 05 '17 15:10

Daniel Hildesson


People also ask

What is overlay in react?

React Overlays is a toolkit for creating functional overlays, tooltips, modals, and dropdowns. It is not a UI framework but is meant to be incorporated into frameworks. To make those integrations possible, React Overlays is style-agnostic and does not come with any CSS.

What kind of error types are not caught by error boundaries?

Error boundaries do not catch errors for: Event handlers (learn more) Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) Server side rendering.


1 Answers

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.

like image 195
Joe Haddad Avatar answered Sep 28 '22 08:09

Joe Haddad