[Flight] Use about: protocol instead of rsc: protocol for fake evals (#33977)

Chrome DevTools Extensions has a silly problem where they block access
to load Resources from all protocols except [an allow
list](eb970fbc64/front_end/models/extensions/ExtensionServer.ts (L60)).

https://issues.chromium.org/issues/416196401

Even though these are `eval()` and not actually loaded from the network
they're blocked. They can really be any string. We just have to pick one
of:

```js
'http:', 'https:', 'file:', 'data:', 'chrome-extension:', 'about:'
```

That way React DevTools extensions can load this content to source map
them.

Webpack has the same issue with its `webpack://` and
`webpack-internal://` urls.
This commit is contained in:
Sebastian Markbåge 2025-07-24 11:07:11 -04:00 committed by GitHub
parent edac0dded9
commit 3d14fcf03f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 9 deletions

View File

@ -3154,7 +3154,7 @@ function createFakeFunction<T>(
}
if (sourceMap) {
// We use the prefix rsc://React/ to separate these from other files listed in
// We use the prefix about://React/ to separate these from other files listed in
// the Chrome DevTools. We need a "host name" and not just a protocol because
// otherwise the group name becomes the root folder. Ideally we don't want to
// show these at all but there's two reasons to assign a fake URL.
@ -3162,7 +3162,7 @@ function createFakeFunction<T>(
// 2) If source maps are disabled or fails, you should at least be able to tell
// which file it was.
code +=
'\n//# sourceURL=rsc://React/' +
'\n//# sourceURL=about://React/' +
encodeURIComponent(environmentName) +
'/' +
encodeURI(filename) +

View File

@ -1095,7 +1095,7 @@ function createFakeServerFunction<A: Iterable<any>, T>(
}
if (sourceMap) {
// We use the prefix rsc://React/ to separate these from other files listed in
// We use the prefix about://React/ to separate these from other files listed in
// the Chrome DevTools. We need a "host name" and not just a protocol because
// otherwise the group name becomes the root folder. Ideally we don't want to
// show these at all but there's two reasons to assign a fake URL.
@ -1103,7 +1103,7 @@ function createFakeServerFunction<A: Iterable<any>, T>(
// 2) If source maps are disabled or fails, you should at least be able to tell
// which file it was.
code +=
'\n//# sourceURL=rsc://React/' +
'\n//# sourceURL=about://React/' +
encodeURIComponent(environmentName) +
'/' +
encodeURI(filename) +

View File

@ -1314,7 +1314,7 @@ describe('ReactFlight', () => {
' at async file:///testing.js:42:3',
// third-party RSC frame
// Ideally this would be a real frame produced by React not a mocked one.
' at ThirdParty (rsc://React/ThirdParty/file:///code/%5Broot%2520of%2520the%2520server%5D.js?42:1:1)',
' at ThirdParty (about://React/ThirdParty/file:///code/%5Broot%2520of%2520the%2520server%5D.js?42:1:1)',
// We'll later filter this out based on line/column in `filterStackFrame`.
' at ThirdPartyModule (file:///file-with-index-source-map.js:52656:16374)',
// host component in parent stack
@ -3073,7 +3073,7 @@ describe('ReactFlight', () => {
ReactNoopFlightClient.read(transport, {
findSourceMapURL(url) {
// By giving a source map url we're saying that we can't use the original
// file as the sourceURL, which gives stack traces a rsc://React/ prefix.
// file as the sourceURL, which gives stack traces a about://React/ prefix.
return 'source-map://' + url;
},
}),
@ -3147,7 +3147,7 @@ describe('ReactFlight', () => {
expectedErrorStack={expectedErrorStack}>
{ReactNoopFlightClient.read(transport, {
findSourceMapURL(url, environmentName) {
if (url.startsWith('rsc://React/')) {
if (url.startsWith('about://React/')) {
// We don't expect to see any React prefixed URLs here.
sawReactPrefix = true;
}

View File

@ -179,12 +179,12 @@ function defaultFilterStackFrame(
}
function devirtualizeURL(url: string): string {
if (url.startsWith('rsc://React/')) {
if (url.startsWith('about://React/')) {
// This callsite is a virtual fake callsite that came from another Flight client.
// We need to reverse it back into the original location by stripping its prefix
// and suffix. We don't need the environment name because it's available on the
// parent object that will contain the stack.
const envIdx = url.indexOf('/', 'rsc://React/'.length);
const envIdx = url.indexOf('/', 'about://React/'.length);
const suffixIdx = url.lastIndexOf('?');
if (envIdx > -1 && suffixIdx > -1) {
return decodeURI(url.slice(envIdx + 1, suffixIdx));