Skip to content

[SSR + hydrateRoot]: React Refresh doesn't remount the app when an error occurs before the first refresh #926

@ahce

Description

@ahce

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:

  1. Start the server with npm start.
  2. Go to http://localhost:8080/ and wait for the ErrorBoundary message to render.
  3. Comment out this line.
  4. Verify that the app does not recover.

Working Case:

  1. Comment out this line.
  2. Start the server with npm start.
  3. Go to http://localhost:8080/ and wait for the app to hydrate.
  4. Uncomment this line.
  5. Wait for the ErrorBoundary message to render.
  6. Comment out this line.
  7. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions