Accepted answer

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:


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


Error boundary is helpful to display the fallback UI in production. In development, you can still see the error(As mentioned in official react docs, this is intentional). Simply close the cross icon and you can see your fallback UI.

static getDerivedStateFromError updates the state so when the component re-renders the fallback UI will be shown.

componentDidCatch is to log an error.


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.)

Related Query

More Query from same tag