Skip to content

Commit d40ea87

Browse files
authored
[Flight Server] Run Server Components in console.createTask when available (#30140)
Same as #30142 but for Flight Server. This is rarely used but it does allow seeing component stacks when inspecting the Node.js server running Flight using `--inspect` and the Chrome DevTools. <img width="595" alt="Screenshot 2024-06-29 at 1 08 47 PM" src="https://github.com/facebook/react/assets/63648/7f643e1e-a251-4e4d-b015-22a22a47031d">
1 parent b20d232 commit d40ea87

File tree

2 files changed

+40
-4
lines changed

2 files changed

+40
-4
lines changed

fixtures/flight/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
"prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/",
7272
"dev": "concurrently \"npm run dev:region\" \"npm run dev:global\"",
7373
"dev:global": "NODE_ENV=development BUILD_PATH=dist node --experimental-loader ./loader/global.js server/global",
74-
"dev:region": "NODE_ENV=development BUILD_PATH=dist nodemon --watch src --watch dist -- --enable-source-maps --experimental-loader ./loader/region.js --conditions=react-server server/region",
74+
"dev:region": "NODE_ENV=development BUILD_PATH=dist nodemon --watch src --watch dist -- --enable-source-maps --experimental-loader ./loader/region.js --conditions=react-server --inspect server/region",
7575
"start": "node scripts/build.js && concurrently \"npm run start:region\" \"npm run start:global\"",
7676
"start:global": "NODE_ENV=production node --experimental-loader ./loader/global.js server/global",
7777
"start:region": "NODE_ENV=production node --experimental-loader ./loader/region.js --conditions=react-server server/region",

packages/react-server/src/ReactFlightServer.js

+39-3
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ function getStack(error: Error): string {
168168

169169
function initCallComponentFrame(): string {
170170
// Extract the stack frame of the callComponentInDEV function.
171-
const error = callComponentInDEV(Error, 'react-stack-top-frame', {});
171+
const error = callComponentInDEV(Error, 'react-stack-top-frame', {}, null);
172172
const stack = getStack(error);
173173
const startIdx = stack.startsWith('Error: react-stack-top-frame\n') ? 29 : 0;
174174
const endIdx = stack.indexOf('\n', startIdx);
@@ -991,20 +991,36 @@ function callComponentInDEV<Props, R>(
991991
Component: (p: Props, arg: void) => R,
992992
props: Props,
993993
componentDebugInfo: ReactComponentInfo,
994+
debugTask: null | ConsoleTask,
994995
): R {
995996
// The secondArg is always undefined in Server Components since refs error early.
996997
const secondArg = undefined;
997998
setCurrentOwner(componentDebugInfo);
998999
try {
9991000
if (supportsComponentStorage) {
10001001
// Run the component in an Async Context that tracks the current owner.
1002+
if (enableOwnerStacks && debugTask) {
1003+
return debugTask.run(
1004+
// $FlowFixMe[method-unbinding]
1005+
componentStorage.run.bind(
1006+
componentStorage,
1007+
componentDebugInfo,
1008+
Component,
1009+
props,
1010+
secondArg,
1011+
),
1012+
);
1013+
}
10011014
return componentStorage.run(
10021015
componentDebugInfo,
10031016
Component,
10041017
props,
10051018
secondArg,
10061019
);
10071020
} else {
1021+
if (enableOwnerStacks && debugTask) {
1022+
return debugTask.run(Component.bind(null, props, secondArg));
1023+
}
10081024
return Component(props, secondArg);
10091025
}
10101026
} finally {
@@ -1028,6 +1044,7 @@ function renderFunctionComponent<Props>(
10281044
props: Props,
10291045
owner: null | ReactComponentInfo, // DEV-only
10301046
stack: null | string, // DEV-only
1047+
debugTask: null | ConsoleTask, // DEV-only
10311048
validated: number, // DEV-only
10321049
): ReactJSONValue {
10331050
// Reset the task's thenable state before continuing, so that if a later
@@ -1075,11 +1092,22 @@ function renderFunctionComponent<Props>(
10751092
task.environmentName = componentEnv;
10761093

10771094
if (enableOwnerStacks) {
1078-
warnForMissingKey(request, key, validated, componentDebugInfo);
1095+
warnForMissingKey(
1096+
request,
1097+
key,
1098+
validated,
1099+
componentDebugInfo,
1100+
debugTask,
1101+
);
10791102
}
10801103
}
10811104
prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
1082-
result = callComponentInDEV(Component, props, componentDebugInfo);
1105+
result = callComponentInDEV(
1106+
Component,
1107+
props,
1108+
componentDebugInfo,
1109+
debugTask,
1110+
);
10831111
} else {
10841112
prepareToUseHooksForComponent(prevThenableState, null);
10851113
// The secondArg is always undefined in Server Components since refs error early.
@@ -1235,6 +1263,7 @@ function warnForMissingKey(
12351263
key: null | string,
12361264
validated: number,
12371265
componentDebugInfo: ReactComponentInfo,
1266+
debugTask: null | ConsoleTask,
12381267
): void {
12391268
if (__DEV__) {
12401269
if (validated !== 2) {
@@ -1267,6 +1296,7 @@ function warnForMissingKey(
12671296
},
12681297
null,
12691298
componentDebugInfo,
1299+
debugTask,
12701300
);
12711301
}
12721302
}
@@ -1482,6 +1512,7 @@ function renderElement(
14821512
props: any,
14831513
owner: null | ReactComponentInfo, // DEV only
14841514
stack: null | string, // DEV only
1515+
debugTask: null | ConsoleTask, // DEV only
14851516
validated: number, // DEV only
14861517
): ReactJSONValue {
14871518
if (ref !== null && ref !== undefined) {
@@ -1514,6 +1545,7 @@ function renderElement(
15141545
props,
15151546
owner,
15161547
stack,
1548+
debugTask,
15171549
validated,
15181550
);
15191551
} else if (type === REACT_FRAGMENT_TYPE && key === null) {
@@ -1562,6 +1594,7 @@ function renderElement(
15621594
props,
15631595
owner,
15641596
stack,
1597+
debugTask,
15651598
validated,
15661599
);
15671600
}
@@ -1574,6 +1607,7 @@ function renderElement(
15741607
props,
15751608
owner,
15761609
stack,
1610+
debugTask,
15771611
validated,
15781612
);
15791613
}
@@ -1587,6 +1621,7 @@ function renderElement(
15871621
props,
15881622
owner,
15891623
stack,
1624+
debugTask,
15901625
validated,
15911626
);
15921627
}
@@ -2190,6 +2225,7 @@ function renderModelDestructive(
21902225
? element._debugStack
21912226
: filterDebugStack(element._debugStack)
21922227
: null,
2228+
__DEV__ && enableOwnerStacks ? element._debugTask : null,
21932229
__DEV__ && enableOwnerStacks ? element._store.validated : 0,
21942230
);
21952231
if (

0 commit comments

Comments
 (0)