[Flight] Don't double badge consoles that are replayed from a third party (#33685)

If a FlightClient runs inside a FlightServer like fetching from a third
party and that logs, then we currently double badge them since we just
add on another badge. The issue is that this might be unnecessarily
noisy but we also transfer the original format of the current server
into the second badge.

This extracts our own badge and then adds the environment name as
structured data which lets the client decide how to format it.

Before:

<img width="599" alt="Screenshot 2025-07-02 at 2 30 07 PM"
src="https://github.com/user-attachments/assets/4bf26a29-b3a8-4024-8eb9-a3f90dbff97a"
/>

After:

<img width="590" alt="Screenshot 2025-07-02 at 2 32 56 PM"
src="https://github.com/user-attachments/assets/f06bbb6d-fbb1-4ae6-b0e3-775849fe3c53"
/>

Author: sebmarkbage

packages/react-client/src/ReactClientConsoleConfigBrowser.js

@@ -7,6 +7,7 @@
  * @flow
  */
 
+// Keep in sync with ReactServerConsoleConfig
 const badgeFormat = '%c%s%c ';
 // Same badge styling as DevTools.
 const badgeStyle =

packages/react-client/src/ReactClientConsoleConfigPlain.js

@@ -7,6 +7,7 @@
  * @flow
  */
 
+// Keep in sync with ReactServerConsoleConfig
 const badgeFormat = '[%s] ';
 const pad = ' ';
 

packages/react-client/src/ReactClientConsoleConfigServer.js

@@ -7,6 +7,7 @@
  * @flow
  */
 
+// Keep in sync with ReactServerConsoleConfig
 // 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.

packages/react-server/src/ReactFlightServer.js

@@ -96,6 +96,7 @@ import {
   parseStackTrace,
   supportsComponentStorage,
   componentStorage,
+  unbadgeConsole,
 } from './ReactFlightServerConfig';
 
 import {
@@ -275,7 +276,15 @@ function patchConsole(consoleInst: typeof console, methodName: string) {
         );
         request.pendingChunks++;
         const owner: null | ReactComponentInfo = resolveOwner();
-        emitConsoleChunk(request, methodName, owner, stack, arguments);
+        const args = Array.from(arguments);
+        // Extract the env if this is a console log that was replayed from another env.
+        let env = unbadgeConsole(methodName, args);
+        if (env === null) {
+          // Otherwise add the current environment.
+          env = (0, request.environmentName)();
+        }
+
+        emitConsoleChunk(request, methodName, owner, env, stack, args);
       }
       // $FlowFixMe[prop-missing]
       return originalMethod.apply(this, arguments);
@@ -4711,6 +4720,7 @@ function emitConsoleChunk(
   request: Request,
   methodName: string,
   owner: null | ReactComponentInfo,
+  env: string,
   stackTrace: ReactStackTrace,
   args: Array<any>,
 ): void {
@@ -4727,8 +4737,6 @@ function emitConsoleChunk(
     outlineComponentInfo(request, owner);
   }
 
-  // TODO: Don't double badge if this log came from another Flight Client.
-  const env = (0, request.environmentName)();
   const payload = [methodName, stackTrace, owner, env];
   // $FlowFixMe[method-unbinding]
   payload.push.apply(payload, args);

packages/react-server/src/ReactServerConsoleConfigBrowser.js

@@ -0,0 +1,61 @@
+/**
+ * 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
+ */
+
+// Keep in sync with ReactClientConsoleConfig
+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 padLength = 1;
+
+// This mutates the args to remove any badges that was added by a FlightClient and
+// returns the name in the badge. This is used when a FlightClient replays inside
+// a FlightServer and we capture those replays.
+export function unbadgeConsole(
+  methodName: string,
+  args: Array<any>,
+): null | string {
+  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.
+      // So we wouldn't have added any badge in the first place.
+      // $FlowFixMe
+      return null;
+    }
+    case 'assert': {
+      // assert takes formatting options as the second argument.
+      offset = 1;
+    }
+  }
+  const format = args[offset];
+  const style = args[offset + 1];
+  const badge = args[offset + 2];
+  if (
+    typeof format === 'string' &&
+    format.startsWith(badgeFormat) &&
+    style === badgeStyle &&
+    typeof badge === 'string'
+  ) {
+    // Remove our badging from the arguments.
+    args.splice(offset, 4, format.slice(badgeFormat.length));
+    return badge.slice(padLength, badge.length - padLength);
+  }
+  return null;
+}

packages/react-server/src/ReactServerConsoleConfigPlain.js

@@ -0,0 +1,52 @@
+/**
+ * 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
+ */
+
+// Keep in sync with ReactClientConsoleConfig
+const badgeFormat = '[%s] ';
+const padLength = 1;
+const pad = ' ';
+
+// This mutates the args to remove any badges that was added by a FlightClient and
+// returns the name in the badge. This is used when a FlightClient replays inside
+// a FlightServer and we capture those replays.
+export function unbadgeConsole(
+  methodName: string,
+  args: Array<any>,
+): null | string {
+  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.
+      // So we wouldn't have added any badge in the first place.
+      // $FlowFixMe
+      return null;
+    }
+    case 'assert': {
+      // assert takes formatting options as the second argument.
+      offset = 1;
+    }
+  }
+  const format = args[offset];
+  const badge = args[offset + 1];
+  if (
+    typeof format === 'string' &&
+    format.startsWith(badgeFormat) &&
+    typeof badge === 'string' &&
+    badge.startsWith(pad) &&
+    badge.endsWith(pad)
+  ) {
+    // Remove our badging from the arguments.
+    args.splice(offset, 2, format.slice(badgeFormat.length));
+    return badge.slice(padLength, badge.length - padLength);
+  }
+  return null;
+}

packages/react-server/src/ReactServerConsoleConfigServer.js

@@ -0,0 +1,60 @@
+/**
+ * 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
+ */
+
+// Keep in sync with ReactClientConsoleConfig
+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 padLength = 1;
+
+// This mutates the args to remove any badges that was added by a FlightClient and
+// returns the name in the badge. This is used when a FlightClient replays inside
+// a FlightServer and we capture those replays.
+export function unbadgeConsole(
+  methodName: string,
+  args: Array<any>,
+): null | string {
+  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.
+      // So we wouldn't have added any badge in the first place.
+      // $FlowFixMe
+      return null;
+    }
+    case 'assert': {
+      // assert takes formatting options as the second argument.
+      offset = 1;
+    }
+  }
+  const format = args[offset];
+  const style = args[offset + 1];
+  const badge = args[offset + 2];
+  if (
+    typeof format === 'string' &&
+    format.startsWith(badgeFormat) &&
+    style === badgeStyle &&
+    typeof badge === 'string'
+  ) {
+    // Remove our badging from the arguments.
+    args.splice(offset, 4, format.slice(badgeFormat.length));
+    return badge.slice(padLength, badge.length - padLength);
+  }
+  return null;
+}

packages/react-server/src/forks/ReactFlightServerConfig.custom.js

@@ -15,6 +15,7 @@ export * from '../ReactFlightServerConfigBundlerCustom';
 export * from '../ReactFlightServerConfigDebugNoop';
 
 export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigPlain';
 
 export type Hints = any;
 export type HintCode = any;

packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js

@@ -23,3 +23,4 @@ export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
 export * from '../ReactFlightServerConfigDebugNoop';
 
 export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigBrowser';

packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-parcel.js

@@ -23,3 +23,4 @@ export const componentStorage: AsyncLocalStorage<ReactComponentInfo | void> =
 export * from '../ReactFlightServerConfigDebugNoop';
 
 export * from '../ReactFlightStackConfigV8';
+export * from '../ReactServerConsoleConfigBrowser';