Skip to content

Commit f72fad0

Browse files
committed
[Flight] Emit debug info for a Server Component (#28272)
This adds a new DEV-only row type `D` for DebugInfo. If we see this in prod, that's an error. It can contain extra debug information about the Server Components (or Promises) that were compiled away during the server render. It's DEV-only since this can contain sensitive information (similar to errors) and since it'll be a lot of data, but it's worth using the same stream for simplicity rather than a side-channel. In this first pass it's just the Server Component's name but I'll keep adding more debug info to the stream, and it won't always just be a Server Component's stack frame. Each row can get more debug rows data streaming in as it resolves and renders multiple server components in a row. The data structure is just a side-channel and it would be perfectly fine to ignore the D rows and it would behave the same as prod. With this data structure though the data is associated with the row ID / chunk, so you can't have inline meta data. This means that an inline Server Component that doesn't get an ID otherwise will need to be outlined. The way I outline Server Components is using a direct reference where it's synchronous though so on the client side it behaves the same (i.e. there's no lazy wrapper in this case). In most cases the `_debugInfo` is on the Promises that we yield and we also expose this on the `React.Lazy` wrappers. In the case where it's a synchronous render it might attach this data to Elements or Arrays (fragments) too. In a future PR I'll wire this information up with Fiber to stash it in the Fiber data structures so that DevTools can pick it up. This property and the information in it is not limited to Server Components. The name of the property that we look for probably shouldn't be `_debugInfo` since it's semi-public. Should consider the name we use for that. If it's a synchronous render that returns a string or number (text node) then we don't have anywhere to attach them to. We could add a `React.Lazy` wrapper for those but I chose to prioritize keeping the data structure untouched. Can be useful if you use Server Components to render data instead of React Nodes. DiffTrain build for commit b229f54.
1 parent 734b023 commit f72fad0

File tree

9 files changed

+40
-12
lines changed

9 files changed

+40
-12
lines changed

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25670,7 +25670,7 @@ if (__DEV__) {
2567025670
return root;
2567125671
}
2567225672

25673-
var ReactVersion = "18.3.0-canary-37d901e2b-20240207";
25673+
var ReactVersion = "18.3.0-canary-b229f540e-20240208";
2567425674

2567525675
// Might add PROFILE later.
2567625676

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -9152,7 +9152,7 @@ var devToolsConfig$jscomp$inline_1011 = {
91529152
throw Error("TestRenderer does not support findFiberByHostInstance()");
91539153
},
91549154
bundleType: 0,
9155-
version: "18.3.0-canary-37d901e2b-20240207",
9155+
version: "18.3.0-canary-b229f540e-20240208",
91569156
rendererPackageName: "react-test-renderer"
91579157
};
91589158
var internals$jscomp$inline_1189 = {
@@ -9183,7 +9183,7 @@ var internals$jscomp$inline_1189 = {
91839183
scheduleRoot: null,
91849184
setRefreshHandler: null,
91859185
getCurrentFiber: null,
9186-
reconcilerVersion: "18.3.0-canary-37d901e2b-20240207"
9186+
reconcilerVersion: "18.3.0-canary-b229f540e-20240208"
91879187
};
91889188
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
91899189
var hook$jscomp$inline_1190 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -9580,7 +9580,7 @@ var devToolsConfig$jscomp$inline_1053 = {
95809580
throw Error("TestRenderer does not support findFiberByHostInstance()");
95819581
},
95829582
bundleType: 0,
9583-
version: "18.3.0-canary-37d901e2b-20240207",
9583+
version: "18.3.0-canary-b229f540e-20240208",
95849584
rendererPackageName: "react-test-renderer"
95859585
};
95869586
var internals$jscomp$inline_1230 = {
@@ -9611,7 +9611,7 @@ var internals$jscomp$inline_1230 = {
96119611
scheduleRoot: null,
96129612
setRefreshHandler: null,
96139613
getCurrentFiber: null,
9614-
reconcilerVersion: "18.3.0-canary-37d901e2b-20240207"
9614+
reconcilerVersion: "18.3.0-canary-b229f540e-20240208"
96159615
};
96169616
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
96179617
var hook$jscomp$inline_1231 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXDEVRuntime-dev.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<bf2ebc94d9d8c1c3351e8a3483385df7>>
10+
* @generated SignedSource<<b469953f97ee3dddb995beaf72431eac>>
1111
*/
1212

1313
"use strict";
@@ -699,6 +699,13 @@ if (__DEV__) {
699699
enumerable: false,
700700
writable: true,
701701
value: false
702+
}); // debugInfo contains Server Component debug information.
703+
704+
Object.defineProperty(element, "_debugInfo", {
705+
configurable: false,
706+
enumerable: false,
707+
writable: true,
708+
value: null
702709
});
703710

704711
if (Object.freeze) {

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXRuntime-dev.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<1e3e50917d709aff40ee0f44444fa5b4>>
10+
* @generated SignedSource<<a477a13bd78d8d34d0c02df2c326c1cf>>
1111
*/
1212

1313
"use strict";
@@ -699,6 +699,13 @@ if (__DEV__) {
699699
enumerable: false,
700700
writable: true,
701701
value: false
702+
}); // debugInfo contains Server Component debug information.
703+
704+
Object.defineProperty(element, "_debugInfo", {
705+
configurable: false,
706+
enumerable: false,
707+
writable: true,
708+
value: null
702709
});
703710

704711
if (Object.freeze) {

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js

+16-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<5d34b04f0be910dc803b79f0e846af47>>
10+
* @generated SignedSource<<a5c4bb9a8fd2ccf90d2a03b031b104d0>>
1111
*/
1212

1313
"use strict";
@@ -24,7 +24,7 @@ if (__DEV__) {
2424
) {
2525
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
2626
}
27-
var ReactVersion = "18.3.0-canary-37d901e2b-20240207";
27+
var ReactVersion = "18.3.0-canary-b229f540e-20240208";
2828

2929
// ATTENTION
3030
// When adding new symbols to this file,
@@ -841,6 +841,13 @@ if (__DEV__) {
841841
enumerable: false,
842842
writable: true,
843843
value: false
844+
}); // debugInfo contains Server Component debug information.
845+
846+
Object.defineProperty(element, "_debugInfo", {
847+
configurable: false,
848+
enumerable: false,
849+
writable: true,
850+
value: null
844851
});
845852

846853
if (Object.freeze) {
@@ -1462,6 +1469,13 @@ if (__DEV__) {
14621469
enumerable: false,
14631470
writable: true,
14641471
value: false
1472+
}); // debugInfo contains Server Component debug information.
1473+
1474+
Object.defineProperty(element, "_debugInfo", {
1475+
configurable: false,
1476+
enumerable: false,
1477+
writable: true,
1478+
value: null
14651479
});
14661480

14671481
if (Object.freeze) {

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -543,4 +543,4 @@ exports.useSyncExternalStore = function (
543543
exports.useTransition = function () {
544544
return ReactCurrentDispatcher.current.useTransition();
545545
};
546-
exports.version = "18.3.0-canary-37d901e2b-20240207";
546+
exports.version = "18.3.0-canary-b229f540e-20240208";

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -539,7 +539,7 @@ exports.useSyncExternalStore = function (
539539
exports.useTransition = function () {
540540
return ReactCurrentDispatcher.current.useTransition();
541541
};
542-
exports.version = "18.3.0-canary-37d901e2b-20240207";
542+
exports.version = "18.3.0-canary-b229f540e-20240208";
543543
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
544544
"function" ===
545545
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
37d901e2b81e12d40df7012c6f8681b8272d2555
1+
b229f540e2da91370611945f9875e00a96196df6

0 commit comments

Comments
 (0)