Skip to content

Commit 3d14fcf

Browse files
authored
[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](https://github.com/ChromeDevTools/devtools-frontend/blob/eb970fbc6482f281b95bbec1c33c1c539f6d50f0/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.
1 parent edac0dd commit 3d14fcf

File tree

4 files changed

+9
-9
lines changed

4 files changed

+9
-9
lines changed

packages/react-client/src/ReactFlightClient.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3154,15 +3154,15 @@ function createFakeFunction<T>(
31543154
}
31553155

31563156
if (sourceMap) {
3157-
// We use the prefix rsc://React/ to separate these from other files listed in
3157+
// We use the prefix about://React/ to separate these from other files listed in
31583158
// the Chrome DevTools. We need a "host name" and not just a protocol because
31593159
// otherwise the group name becomes the root folder. Ideally we don't want to
31603160
// show these at all but there's two reasons to assign a fake URL.
31613161
// 1) A printed stack trace string needs a unique URL to be able to source map it.
31623162
// 2) If source maps are disabled or fails, you should at least be able to tell
31633163
// which file it was.
31643164
code +=
3165-
'\n//# sourceURL=rsc://React/' +
3165+
'\n//# sourceURL=about://React/' +
31663166
encodeURIComponent(environmentName) +
31673167
'/' +
31683168
encodeURI(filename) +

packages/react-client/src/ReactFlightReplyClient.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1095,15 +1095,15 @@ function createFakeServerFunction<A: Iterable<any>, T>(
10951095
}
10961096

10971097
if (sourceMap) {
1098-
// We use the prefix rsc://React/ to separate these from other files listed in
1098+
// We use the prefix about://React/ to separate these from other files listed in
10991099
// the Chrome DevTools. We need a "host name" and not just a protocol because
11001100
// otherwise the group name becomes the root folder. Ideally we don't want to
11011101
// show these at all but there's two reasons to assign a fake URL.
11021102
// 1) A printed stack trace string needs a unique URL to be able to source map it.
11031103
// 2) If source maps are disabled or fails, you should at least be able to tell
11041104
// which file it was.
11051105
code +=
1106-
'\n//# sourceURL=rsc://React/' +
1106+
'\n//# sourceURL=about://React/' +
11071107
encodeURIComponent(environmentName) +
11081108
'/' +
11091109
encodeURI(filename) +

packages/react-client/src/__tests__/ReactFlight-test.js

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

packages/react-server/src/ReactFlightServer.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,12 +179,12 @@ function defaultFilterStackFrame(
179179
}
180180

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

0 commit comments

Comments
 (0)