Add React error overlay and HMR source maps #8034
Conversation
| codeframe: string, | ||
| /** A list of code frames with highlighted code and file locations separately. */ | ||
| frames: Array<FormattedCodeFrame>, |
There was a problem hiding this comment.
A bit unfortunate, but couldn't think of a better way...
There was a problem hiding this comment.
You could make codeframe a getter that processes frames in the default manner so there's less duplication. Beyond disgusting regex I don't think there's any other way to support rewriting paths than saving the frames array.
| if (sourcemap) { | ||
| let sourcemapStringified = await sourcemap.stringify({ | ||
| format: 'inline', | ||
| sourceRoot: '/__parcel_source_root/', |
There was a problem hiding this comment.
Somewhat related, but this source root seems to be displayed by react-error-overlay rather than either the original file path, or nothing. Not sure if there is a way to improve that?
|
Yes, this should help manifest V3 hot reload. As long as the HMR server is on some kind of localhost domain, dynamic script loading should work fine via a similar CSP patching technique to MV2. I'll look into it more after this is merged. |
Benchmark ResultsKitchen Sink 🚨
Timings
Cold BundlesNo bundles found, this is probably a failed build... Cached BundlesNo bundles found, this is probably a failed build... React HackerNews ✅
Timings
Cold BundlesNo bundle changes detected. Cached Bundles
AtlasKit Editor ✅
Timings
Cold Bundles
Cached Bundles
Three.js ✅
Timings
Cold BundlesNo bundle changes detected. Cached BundlesNo bundle changes detected. |
It relies on regeneratorRuntime which isn't always defined, and SWC will compile the runtime anyway
|
The logic here for the dev server is a bit problematic for web extensions since it depends on I'll try to do this at some point. |
Closes #7604. Closes #643. Closes #5316.
This adds an overlay that appears when there is a runtime error in a React app, using the react-error-overlay package from Create React App. It is implemented as part of
@parcel/runtime-react-refreshsince it is React-specific, and that seemed like the easiest place to put it. It will appear when a runtime error occurs, and is automatically dismissed when an HMR update comes in.This required support for source maps in HMR, which has been a longstanding issue due to our use of
new Function, which has poor support for source maps. Now, we useevalinstead, which has better support in Chrome and Firefox. However, Safari still doesn't supportsourceMappingURLorsourceURLinevalerror stack traces, so we detect this case and fall back to loading the asset from a new dev server endpoint that serves asset contents by id.As a side benefit, HMR should now fall back to loading URLs for changed assets via HTTP if
evalis not allowed, e.g. with a strict CSP. This may help web extension v3 support, though I have not tested this. (cc. @101arrowz)The error overlay also supports clicking the code frame to open it directly in your editor, which I also added to the standard parcel build error overlay and the error 500 page. This is implemented through a second new dev server endpoint which auto-detects which editor you're using, and opens it to the line and column of the error message.
Finally, the error 500 page has been improved to automatically reload when an HMR update comes in so you don't need to manually do that.