Skip to content

Commit 9f4e461

Browse files
authored
fix: add Error prefix to Error objects names (#30969)
This fixes printing Error objects in Chrome DevTools. I've observed that Chrome DevTools is not source mapping and linkifying URLs, when was running this on larger apps. Chrome DevTools talks to V8 via Chrome DevTools protocol, every object has a corresponding [`RemoteObject`](https://chromedevtools.github.io/devtools-protocol/tot/Runtime/#type-RemoteObject). When Chrome DevTools sees that Error object is printed in the console, it will try to prettify it. `description` field of the corresponding `RemoteObject` for the `Error` JavaScript object is a combination of `Error` `name`, `message`, `stack` fields. This is not just a raw `stack` field, so our prefix for this field just doesn't work. [V8 is actually filtering out first line of the `stack` field, it only keeps the stack frames as a string, and then this gets prefixed by `name` and `message` fields, if they are available](https://source.chromium.org/chromium/chromium/src/+/main:v8/src/inspector/value-mirror.cc;l=252-311;drc=bdc48d1b1312cc40c00282efb1c9c5f41dcdca9a?fbclid=IwZXh0bgNhZW0CMTEAAR1tMm5YC4jqowObad1qXFT98X4RO76CMkCGNSxZ8rVsg6k2RrdvkVFL0i4_aem_e2fRrqotKdkYIeWlJnk0RA). As an illustration, this: ``` const fakeError = new Error(''); fakeError.name = 'Stack'; fakeError.stack = 'Error Stack:' + stack; ``` will be formatted by `V8` as this `RemoteObject`: ``` { ... description: 'Stack: ...', ... } ``` Notice that there is no `Error` prefix, that was previously added. Because of this, [Chrome DevTools won't even try to symbolicate the stack](https://github.com/ChromeDevTools/devtools-frontend/blob/ee4729d2ccdf5c6715ee40e6697f5464829e3f9a/front_end/panels/console/ErrorStackParser.ts#L33-L35), because it doesn't have such prefix.
1 parent f2df569 commit 9f4e461

File tree

1 file changed

+13
-3
lines changed
  • packages/react-devtools-shared/src/backend

1 file changed

+13
-3
lines changed

packages/react-devtools-shared/src/backend/console.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -229,9 +229,19 @@ export function patch({
229229
// In Chromium, only the stack property is printed but in Firefox the <name>:<message>
230230
// gets printed so to make the colon make sense, we name it so we print Stack:
231231
// and similarly Safari leave an expandable slot.
232-
fakeError.name = enableOwnerStacks
233-
? 'Stack'
234-
: 'Component Stack'; // This gets printed
232+
if (__IS_CHROME__ || __IS_EDGE__) {
233+
// Before sending the stack to Chrome DevTools for formatting,
234+
// V8 will reconstruct this according to the template <name>: <message><stack-frames>
235+
// https://source.chromium.org/chromium/chromium/src/+/main:v8/src/inspector/value-mirror.cc;l=252-311;drc=bdc48d1b1312cc40c00282efb1c9c5f41dcdca9a
236+
// It has to start with ^[\w.]*Error\b to trigger stack formatting.
237+
fakeError.name = enableOwnerStacks
238+
? 'Error Stack'
239+
: 'Error Component Stack'; // This gets printed
240+
} else {
241+
fakeError.name = enableOwnerStacks
242+
? 'Stack'
243+
: 'Component Stack'; // This gets printed
244+
}
235245
// In Chromium, the stack property needs to start with ^[\w.]*Error\b to trigger stack
236246
// formatting. Otherwise it is left alone. So we prefix it. Otherwise we just override it
237247
// to our own stack.

0 commit comments

Comments
 (0)