Skip to content

Commit d77e880

Browse files
committed
[Flight] Prefix Replayed Console Logs with a Badge (#28403)
Builds on top of #28384. This prefixes each log with a badge similar to how we badge built-ins like "ForwardRef" and "Memo" in the React DevTools. The idea is that we can add such badges in DevTools for Server Components too to carry on the consistency. This puts the "environment" name in the badge which defaults to "Server". So you know which source it is coming from. We try to use the same styling as the React DevTools. We use light-dark mode where available to support the two different color styles, but if it's not available I use a fixed background so that it's always readable even in dark mode. In Terminals, instead of hard coding colors that might not look good with some themes, I use the ANSI color code to flip background/foreground colors in that case. In earlier commits I had it on the end of the line similar to the DevTools badges but for multiline I found it better to prefix it. We could try various options tough. In most cases we can use both ANSI and the `%c` CSS color specifier, because node will only use ANSI and hide the other. Chrome supports both but the color overrides ANSI if it comes later (and Chrome doesn't support color inverting anyway). Safari/Firefox prints the ANSI, so it can only use CSS colors. Therefore in browser builds I exclude ANSI. On the server I support both so if you use Chrome inspector on the server, you get nice colors on both terminal and in the inspector. Since Bun uses WebKit inspector and it prints the ANSI we can't safely emit both there. However, we also can't emit just the color specifier because then it prints in the terminal. oven-sh/bun#9021 So we just use a plain string prefix for now with a bracket until that's fixed. Screen shots: <img width="758" alt="Screenshot 2024-02-21 at 12 56 02 AM" src="https://github.com/facebook/react/assets/63648/4f887ffe-fffe-4402-bf2a-b7890986d60c"> <img width="759" alt="Screenshot 2024-02-21 at 12 56 24 AM" src="https://github.com/facebook/react/assets/63648/f32d432f-f738-4872-a700-ea0a78e6c745"> <img width="514" alt="Screenshot 2024-02-21 at 12 57 10 AM" src="https://github.com/facebook/react/assets/63648/205d2e82-75b7-4e2b-9d9c-aa9e2cbedf39"> <img width="489" alt="Screenshot 2024-02-21 at 12 57 34 AM" src="https://github.com/facebook/react/assets/63648/ea52d1e4-b9fa-431d-ae9e-ccb87631f399"> <img width="516" alt="Screenshot 2024-02-21 at 12 58 23 AM" src="https://github.com/facebook/react/assets/63648/52b50fac-bec0-471d-a457-1a10d8df9172"> <img width="956" alt="Screenshot 2024-02-21 at 12 58 56 AM" src="https://github.com/facebook/react/assets/63648/0096ed61-5eff-4aa9-8a8a-2204e754bd1f"> DiffTrain build for commit c027406.
1 parent 1e2c800 commit d77e880

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

Lines changed: 1 addition & 1 deletion
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-9a5b6bd84-20240221";
25710+
var ReactVersion = "18.3.0-canary-c0274063f-20240221";
2571125711

2571225712
// Might add PROFILE later.
2571325713

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

Lines changed: 2 additions & 2 deletions
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-9a5b6bd84-20240221",
9174+
version: "18.3.0-canary-c0274063f-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-9a5b6bd84-20240221"
9205+
reconcilerVersion: "18.3.0-canary-c0274063f-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

Lines changed: 2 additions & 2 deletions
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-9a5b6bd84-20240221",
9602+
version: "18.3.0-canary-c0274063f-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-9a5b6bd84-20240221"
9633+
reconcilerVersion: "18.3.0-canary-c0274063f-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

Lines changed: 1 addition & 1 deletion
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-9a5b6bd84-20240221";
27+
var ReactVersion = "18.3.0-canary-c0274063f-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

Lines changed: 1 addition & 1 deletion
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-9a5b6bd84-20240221";
603+
exports.version = "18.3.0-canary-c0274063f-20240221";

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

Lines changed: 1 addition & 1 deletion
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-9a5b6bd84-20240221";
599+
exports.version = "18.3.0-canary-c0274063f-20240221";
600600
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
601601
"function" ===
602602
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
9a5b6bd84ffa69bfd8b2859ce23e56d17daa8c40
1+
c0274063f0d625d6e17e82f3436f4a0b78b7e58f

0 commit comments

Comments
 (0)