-
Notifications
You must be signed in to change notification settings - Fork 196
Description
I’ve set up a React app with SSR and WHM, using an ErrorBoundary
to handle client-side errors.
I’ve encountered an issue where, if an error that is catchable by the ErrorBoundary
occurs before the first refresh triggered by react-refresh
, the app remains mounted. Even after the error is fixed, the ErrorBoundary
does not update, leaving the app stuck in an error state.
However, if any change is made that triggers a refresh, and the error happens again, the app recovers successfully because it is fully remounted.
I have created this example to reproduce the issue.
Steps to Reproduce
Issue Case:
- Start the server with
npm start
. - Go to
http://localhost:8080/
and wait for theErrorBoundary
message to render. - Comment out this line.
- Verify that the app does not recover.
Working Case:
- Comment out this line.
- Start the server with
npm start
. - Go to
http://localhost:8080/
and wait for the app to hydrate. - Uncomment this line.
- Wait for the
ErrorBoundary
message to render. - Comment out this line.
- Verify that the app recovers successfully.
Expected Behavior
The app should recover properly after an error is handled by the ErrorBoundary
— even before the first refresh. The app should remount successfully after the error is fixed.
Actual Behavior
The app stays stuck if an error occurs before the first refresh. The ErrorBoundary
does not update, leaving the app in a broken state until a manual page reload.