Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modernize React error overlay #10082

Merged
merged 11 commits into from
Feb 2, 2025
Merged

Modernize React error overlay #10082

merged 11 commits into from
Feb 2, 2025

Conversation

devongovett
Copy link
Member

This forks the react-error-overlay project originally created for Create React App and modernizes it. Also implements a dev server endpoint to get sourcemaps by bundle or asset URL, needed for RSC debugging. With this, it's possible to display source mapped errors from the server in the browser.

image

Changes to react-error-overlay

  • Updated to React 19
  • Rendered in a shadow DOM dialog element rather than an iframe
  • Source map parsing moved out of the client into a dev server API. The stack gets sent to the server, the server uses the native source map library to find the original locations and generate code frames, which are then sent back to the browser and displayed. This should improve performance.
  • Handled react console errors and added component stacks, and improved rendering for hydration errors.

@devongovett devongovett merged commit 2e67b94 into v2 Feb 2, 2025
17 checks passed
@devongovett devongovett deleted the error-overlay branch February 2, 2025 23:53
@devongovett devongovett mentioned this pull request Feb 3, 2025
Merged
sebmarkbage pushed a commit to facebook/react that referenced this pull request Feb 4, 2025
@devongovett
[Flight Parcel] Implement findSourceMapURL (#32294)
f82c662 
This implements `findSourceMapURL` in react-server-dom-parcel, enabling
source maps for replayed server errors on the client. It utilizes a new
endpoint in the Parcel dev server that returns the source map for a
given bundle/file. The error overlay UI has also been updated to handle
these stacks. See parcel-bundler/parcel#10082

Also updated the fixture to the latest Parcel canary. A few APIs have
changed. We do have a higher level library wrapper now (`@parcel/rsc`
added in parcel-bundler/parcel#10074) but I left
the fixture using the lower level APIs directly here since it is easier
to see how react-server-dom-parcel is used.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@devongovett