From f72fad0c14f03a345c08232a9a720fd554bc61cd Mon Sep 17 00:00:00 2001 From: sebmarkbage Date: Thu, 8 Feb 2024 16:06:31 +0000 Subject: [PATCH] [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 https://github.com/facebook/react/commit/b229f540e2da91370611945f9875e00a96196df6. --- .../cjs/ReactTestRenderer-dev.js | 2 +- .../cjs/ReactTestRenderer-prod.js | 4 ++-- .../cjs/ReactTestRenderer-profiling.js | 4 ++-- .../vendor/react/cjs/JSXDEVRuntime-dev.js | 9 ++++++++- .../vendor/react/cjs/JSXRuntime-dev.js | 9 ++++++++- .../RKJSModules/vendor/react/cjs/React-dev.js | 18 ++++++++++++++++-- .../RKJSModules/vendor/react/cjs/React-prod.js | 2 +- .../vendor/react/cjs/React-profiling.js | 2 +- .../Libraries/Renderer/REVISION | 2 +- 9 files changed, 40 insertions(+), 12 deletions(-) diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js index b3234bcb27..256b318ae0 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js @@ -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. diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js index c8dc117acd..8dafb1a9c5 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js @@ -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 = { @@ -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__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js index 7536bf682f..62050e62a9 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js @@ -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 = { @@ -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__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXDEVRuntime-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXDEVRuntime-dev.js index 1543f85d6e..25db52e73c 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXDEVRuntime-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXDEVRuntime-dev.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<> + * @generated SignedSource<> */ "use strict"; @@ -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) { diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXRuntime-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXRuntime-dev.js index 37b81dd514..9505ccf58c 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXRuntime-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/JSXRuntime-dev.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<1e3e50917d709aff40ee0f44444fa5b4>> + * @generated SignedSource<> */ "use strict"; @@ -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) { diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js index de3e161fd2..bb583c06f1 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<5d34b04f0be910dc803b79f0e846af47>> + * @generated SignedSource<> */ "use strict"; @@ -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, @@ -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) { @@ -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) { diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js index 43f8e0f4c2..0ba22c53da 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js @@ -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"; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js index fd76c99e44..c542264629 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js @@ -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 && diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION index f5f42c5179..cca1fb214c 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION @@ -1 +1 @@ -37d901e2b81e12d40df7012c6f8681b8272d2555 +b229f540e2da91370611945f9875e00a96196df6