[Fizz] Run console.createTask during SSR when available (#30142)
Same as #30140 but for Fizz. This is rarely used but it does allow seeing component stacks when inspecting the Node.js server running Fizz using `--inspect` and the Chrome DevTools. <img width="504" alt="Screenshot 2024-06-29 at 4 08 22 PM" src="https://github.com/facebook/react/assets/63648/f89bdf89-2598-42b4-8623-3b87f03326c4">
Sebastian Markbåge committed
Jul 1, 2024 at 09:50 UTC
e6783e7cc94bceb5bba92b79ff71f44f630e1c00
2 files changed
+41
-2
fixtures/flight/package.json
+2
-2
@@ -70,8 +70,8 @@
70
"predev": "cp -r ../../build/oss-experimental/* ./node_modules/",
71
"prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/",
72
"dev": "concurrently \"npm run dev:region\" \"npm run dev:global\"",
73
- "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 --inspect server/region",
73
+ "dev:global": "NODE_ENV=development BUILD_PATH=dist node --experimental-loader ./loader/global.js --inspect=127.0.0.1:9230 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 --inspect=127.0.0.1:9229 server/region",
75
"start": "node scripts/build.js && concurrently \"npm run start:region\" \"npm run start:global\"",
76
"start:global": "NODE_ENV=production node --experimental-loader ./loader/global.js server/global",
77
"start:region": "NODE_ENV=production node --experimental-loader ./loader/region.js --conditions=react-server server/region",
packages/react-server/src/ReactFizzServer.js
+39
@@ -150,6 +150,7 @@ import {
150
disableDefaultPropsExceptForClasses,
151
enableAsyncIterableChildren,
152
disableStringRefs,
153
+ enableOwnerStacks,
154
} from 'shared/ReactFeatureFlags';
155
156
import assign from 'shared/assign';
@@ -2372,6 +2373,27 @@ function renderNodeDestructive(
2373
key == null ? (childIndex === -1 ? 0 : childIndex) : key;
2374
const keyPath = [task.keyPath, name, keyOrIndex];
2375
if (task.replay !== null) {
2376
+ if (__DEV__ && enableOwnerStacks) {
2377
+ const debugTask: null | ConsoleTask = element._debugTask;
2378
+ if (debugTask) {
2379
+ debugTask.run(
2380
+ replayElement.bind(
2381
+ null,
2382
+ request,
2383
+ task,
2384
+ keyPath,
2385
+ name,
2386
+ keyOrIndex,
2387
+ childIndex,
2388
+ type,
2389
+ props,
2390
+ ref,
2391
+ task.replay,
2392
+ ),
2393
+ );
2394
+ return;
2395
+ }
2396
+ }
2397
replayElement(
2398
request,
2399
task,
@@ -2388,6 +2410,23 @@ function renderNodeDestructive(
2410
// prelude and skip it during the replay.
2411
} else {
2412
// We're doing a plain render.
2413
+ if (__DEV__ && enableOwnerStacks) {
2414
+ const debugTask: null | ConsoleTask = element._debugTask;
2415
+ if (debugTask) {
2416
+ debugTask.run(
2417
+ renderElement.bind(
2418
+ null,
2419
+ request,
2420
+ task,
2421
+ keyPath,
2422
+ type,
2423
+ props,
2424
+ ref,
2425
+ ),
2426
+ );
2427
+ return;
2428
+ }
2429
+ }
2430
renderElement(request, task, keyPath, type, props, ref);
2431
}
2432
return;