Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make it clearer in error overlay when error boundary has caught an error

See original GitHub issue

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

componentDidCatch, error boundaries

Environment

node -v: 8.9.2
npm -v: 5.5.1
yarn --version (if you use Yarn): 0.17.10
npm ls react-scripts (if you haven’t ejected): 1.0.0
Operating system: Linux
Browser and version (if relevant): Chrome 63

Steps to Reproduce

bootstrap app with create-react-app
create an error boundary
trigger an error in a child of that error boundary

Expected Behavior

I would assume React dealt with the error, and no overlay was necessary.

Actual Behavior

The error overlay is placed on top of the app, like an uncaught error occurred. If I manually remove the error overlay from the DOM (via devtools), the correct UI is rendered below.

Reproducible Demo

https://codesandbox.io/s/jvrwr388wv

Issue Analytics

State:
Created 6 years ago
Reactions:7
Comments:20 (11 by maintainers)

Top GitHub Comments

13reactions

Jakhotiyacommented, Feb 3, 2018

This issue is a Gotcha for people who are new to ErrorBoundaries and are just trying out the concept with create-react-app or on sandbox.io. You end up debugging for an hour before you realize that react-error-overlay is just hiding the boundary and boundary actually worked. @gaearon I would like to work on this issue. How can I help? How would you like to fix it?

7reactions

iMericacommented, Jan 31, 2018

How do we actually test our error boundaries locally when using Create React App? Can we disable the full page debug iframe?

Top Results From Across the Web

Make it clearer in error overlay when error boundary has ...

I'd like to bring this up again. Especially as ErrorBoundaries are increasing in use, having the error-overlay pop up when the error is...

create react app - Disable error overlay in development mode

Open the developerconsole and select the html tag. There you can remove the event listeners on error and unhandlerejection which is put in...

Handling JavaScript errors in React with error boundaries

js have an error overlay component that blocks the UI whenever there is an error, overshadowing your own error boundaries. In create-react-app, ...

Error Boundaries - React

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch() .

Use react-error-boundary to handle errors in React

Oh, one other thing. Right now, you may notice that you'll experience that error overlay even if the error was handled by your...