Skip to content

Commit

Permalink
[Flight] Prefix Replayed Console Logs with a Badge (facebook#28403)
Browse files Browse the repository at this point in the history
Builds on top of facebook#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">
  • Loading branch information
sebmarkbage authored and AndyPengc12 committed Apr 15, 2024
1 parent 19c3266 commit 9a1fd67
Show file tree
Hide file tree
Showing 22 changed files with 323 additions and 5 deletions.
9 changes: 5 additions & 4 deletions packages/react-client/src/ReactFlightClient.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import {
readFinalStringChunk,
createStringDecoder,
prepareDestinationForModule,
printToConsole,
} from './ReactFlightClientConfig';

import {registerServerReference} from './ReactFlightReplyClient';
Expand Down Expand Up @@ -1094,13 +1095,13 @@ function resolveConsoleEntry(
);
}

const payload: [string, string, mixed] = parseModel(response, value);
const payload: [string, string, string, mixed] = parseModel(response, value);
const methodName = payload[0];
// TODO: Restore the fake stack before logging.
// const stackTrace = payload[1];
const args = payload.slice(2);
// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, args);
const env = payload[2];
const args = payload.slice(3);
printToConsole(methodName, args, env);
}

function mergeBuffer(
Expand Down
69 changes: 69 additions & 0 deletions packages/react-client/src/ReactFlightClientConsoleConfigBrowser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

const badgeFormat = '%c%s%c ';
// Same badge styling as DevTools.
const badgeStyle =
// We use a fixed background if light-dark is not supported, otherwise
// we use a transparent background.
'background: #e6e6e6;' +
'background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.25));' +
'color: #000000;' +
'color: light-dark(#000000, #ffffff);' +
'border-radius: 2px';
const resetStyle = '';
const pad = ' ';

export function printToConsole(
methodName: string,
args: Array<any>,
badgeName: string,
): void {
let offset = 0;
switch (methodName) {
case 'dir':
case 'dirxml':
case 'groupEnd':
case 'table': {
// These methods cannot be colorized because they don't take a formatting string.
// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, args);
return;
}
case 'assert': {
// assert takes formatting options as the second argument.
offset = 1;
}
}

const newArgs = args.slice(0);
if (typeof newArgs[offset] === 'string') {
newArgs.splice(
offset,
1,
badgeFormat + newArgs[offset],
badgeStyle,
pad + badgeName + pad,
resetStyle,
);
} else {
newArgs.splice(
offset,
0,
badgeFormat,
badgeStyle,
pad + badgeName + pad,
resetStyle,
);
}

// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, newArgs);
return;
}
50 changes: 50 additions & 0 deletions packages/react-client/src/ReactFlightClientConsoleConfigPlain.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

const badgeFormat = '[%s] ';
const pad = ' ';

export function printToConsole(
methodName: string,
args: Array<any>,
badgeName: string,
): void {
let offset = 0;
switch (methodName) {
case 'dir':
case 'dirxml':
case 'groupEnd':
case 'table': {
// These methods cannot be colorized because they don't take a formatting string.
// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, args);
return;
}
case 'assert': {
// assert takes formatting options as the second argument.
offset = 1;
}
}

const newArgs = args.slice(0);
if (typeof newArgs[offset] === 'string') {
newArgs.splice(
offset,
1,
badgeFormat + newArgs[offset],
pad + badgeName + pad,
);
} else {
newArgs.splice(offset, 0, badgeFormat, pad + badgeName + pad);
}

// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, newArgs);
return;
}
70 changes: 70 additions & 0 deletions packages/react-client/src/ReactFlightClientConsoleConfigServer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

// This flips color using ANSI, then sets a color styling, then resets.
const badgeFormat = '\x1b[0m\x1b[7m%c%s\x1b[0m%c ';
// Same badge styling as DevTools.
const badgeStyle =
// We use a fixed background if light-dark is not supported, otherwise
// we use a transparent background.
'background: #e6e6e6;' +
'background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.25));' +
'color: #000000;' +
'color: light-dark(#000000, #ffffff);' +
'border-radius: 2px';
const resetStyle = '';
const pad = ' ';

export function printToConsole(
methodName: string,
args: Array<any>,
badgeName: string,
): void {
let offset = 0;
switch (methodName) {
case 'dir':
case 'dirxml':
case 'groupEnd':
case 'table': {
// These methods cannot be colorized because they don't take a formatting string.
// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, args);
return;
}
case 'assert': {
// assert takes formatting options as the second argument.
offset = 1;
}
}

const newArgs = args.slice(0);
if (typeof newArgs[offset] === 'string') {
newArgs.splice(
offset,
1,
badgeFormat + newArgs[offset],
badgeStyle,
pad + badgeName + pad,
resetStyle,
);
} else {
newArgs.splice(
offset,
0,
badgeFormat,
badgeStyle,
pad + badgeName + pad,
resetStyle,
);
}

// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, newArgs);
return;
}
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,5 @@ export opaque type StringDecoder = mixed; // eslint-disable-line no-undef
export const createStringDecoder = $$$config.createStringDecoder;
export const readPartialStringChunk = $$$config.readPartialStringChunk;
export const readFinalStringChunk = $$$config.readFinalStringChunk;

export const printToConsole = $$$config.printToConsole;
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMBrowser';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackBrowser';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackBrowser';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackBrowser';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigPlain';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

export type Response = any;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigPlain';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
export * from 'react-server-dom-fb/src/ReactFlightClientConfigFBBundler';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';

export type Response = any;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMServer';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerNode';
export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

export * from 'react-client/src/ReactFlightClientStreamConfigNode';
export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode';
export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
Expand Down
4 changes: 4 additions & 0 deletions packages/react-noop-renderer/src/ReactNoopFlightClient.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ const {createResponse, processBinaryChunk, getRoot, close} = ReactFlightClient({
parseModel(response: Response, json) {
return JSON.parse(json, response._fromJSON);
},
printToConsole(methodName, args, badgeName) {
// eslint-disable-next-line react-internal/no-production-logging
console[methodName].apply(console, args);
},
});

function read<T>(source: Source): Thenable<T> {
Expand Down
4 changes: 3 additions & 1 deletion packages/react-server/src/ReactFlightServer.js
Original file line number Diff line number Diff line change
Expand Up @@ -2213,7 +2213,9 @@ function emitConsoleChunk(
}
}

const payload = [methodName, stackTrace];
// TODO: Don't double badge if this log came from another Flight Client.
const env = request.environmentName;
const payload = [methodName, stackTrace, env];
// $FlowFixMe[method-unbinding]
payload.push.apply(payload, args);
// $FlowFixMe[incompatible-type] stringify can return null
Expand Down
Loading

0 comments on commit 9a1fd67

Please sign in to comment.