Skip to content

Commit 1e2c800

Browse files
committed
[Flight] Instrument the Console in the RSC Environment and Replay Logs on the Client (#28384)
When developing in an RSC environment, you should be able to work in a single environment as if it was a unified environment. With thrown errors we already serialize them and then rethrow them on the client. Since by default we log them via onError both in Flight and Fizz, you can get the same log in the RSC runtime, the SSR runtime and on the client. With console logs made in SSR renders, you typically replay the same code during hydration on the client. So for example warnings already show up both in the SSR logs and on the client (although not guaranteed to be the same). You could just spend your time in the client and you'd be fine. Previously, RSC logs would not be replayed because they don't hydrate. So it's easy to miss warnings for example. With this approach, we replay RSC logs both during SSR so they end up in the SSR logs and on the client. That way you can just stay in the browser window during normal development cycles. You shouldn't have to care if your component is a server or client component when working on logical things or iterating on a product. With this change, you probably should mostly ignore the Flight log stream and just look at the client or maybe the SSR one. Unless you're digging into something specific. In particular if you just naively run both Flight and Fizz in the same terminal you get duplicates. I like to run out fixtures `yarn dev:region` and `yarn dev:global` in two separate terminals. Console logs may contain complex objects which can be inspected. Ideally a DevTools inspector could reach into the RSC server and remotely inspect objects using the remote inspection protocol. That way complex objects can be loaded on demand as you expand into them. However, that is a complex environment to set up and the server might not even be alive anymore by the time you inspect the objects. Therefore, I do a best effort to serialize the objects using the RSC protocol but limit the depth that can be rendered. This feature is only own in dev mode since it can be expensive. In a follow up, I'll give the logs a special styling treatment to clearly differentiate them from logs coming from the client. As well as deal with stacks. DiffTrain build for commit 9a5b6bd.
1 parent 73e64de commit 1e2c800

File tree

7 files changed

+9
-9
lines changed

7 files changed

+9
-9
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
@@ -25707,7 +25707,7 @@ if (__DEV__) {
2570725707
return root;
2570825708
}
2570925709

25710-
var ReactVersion = "18.3.0-canary-41b3c31bc-20240221";
25710+
var ReactVersion = "18.3.0-canary-9a5b6bd84-20240221";
2571125711

2571225712
// Might add PROFILE later.
2571325713

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
@@ -9171,7 +9171,7 @@ var devToolsConfig$jscomp$inline_1014 = {
91719171
throw Error("TestRenderer does not support findFiberByHostInstance()");
91729172
},
91739173
bundleType: 0,
9174-
version: "18.3.0-canary-41b3c31bc-20240221",
9174+
version: "18.3.0-canary-9a5b6bd84-20240221",
91759175
rendererPackageName: "react-test-renderer"
91769176
};
91779177
var internals$jscomp$inline_1195 = {
@@ -9202,7 +9202,7 @@ var internals$jscomp$inline_1195 = {
92029202
scheduleRoot: null,
92039203
setRefreshHandler: null,
92049204
getCurrentFiber: null,
9205-
reconcilerVersion: "18.3.0-canary-41b3c31bc-20240221"
9205+
reconcilerVersion: "18.3.0-canary-9a5b6bd84-20240221"
92069206
};
92079207
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
92089208
var hook$jscomp$inline_1196 = __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
@@ -9599,7 +9599,7 @@ var devToolsConfig$jscomp$inline_1056 = {
95999599
throw Error("TestRenderer does not support findFiberByHostInstance()");
96009600
},
96019601
bundleType: 0,
9602-
version: "18.3.0-canary-41b3c31bc-20240221",
9602+
version: "18.3.0-canary-9a5b6bd84-20240221",
96039603
rendererPackageName: "react-test-renderer"
96049604
};
96059605
var internals$jscomp$inline_1236 = {
@@ -9630,7 +9630,7 @@ var internals$jscomp$inline_1236 = {
96309630
scheduleRoot: null,
96319631
setRefreshHandler: null,
96329632
getCurrentFiber: null,
9633-
reconcilerVersion: "18.3.0-canary-41b3c31bc-20240221"
9633+
reconcilerVersion: "18.3.0-canary-9a5b6bd84-20240221"
96349634
};
96359635
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
96369636
var hook$jscomp$inline_1237 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ if (__DEV__) {
2424
) {
2525
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
2626
}
27-
var ReactVersion = "18.3.0-canary-41b3c31bc-20240221";
27+
var ReactVersion = "18.3.0-canary-9a5b6bd84-20240221";
2828

2929
// ATTENTION
3030
// When adding new symbols to this file,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -600,4 +600,4 @@ exports.useSyncExternalStore = function (
600600
exports.useTransition = function () {
601601
return ReactCurrentDispatcher.current.useTransition();
602602
};
603-
exports.version = "18.3.0-canary-41b3c31bc-20240221";
603+
exports.version = "18.3.0-canary-9a5b6bd84-20240221";

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@ exports.useSyncExternalStore = function (
596596
exports.useTransition = function () {
597597
return ReactCurrentDispatcher.current.useTransition();
598598
};
599-
exports.version = "18.3.0-canary-41b3c31bc-20240221";
599+
exports.version = "18.3.0-canary-9a5b6bd84-20240221";
600600
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
601601
"function" ===
602602
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
41b3c31bcbe9f238697b4c79b39017916e0f131c
1+
9a5b6bd84ffa69bfd8b2859ce23e56d17daa8c40

0 commit comments

Comments
 (0)