Skip to content

Commit

Permalink
[Flight] Emit debug info for a Server Component (#28272)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
sebmarkbage committed Feb 8, 2024
1 parent 734b023 commit f72fad0
Show file tree
Hide file tree
Showing 9 changed files with 40 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25670,7 +25670,7 @@ if (__DEV__) {
return root;
}

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

// Might add PROFILE later.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9152,7 +9152,7 @@ var devToolsConfig$jscomp$inline_1011 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-37d901e2b-20240207",
version: "18.3.0-canary-b229f540e-20240208",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1189 = {
Expand Down Expand Up @@ -9183,7 +9183,7 @@ var internals$jscomp$inline_1189 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-37d901e2b-20240207"
reconcilerVersion: "18.3.0-canary-b229f540e-20240208"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1190 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9580,7 +9580,7 @@ var devToolsConfig$jscomp$inline_1053 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-37d901e2b-20240207",
version: "18.3.0-canary-b229f540e-20240208",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1230 = {
Expand Down Expand Up @@ -9611,7 +9611,7 @@ var internals$jscomp$inline_1230 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-37d901e2b-20240207"
reconcilerVersion: "18.3.0-canary-b229f540e-20240208"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1231 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<bf2ebc94d9d8c1c3351e8a3483385df7>>
* @generated SignedSource<<b469953f97ee3dddb995beaf72431eac>>
*/

"use strict";
Expand Down Expand Up @@ -699,6 +699,13 @@ if (__DEV__) {
enumerable: false,
writable: true,
value: false
}); // debugInfo contains Server Component debug information.

Object.defineProperty(element, "_debugInfo", {
configurable: false,
enumerable: false,
writable: true,
value: null
});

if (Object.freeze) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<1e3e50917d709aff40ee0f44444fa5b4>>
* @generated SignedSource<<a477a13bd78d8d34d0c02df2c326c1cf>>
*/

"use strict";
Expand Down Expand Up @@ -699,6 +699,13 @@ if (__DEV__) {
enumerable: false,
writable: true,
value: false
}); // debugInfo contains Server Component debug information.

Object.defineProperty(element, "_debugInfo", {
configurable: false,
enumerable: false,
writable: true,
value: null
});

if (Object.freeze) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<5d34b04f0be910dc803b79f0e846af47>>
* @generated SignedSource<<a5c4bb9a8fd2ccf90d2a03b031b104d0>>
*/

"use strict";
Expand All @@ -24,7 +24,7 @@ if (__DEV__) {
) {
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
}
var ReactVersion = "18.3.0-canary-37d901e2b-20240207";
var ReactVersion = "18.3.0-canary-b229f540e-20240208";

// ATTENTION
// When adding new symbols to this file,
Expand Down Expand Up @@ -841,6 +841,13 @@ if (__DEV__) {
enumerable: false,
writable: true,
value: false
}); // debugInfo contains Server Component debug information.

Object.defineProperty(element, "_debugInfo", {
configurable: false,
enumerable: false,
writable: true,
value: null
});

if (Object.freeze) {
Expand Down Expand Up @@ -1462,6 +1469,13 @@ if (__DEV__) {
enumerable: false,
writable: true,
value: false
}); // debugInfo contains Server Component debug information.

Object.defineProperty(element, "_debugInfo", {
configurable: false,
enumerable: false,
writable: true,
value: null
});

if (Object.freeze) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -543,4 +543,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-37d901e2b-20240207";
exports.version = "18.3.0-canary-b229f540e-20240208";
Original file line number Diff line number Diff line change
Expand Up @@ -539,7 +539,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-37d901e2b-20240207";
exports.version = "18.3.0-canary-b229f540e-20240208";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
37d901e2b81e12d40df7012c6f8681b8272d2555
b229f540e2da91370611945f9875e00a96196df6

0 comments on commit f72fad0

Please sign in to comment.