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?


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


Which terms did you search for in User Guide?

componentDidCatch, error boundaries


  1. node -v: 8.9.2

  2. npm -v: 5.5.1

  3. yarn --version (if you use Yarn): 0.17.10

  4. npm ls react-scripts (if you haven’t ejected): 1.0.0

  5. Operating system: Linux

  6. Browser and version (if relevant): Chrome 63

Steps to Reproduce

  1. bootstrap app with create-react-app
  2. create an error boundary
  3. 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

Issue Analytics

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

github_iconTop GitHub Comments

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 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?

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?

Read more comments on GitHub >

github_iconTop 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...
Read more >
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...
Read more >
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, ...
Read more >
Error Boundaries - React
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch() .
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Hashnode Post

No results found