Add console writing forked behavior between server and client

Chrome + Terminals tend to support color encoding in ANSI SGR format.

Safari + Chrome + Firefox supports CSS styling encoding.

Therefore in browser settings we need to use CSS styling but on servers
we have to use ANSI SGR.

You can ofc use a browser DevTools inspector to inspect a server, however,
in that case it's probably Chrome which supports ANSI SGR too.

packages/react-client/src/ReactFlightClient.js

@@ -50,6 +50,7 @@ import {
   readFinalStringChunk,
   createStringDecoder,
   prepareDestinationForModule,
+  printToConsole,
 } from './ReactFlightClientConfig';
 
 import {registerServerReference} from './ReactFlightReplyClient';
@@ -1099,8 +1100,7 @@ function resolveConsoleEntry(
   // 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);
+  printToConsole(methodName, args);
 }
 
 function mergeBuffer(

packages/react-client/src/ReactFlightClientConsoleConfigBrowser.js

@@ -0,0 +1,33 @@
+/**
+ * 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
+ */
+
+export function printToConsole(methodName: string, args: Array<any>): void {
+  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.
+      // eslint-disable-next-line react-internal/no-production-logging
+      console.assert.apply(console, args);
+      return;
+    }
+    default: {
+      // eslint-disable-next-line react-internal/no-production-logging
+      console[methodName].apply(console, args);
+      return;
+    }
+  }
+}

packages/react-client/src/ReactFlightClientConsoleConfigServer.js

@@ -0,0 +1,33 @@
+/**
+ * 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
+ */
+
+export function printToConsole(methodName: string, args: Array<any>): void {
+  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.
+      // eslint-disable-next-line react-internal/no-production-logging
+      console.assert.apply(console, args);
+      return;
+    }
+    default: {
+      // eslint-disable-next-line react-internal/no-production-logging
+      console[methodName].apply(console, args);
+      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/ReactFlightClientConsoleConfigServer';
 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/ReactFlightClientConsoleConfigServer';
 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> {