From 5a9565ddfb3d62e522bb499cf177e364329017d6 Mon Sep 17 00:00:00 2001 From: sebmarkbage Date: Thu, 30 May 2024 16:05:37 +0000 Subject: [PATCH] [Flight] Eval Fake Server Component Functions to Recreate Native Stacks (#29632) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We have three kinds of stacks that we send in the RSC protocol: - The stack trace where a replayed `console.log` was called on the server. - The JSX callsite that created a Server Component which then later called another component. - The JSX callsite that created a Host or Client Component. These stack frames disappear in native stacks on the client since they're executed on the server. This evals a fake file which only has one call in it on the same line/column as the server. Then we call through these fake modules to "replay" the callstack. We then replay the `console.log` within this stack, or call `console.createTask` in this stack to recreate the stack. The main concern with this approach is the performance. It adds significant cost to create all these eval:ed functions but it should eventually balance out. This doesn't yet apply source maps to these. With source maps it'll be able to show the server source code when clicking the links. I don't love how these appear. - Because we haven't yet initialized the client module we don't have the name of the client component we're about to render yet which leads to the `<...>` task name. - The `(async)` suffix Chrome adds is still a problem. - The VMxxxx prefix is used to disambiguate which is noisy. Might be helped by source maps. - The continuation of the async stacks end up rooted somewhere in the bootstrapping of the app. This might be ok when the bootstrapping ends up ignore listed but it's kind of a problem that you can't clear the async stack. Screenshot 2024-05-28 at 11 58 56 PM Screenshot 2024-05-28 at 11 58 07 PM Screenshot 2024-05-28 at 11 58 31 PM Screenshot 2024-05-28 at 11 59 12 PM DiffTrain build for commit https://github.com/facebook/react/commit/9d4fba078812de0363fe9514b943650fa479e8af. --- .../react-test-renderer/cjs/ReactTestRenderer-dev.js | 4 ++-- .../react-test-renderer/cjs/ReactTestRenderer-prod.js | 6 +++--- .../cjs/ReactTestRenderer-profiling.js | 6 +++--- .../js/RKJSModules/vendor/react/react/cjs/React-dev.js | 4 ++-- .../RKJSModules/vendor/react/react/cjs/React-prod.js | 4 ++-- .../vendor/react/react/cjs/React-profiling.js | 4 ++-- .../js/react-native-github/Libraries/Renderer/REVISION | 2 +- .../Renderer/implementations/ReactFabric-dev.fb.js | 4 ++-- .../Renderer/implementations/ReactFabric-prod.fb.js | 6 +++--- .../implementations/ReactFabric-profiling.fb.js | 6 +++--- .../implementations/ReactNativeRenderer-dev.fb.js | 4 ++-- .../implementations/ReactNativeRenderer-prod.fb.js | 10 +++++----- .../ReactNativeRenderer-profiling.fb.js | 10 +++++----- 13 files changed, 35 insertions(+), 35 deletions(-) diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js index 89f18a64d0..ad769127e8 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<7ca4155a78e484bb791befb0a0483562>> + * @generated SignedSource<> */ 'use strict'; @@ -23471,7 +23471,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition return root; } -var ReactVersion = '19.0.0-rc-fb61a1b515-20240530'; +var ReactVersion = '19.0.0-rc-9d4fba0788-20240530'; /* * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js index 94691d6d9e..a8dbbe2d01 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<3467ef5cc029c44f026f965d523ec535>> + * @generated SignedSource<> */ "use strict"; @@ -9298,7 +9298,7 @@ var devToolsConfig$jscomp$inline_1047 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "19.0.0-rc-fb61a1b515-20240530", + version: "19.0.0-rc-9d4fba0788-20240530", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1234 = { @@ -9329,7 +9329,7 @@ var internals$jscomp$inline_1234 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-rc-fb61a1b515-20240530" + reconcilerVersion: "19.0.0-rc-9d4fba0788-20240530" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1235 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js index 16c7182f01..a2d1b366cf 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<> + * @generated SignedSource<<44794162c43d412b2b077d1e2d3b5640>> */ "use strict"; @@ -9920,7 +9920,7 @@ var devToolsConfig$jscomp$inline_1130 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "19.0.0-rc-fb61a1b515-20240530", + version: "19.0.0-rc-9d4fba0788-20240530", rendererPackageName: "react-test-renderer" }; (function (internals) { @@ -9964,7 +9964,7 @@ var devToolsConfig$jscomp$inline_1130 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-rc-fb61a1b515-20240530" + reconcilerVersion: "19.0.0-rc-9d4fba0788-20240530" }); exports._Scheduler = Scheduler; exports.act = act; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js index 54f3bce7ec..118250ae70 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<236832470786fa8d630f95ea59053100>> + * @generated SignedSource<<5a046d6d586a3f4fd58139e51aee7d61>> */ 'use strict'; @@ -24,7 +24,7 @@ if ( } var dynamicFlagsUntyped = require('ReactNativeInternalFeatureFlags'); -var ReactVersion = '19.0.0-rc-fb61a1b515-20240530'; +var ReactVersion = '19.0.0-rc-9d4fba0788-20240530'; // Re-export dynamic flags from the internal module. var dynamicFlags = dynamicFlagsUntyped; // We destructure each value before re-exporting to avoid a dynamic look-up on diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js index 77c16a97f4..5b23163dee 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<0ad7d99d0ddc3869ed760873fb4a1782>> + * @generated SignedSource<<976630610d17c5c0928e19c7ecf1e254>> */ "use strict"; @@ -604,4 +604,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactSharedInternals.H.useTransition(); }; -exports.version = "19.0.0-rc-fb61a1b515-20240530"; +exports.version = "19.0.0-rc-9d4fba0788-20240530"; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js index ecfcc47b0a..128fb22e79 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<> + * @generated SignedSource<<6f2282142152080634990c0581fe12b1>> */ "use strict"; @@ -608,7 +608,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactSharedInternals.H.useTransition(); }; -exports.version = "19.0.0-rc-fb61a1b515-20240530"; +exports.version = "19.0.0-rc-9d4fba0788-20240530"; "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 a93f6c63dc..98c09f73f3 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 @@ -fb61a1b515c5ea0e31b0dac19184454a79c4baf1 +9d4fba078812de0363fe9514b943650fa479e8af diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js index 80af67de60..0d59035509 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<995c3dc1c310eccb6e0c62c1d4d635a7>> + * @generated SignedSource<<5f62d0d6fc378ff4d01037e4c34b1105>> */ 'use strict'; @@ -26206,7 +26206,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition return root; } -var ReactVersion = '19.0.0-rc-fb61a1b515-20240530'; +var ReactVersion = '19.0.0-rc-9d4fba0788-20240530'; /* * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js index 70162f7172..b040490941 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<845d34a6fb2bdf695a5050c565c6b6d8>> + * @generated SignedSource<<728a82421f8c901a2f76a809ae55617c>> */ "use strict"; @@ -10551,7 +10551,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1124 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "19.0.0-rc-fb61a1b515-20240530", + version: "19.0.0-rc-9d4fba0788-20240530", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForInstance: getInspectorDataForInstance, @@ -10594,7 +10594,7 @@ var internals$jscomp$inline_1350 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-rc-fb61a1b515-20240530" + reconcilerVersion: "19.0.0-rc-9d4fba0788-20240530" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1351 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js index ea1198198a..86dbc7008b 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<> + * @generated SignedSource<<35f0f25bfc4e07afd6522eb43b4665b2>> */ "use strict"; @@ -11257,7 +11257,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1205 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "19.0.0-rc-fb61a1b515-20240530", + version: "19.0.0-rc-9d4fba0788-20240530", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForInstance: getInspectorDataForInstance, @@ -11313,7 +11313,7 @@ var roots = new Map(), scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-rc-fb61a1b515-20240530" + reconcilerVersion: "19.0.0-rc-9d4fba0788-20240530" }); exports.createPortal = function (children, containerTag) { return createPortal$1( diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js index 1ab7dadd0e..1d6323e956 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<> + * @generated SignedSource<<6b10942e6f7e436a8dde737bfe07431c>> */ 'use strict'; @@ -26562,7 +26562,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition return root; } -var ReactVersion = '19.0.0-rc-fb61a1b515-20240530'; +var ReactVersion = '19.0.0-rc-9d4fba0788-20240530'; /* * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js index bd7e278fda..5334ff2730 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<> + * @generated SignedSource<<008889e85529cc4966c3f8008644b355>> */ "use strict"; @@ -10696,11 +10696,11 @@ function traverseOwnerTreeUp(hierarchy, instance) { traverseOwnerTreeUp(hierarchy, instance); } var isomorphicReactPackageVersion = React.version; -if ("19.0.0-rc-fb61a1b515-20240530" !== isomorphicReactPackageVersion) +if ("19.0.0-rc-9d4fba0788-20240530" !== isomorphicReactPackageVersion) throw Error( 'Incompatible React versions: The "react" and "react-native-renderer" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion + - "\n - react-native-renderer: 19.0.0-rc-fb61a1b515-20240530\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-native-renderer: 19.0.0-rc-9d4fba0788-20240530\nLearn more: https://react.dev/warnings/version-mismatch") ); if ( "function" !== @@ -10750,7 +10750,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1192 = { findFiberByHostInstance: getInstanceFromTag, bundleType: 0, - version: "19.0.0-rc-fb61a1b515-20240530", + version: "19.0.0-rc-9d4fba0788-20240530", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForInstance: getInspectorDataForInstance, @@ -10793,7 +10793,7 @@ var internals$jscomp$inline_1439 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-rc-fb61a1b515-20240530" + reconcilerVersion: "19.0.0-rc-9d4fba0788-20240530" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1440 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js index 7a4b13ff3c..61ee9c8ce5 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js @@ -7,7 +7,7 @@ * @noflow * @nolint * @preventMunge - * @generated SignedSource<<0cff48a4781a04f48ecdeb3be7565d9e>> + * @generated SignedSource<<1ce490a4a36486c993f44fb2e56dd056>> */ "use strict"; @@ -11403,11 +11403,11 @@ function traverseOwnerTreeUp(hierarchy, instance) { traverseOwnerTreeUp(hierarchy, instance); } var isomorphicReactPackageVersion = React.version; -if ("19.0.0-rc-fb61a1b515-20240530" !== isomorphicReactPackageVersion) +if ("19.0.0-rc-9d4fba0788-20240530" !== isomorphicReactPackageVersion) throw Error( 'Incompatible React versions: The "react" and "react-native-renderer" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion + - "\n - react-native-renderer: 19.0.0-rc-fb61a1b515-20240530\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-native-renderer: 19.0.0-rc-9d4fba0788-20240530\nLearn more: https://react.dev/warnings/version-mismatch") ); if ( "function" !== @@ -11457,7 +11457,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1273 = { findFiberByHostInstance: getInstanceFromTag, bundleType: 0, - version: "19.0.0-rc-fb61a1b515-20240530", + version: "19.0.0-rc-9d4fba0788-20240530", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForInstance: getInspectorDataForInstance, @@ -11513,7 +11513,7 @@ var roots = new Map(), scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-rc-fb61a1b515-20240530" + reconcilerVersion: "19.0.0-rc-9d4fba0788-20240530" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = { computeComponentStackForErrorReporting: function (reactTag) {