[Flight] Prefix Replayed Console Logs with a Badge

packages/react-client/src/ReactFlightClient.js

@@ -50,6 +50,7 @@ import {
   readFinalStringChunk,
   createStringDecoder,
   prepareDestinationForModule,
+  printToConsole,
 } from './ReactFlightClientConfig';
 
 import {registerServerReference} from './ReactFlightReplyClient';
@@ -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(

packages/react-client/src/ReactFlightClientConsoleConfigBrowser.js

@@ -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;
+}

packages/react-client/src/ReactFlightClientConsoleConfigPlain.js

@@ -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;
+}

packages/react-client/src/ReactFlightClientConsoleConfigServer.js

@@ -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;
+}

packages/react-client/src/forks/ReactFlightClientConfig.custom.js

@@ -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;

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js

@@ -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';

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js

@@ -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';

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js

@@ -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';

packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js

@@ -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;

packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js

@@ -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';

packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js

@@ -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';

packages/react-client/src/forks/ReactFlightClientConfig.dom-fb-experimental.js

@@ -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';
 

packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js

@@ -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;

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js

@@ -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';

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js

@@ -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';

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js

@@ -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';

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js

@@ -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';

packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js

@@ -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';

packages/react-noop-renderer/src/ReactNoopFlightClient.js

@@ -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> {

packages/react-server/src/ReactFlightServer.js

@@ -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