Create React App not showing error message with ErrorBoundary

Question

I\'m learning how to use componentDidCatch(). It looks straight forward. It works, but to still show the complete error stack on view.

In separate files

Answer 1

The full error stack is just an overlay that's shown when you run the application in development mode. It won't get shown in production. (You can close it by clicking the 'X' button in the top-right corner.)

Answer 2

as the document says

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

even when when you use componentDidCatch the error will be logged

checkout this codepin

Answer 3

As per this issue on github,

On page refresh, I see Sorry, an error occurred for, literally, a second then the full error stack displaying to the user.

@DanAbramov has made it clear that

This is intentional. An unexpected error is still an error. (We don’t recommend using error boundaries for expected errors or control flow.)

Error boundaries are primarily useful for production, but in development we want to make errors as highly visible as possible.

Also The error visible is just an overlay and your ErrorBoundary message gets hidden behind the Error overlay

To check if the Error is actually present, you can inspect element and delete the overlay from DOM, and you would be able to see the error message

Check this CodeSandbox: