From fefc30b88c4455d38d04a622ba0b47d588e0e91a Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 10 Jun 2024 10:24:59 -0400
Subject: [PATCH 01/10] Encode the environmentName that thrown errors came from

This is attached to our custom Error "sub class" on the receiving side
which also includes digest.

DEV-only.
---
 packages/react-client/src/ReactFlightClient.js          | 3 +++
 packages/react-client/src/__tests__/ReactFlight-test.js | 2 ++
 packages/react-server/src/ReactFlightServer.js          | 9 ++++++++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index e1d43db1ecffa..f83317254c508 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -1730,6 +1730,7 @@ function resolveErrorDev(
   digest: string,
   message: string,
   stack: string,
+  env: string,
 ): void {
   if (!__DEV__) {
     // These errors should never make it into a build so we don't need to encode them in codes.json
@@ -1769,6 +1770,7 @@ function resolveErrorDev(
   }
 
   (error: any).digest = digest;
+  (error: any).environmentName = env;
   const errorWithDigest: ErrorWithDigest = (error: any);
   const chunks = response._chunks;
   const chunk = chunks.get(id);
@@ -2200,6 +2202,7 @@ function processFullRow(
           errorInfo.digest,
           errorInfo.message,
           errorInfo.stack,
+          errorInfo.env,
         );
       } else {
         resolveErrorProd(response, id, errorInfo.digest);
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index bd2d98736addd..8a652dab4aaa8 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -127,6 +127,7 @@ describe('ReactFlight', () => {
             this.props.expectedMessage,
           );
           expect(this.state.error.digest).toBe('a dev digest');
+          expect(this.state.error.environmentName).toBe('Server');
         } else {
           expect(this.state.error.message).toBe(
             'An error occurred in the Server Components render. The specific message is omitted in production' +
@@ -143,6 +144,7 @@ describe('ReactFlight', () => {
             expectedDigest = '[]';
           }
           expect(this.state.error.digest).toContain(expectedDigest);
+          expect(this.state.error.environmentName).toBe(undefined);
           expect(this.state.error.stack).toBe(
             'Error: ' + this.state.error.message,
           );
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 405401a8b3421..7c833137c83bd 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -2776,11 +2776,18 @@ function emitErrorChunk(
   if (__DEV__) {
     let message;
     let stack = '';
+    let env = request.environmentName;
     try {
       if (error instanceof Error) {
         // eslint-disable-next-line react-internal/safe-string-coercion
         message = String(error.message);
         stack = getStack(error);
+        const errorEnv = (error: any).environmentName;
+        if (typeof errorEnv === 'string') {
+          // This probably came from another FlightClient as a pass through.
+          // Keep the environment name.
+          env = errorEnv;
+        }
       } else if (typeof error === 'object' && error !== null) {
         message = describeObjectForErrorMessage(error);
       } else {
@@ -2790,7 +2797,7 @@ function emitErrorChunk(
     } catch (x) {
       message = 'An error occurred but serializing the error message failed.';
     }
-    errorInfo = {digest, message, stack};
+    errorInfo = {digest, message, stack, env};
   } else {
     errorInfo = {digest};
   }

From 57d3196216af7be29ec3fb1aa1fccd01f080418e Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 10 Jun 2024 10:46:24 -0400
Subject: [PATCH 02/10] Generalize ReactFlightClientConsoleConfig to Fiber
 Clients too

---
 ...leConfigBrowser.js => ReactClientConsoleConfigBrowser.js} | 0
 ...onsoleConfigPlain.js => ReactClientConsoleConfigPlain.js} | 0
 ...soleConfigServer.js => ReactClientConsoleConfigServer.js} | 0
 .../src/forks/ReactFlightClientConfig.dom-browser-esm.js     | 2 +-
 .../forks/ReactFlightClientConfig.dom-browser-turbopack.js   | 2 +-
 .../src/forks/ReactFlightClientConfig.dom-browser.js         | 2 +-
 .../src/forks/ReactFlightClientConfig.dom-bun.js             | 2 +-
 .../src/forks/ReactFlightClientConfig.dom-edge-turbopack.js  | 2 +-
 .../src/forks/ReactFlightClientConfig.dom-edge-webpack.js    | 2 +-
 .../src/forks/ReactFlightClientConfig.dom-legacy.js          | 2 +-
 .../src/forks/ReactFlightClientConfig.dom-node-esm.js        | 2 +-
 .../ReactFlightClientConfig.dom-node-turbopack-bundled.js    | 2 +-
 .../src/forks/ReactFlightClientConfig.dom-node-turbopack.js  | 2 +-
 .../src/forks/ReactFlightClientConfig.dom-node-webpack.js    | 2 +-
 .../src/forks/ReactFlightClientConfig.dom-node.js            | 2 +-
 packages/react-noop-renderer/src/createReactNoop.js          | 5 +++++
 packages/react-reconciler/src/forks/ReactFiberConfig.art.js  | 1 +
 .../react-reconciler/src/forks/ReactFiberConfig.custom.js    | 1 +
 packages/react-reconciler/src/forks/ReactFiberConfig.dom.js  | 1 +
 .../react-reconciler/src/forks/ReactFiberConfig.fabric.js    | 1 +
 .../react-reconciler/src/forks/ReactFiberConfig.native.js    | 1 +
 packages/react-reconciler/src/forks/ReactFiberConfig.test.js | 1 +
 22 files changed, 23 insertions(+), 12 deletions(-)
 rename packages/react-client/src/{ReactFlightClientConsoleConfigBrowser.js => ReactClientConsoleConfigBrowser.js} (100%)
 rename packages/react-client/src/{ReactFlightClientConsoleConfigPlain.js => ReactClientConsoleConfigPlain.js} (100%)
 rename packages/react-client/src/{ReactFlightClientConsoleConfigServer.js => ReactClientConsoleConfigServer.js} (100%)

diff --git a/packages/react-client/src/ReactFlightClientConsoleConfigBrowser.js b/packages/react-client/src/ReactClientConsoleConfigBrowser.js
similarity index 100%
rename from packages/react-client/src/ReactFlightClientConsoleConfigBrowser.js
rename to packages/react-client/src/ReactClientConsoleConfigBrowser.js
diff --git a/packages/react-client/src/ReactFlightClientConsoleConfigPlain.js b/packages/react-client/src/ReactClientConsoleConfigPlain.js
similarity index 100%
rename from packages/react-client/src/ReactFlightClientConsoleConfigPlain.js
rename to packages/react-client/src/ReactClientConsoleConfigPlain.js
diff --git a/packages/react-client/src/ReactFlightClientConsoleConfigServer.js b/packages/react-client/src/ReactClientConsoleConfigServer.js
similarity index 100%
rename from packages/react-client/src/ReactFlightClientConsoleConfigServer.js
rename to packages/react-client/src/ReactClientConsoleConfigServer.js
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
index 87d87ea523e59..7ae8d5f5cdc7d 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
-export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
 export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
index 97b4afd13a835..28e2489cf22bb 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
-export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackBrowser';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackBrowser';
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
index 51c832bff43a3..3a5ec6800fd57 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
-export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackBrowser';
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js
index 50713ae8e8e68..461996a2e0887 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
-export * from 'react-client/src/ReactFlightClientConsoleConfigPlain';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 
 export type Response = any;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
index 269f8ec0c2313..c08af0a6531de 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
-export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
index cafa02b686214..db8da42686215 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
-export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
index 017dc33081d5f..ddf6440a20e48 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
-export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 
 export type Response = any;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
index 6c68ae163bb51..bf2071d6fc864 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
-export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
 export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js
index f1e7d66ee8117..16f649249dd37 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
-export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
index c6da80ef6060f..68047af97b9f8 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
-export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerNode';
 export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js
index 95fd1590ab5c6..37a5322140a8a 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
-export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
index 41c7e8e1d4706..867612c0ac2d7 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
@@ -8,7 +8,7 @@
  */
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
-export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
+export * from 'react-client/src/ReactClientConsoleConfigServer';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode';
 export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 9f8472df40e3b..421a48ec2d187 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -635,6 +635,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     NotPendingTransition: (null: TransitionStatus),
 
     resetFormInstance(form: Instance) {},
+
+    printToConsole(methodName, args, badgeName) {
+      // eslint-disable-next-line react-internal/no-production-logging
+      console[methodName].apply(console, args);
+    },
   };
 
   const hostConfig = useMutation
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.art.js b/packages/react-reconciler/src/forks/ReactFiberConfig.art.js
index 867ca996ec5af..1fb43b5ade8d3 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.art.js
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.art.js
@@ -8,3 +8,4 @@
  */
 
 export * from 'react-art/src/ReactFiberConfigART';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
index 7ba17939736de..b83c958a28938 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
@@ -80,6 +80,7 @@ export const suspendInstance = $$$config.suspendInstance;
 export const waitForCommitToBeReady = $$$config.waitForCommitToBeReady;
 export const NotPendingTransition = $$$config.NotPendingTransition;
 export const resetFormInstance = $$$config.resetFormInstance;
+export const printToConsole = $$$config.printToConsole;
 
 // -------------------
 //      Microtasks
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.dom.js b/packages/react-reconciler/src/forks/ReactFiberConfig.dom.js
index 4932b1a787bb9..fa7dbe3123284 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.dom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.dom.js
@@ -8,3 +8,4 @@
  */
 
 export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.fabric.js b/packages/react-reconciler/src/forks/ReactFiberConfig.fabric.js
index f1787a68e845b..2fb8768972da4 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.fabric.js
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.fabric.js
@@ -8,3 +8,4 @@
  */
 
 export * from 'react-native-renderer/src/ReactFiberConfigFabric';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.native.js b/packages/react-reconciler/src/forks/ReactFiberConfig.native.js
index 3f8a28688b716..3e06abc660ef7 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.native.js
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.native.js
@@ -8,3 +8,4 @@
  */
 
 export * from 'react-native-renderer/src/ReactFiberConfigNative';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.test.js b/packages/react-reconciler/src/forks/ReactFiberConfig.test.js
index 85020417c2c7d..238434a50df8c 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.test.js
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.test.js
@@ -8,3 +8,4 @@
  */
 
 export * from 'react-test-renderer/src/ReactFiberConfigTestHost';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';

From 233bafd75d7822edbbb5227ecb0c576b49b869b4 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 10 Jun 2024 20:35:48 -0400
Subject: [PATCH 03/10] Log error/warn to our consoleWithStackDev

This way this helper can use component stacks when available.
---
 .../src/ReactClientConsoleConfigBrowser.js        | 15 ++++++++++++---
 .../src/ReactClientConsoleConfigPlain.js          | 15 ++++++++++++---
 .../src/ReactClientConsoleConfigServer.js         | 15 ++++++++++++---
 packages/react-client/src/ReactFlightClient.js    |  2 ++
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/react-client/src/ReactClientConsoleConfigBrowser.js b/packages/react-client/src/ReactClientConsoleConfigBrowser.js
index cc934685c8f7b..bff05326edb37 100644
--- a/packages/react-client/src/ReactClientConsoleConfigBrowser.js
+++ b/packages/react-client/src/ReactClientConsoleConfigBrowser.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import {warn, error} from 'shared/consoleWithStackDev';
+
 const badgeFormat = '%c%s%c ';
 // Same badge styling as DevTools.
 const badgeStyle =
@@ -63,7 +65,14 @@ export function printToConsole(
     );
   }
 
-  // eslint-disable-next-line react-internal/no-production-logging
-  console[methodName].apply(console, newArgs);
-  return;
+  if (methodName === 'error') {
+    // eslint-disable-next-line react-internal/no-production-logging
+    error.apply(console, newArgs);
+  } else if (methodName === 'warn') {
+    // eslint-disable-next-line react-internal/no-production-logging
+    warn.apply(console, newArgs);
+  } else {
+    // eslint-disable-next-line react-internal/no-production-logging
+    console[methodName].apply(console, newArgs);
+  }
 }
diff --git a/packages/react-client/src/ReactClientConsoleConfigPlain.js b/packages/react-client/src/ReactClientConsoleConfigPlain.js
index 1dbdec54cd078..7c6290bb0f989 100644
--- a/packages/react-client/src/ReactClientConsoleConfigPlain.js
+++ b/packages/react-client/src/ReactClientConsoleConfigPlain.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import {warn, error} from 'shared/consoleWithStackDev';
+
 const badgeFormat = '[%s] ';
 const pad = ' ';
 
@@ -44,7 +46,14 @@ export function printToConsole(
     newArgs.splice(offset, 0, badgeFormat, pad + badgeName + pad);
   }
 
-  // eslint-disable-next-line react-internal/no-production-logging
-  console[methodName].apply(console, newArgs);
-  return;
+  if (methodName === 'error') {
+    // eslint-disable-next-line react-internal/no-production-logging
+    error.apply(console, newArgs);
+  } else if (methodName === 'warn') {
+    // eslint-disable-next-line react-internal/no-production-logging
+    warn.apply(console, newArgs);
+  } else {
+    // eslint-disable-next-line react-internal/no-production-logging
+    console[methodName].apply(console, newArgs);
+  }
 }
diff --git a/packages/react-client/src/ReactClientConsoleConfigServer.js b/packages/react-client/src/ReactClientConsoleConfigServer.js
index 7567483245fa6..ff93f8836854c 100644
--- a/packages/react-client/src/ReactClientConsoleConfigServer.js
+++ b/packages/react-client/src/ReactClientConsoleConfigServer.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import {warn, error} from 'shared/consoleWithStackDev';
+
 // 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.
@@ -64,7 +66,14 @@ export function printToConsole(
     );
   }
 
-  // eslint-disable-next-line react-internal/no-production-logging
-  console[methodName].apply(console, newArgs);
-  return;
+  if (methodName === 'error') {
+    // eslint-disable-next-line react-internal/no-production-logging
+    error.apply(console, newArgs);
+  } else if (methodName === 'warn') {
+    // eslint-disable-next-line react-internal/no-production-logging
+    warn.apply(console, newArgs);
+  } else {
+    // eslint-disable-next-line react-internal/no-production-logging
+    console[methodName].apply(console, newArgs);
+  }
 }
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index f83317254c508..e285dee32d28a 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -2060,6 +2060,8 @@ function resolveConsoleEntry(
       task.run(callStack);
       return;
     }
+    // TODO: Set the current owner so that consoleWithStackDev adds the component
+    // stack during the replay - if needed.
   }
   const rootTask = response._debugRootTask;
   if (rootTask != null) {

From a66d878316b7889678f5ce1a07dd05e1ea3a4326 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 10 Jun 2024 21:26:57 -0400
Subject: [PATCH 04/10] Add Environment Badge in defaultOnCaughtError Logging

That way your typical log of an error that originated on the Server gets
a `[Server]` badge.

Unfortunately because defaultOnUncaughtError and defaultOnRecoverableError
doesn't use custom logging but goes through reportError. There's no place
for us to add this kind of formatted badging to the logs.

It's also unfortunate that you'd have to replicate this in user space.
---
 .../src/ReactFiberErrorLogger.js              | 36 +++++++++++++++----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberErrorLogger.js b/packages/react-reconciler/src/ReactFiberErrorLogger.js
index a948e5c79b694..addb0aea43dcd 100644
--- a/packages/react-reconciler/src/ReactFiberErrorLogger.js
+++ b/packages/react-reconciler/src/ReactFiberErrorLogger.js
@@ -20,6 +20,8 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
 
+import {printToConsole} from './ReactFiberConfig';
+
 // Side-channel since I'm not sure we want to make this part of the public API
 let componentName: null | string = null;
 let errorBoundaryName: null | string = null;
@@ -94,13 +96,33 @@ export function defaultOnCaughtError(
       }.`;
 
     if (enableOwnerStacks) {
-      console.error(
-        '%o\n\n%s\n\n%s\n',
-        error,
-        componentNameMessage,
-        recreateMessage,
-        // We let our consoleWithStackDev wrapper add the component stack to the end.
-      );
+      if (
+        typeof error === 'object' &&
+        error !== null &&
+        typeof error.environmentName === 'string'
+      ) {
+        // This was a Server error. We print the environment name in a badge just like we do with
+        // replays of console logs to indicate that the source of this throw as actually the Server.
+        printToConsole(
+          'error',
+          [
+            '%o\n\n%s\n\n%s\n',
+            error,
+            componentNameMessage,
+            recreateMessage,
+            // We let our consoleWithStackDev wrapper add the component stack to the end.
+          ],
+          error.environmentName,
+        );
+      } else {
+        console.error(
+          '%o\n\n%s\n\n%s\n',
+          error,
+          componentNameMessage,
+          recreateMessage,
+          // We let our consoleWithStackDev wrapper add the component stack to the end.
+        );
+      }
     } else {
       // The current Fiber is disconnected at this point which means that console printing
       // cannot add a component stack since it terminates at the deletion node. This is not

From d1a3f38d817e9c4300c6932878f2145d03b62adf Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 10 Jun 2024 21:43:59 -0400
Subject: [PATCH 05/10] Same thing in Fizz

---
 packages/react-server/src/ReactFizzServer.js        | 13 ++++++++++++-
 .../src/forks/ReactFizzConfig.custom.js             |  2 ++
 .../src/forks/ReactFizzConfig.dom-edge.js           |  2 ++
 .../src/forks/ReactFizzConfig.dom-legacy.js         |  2 ++
 .../src/forks/ReactFizzConfig.dom-node.js           |  2 ++
 .../react-server/src/forks/ReactFizzConfig.dom.js   |  2 ++
 6 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index eedae9a46f1b0..75b195e1e25fb 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -78,6 +78,7 @@ import {
   resetResumableState,
   completeResumableState,
   emitEarlyPreloads,
+  printToConsole,
 } from './ReactFizzConfig';
 import {
   constructClassInstance,
@@ -363,7 +364,17 @@ export opaque type Request = {
 const DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800;
 
 function defaultErrorHandler(error: mixed) {
-  console['error'](error); // Don't transform to our wrapper
+  if (
+    typeof error === 'object' &&
+    error !== null &&
+    typeof error.environmentName === 'string'
+  ) {
+    // This was a Server error. We print the environment name in a badge just like we do with
+    // replays of console logs to indicate that the source of this throw as actually the Server.
+    printToConsole('error', [error], error.environmentName);
+  } else {
+    console['error'](error); // Don't transform to our wrapper
+  }
   return null;
 }
 
diff --git a/packages/react-server/src/forks/ReactFizzConfig.custom.js b/packages/react-server/src/forks/ReactFizzConfig.custom.js
index 495a74fb18656..650ff5f273aaf 100644
--- a/packages/react-server/src/forks/ReactFizzConfig.custom.js
+++ b/packages/react-server/src/forks/ReactFizzConfig.custom.js
@@ -40,6 +40,8 @@ export const isPrimaryRenderer = false;
 export const supportsRequestStorage = false;
 export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
 
+export const printToConsole = $$$config.printToConsole;
+
 export const resetResumableState = $$$config.resetResumableState;
 export const completeResumableState = $$$config.completeResumableState;
 export const getChildFormatContext = $$$config.getChildFormatContext;
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-edge.js b/packages/react-server/src/forks/ReactFizzConfig.dom-edge.js
index 7c5ba9bce7e27..244202002edd7 100644
--- a/packages/react-server/src/forks/ReactFizzConfig.dom-edge.js
+++ b/packages/react-server/src/forks/ReactFizzConfig.dom-edge.js
@@ -10,6 +10,8 @@ import type {Request} from 'react-server/src/ReactFizzServer';
 
 export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+
 // For now, we get this from the global scope, but this will likely move to a module.
 export const supportsRequestStorage = typeof AsyncLocalStorage === 'function';
 export const requestStorage: AsyncLocalStorage<Request | void> =
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-legacy.js b/packages/react-server/src/forks/ReactFizzConfig.dom-legacy.js
index 84d49396efcdf..5695669839f81 100644
--- a/packages/react-server/src/forks/ReactFizzConfig.dom-legacy.js
+++ b/packages/react-server/src/forks/ReactFizzConfig.dom-legacy.js
@@ -10,5 +10,7 @@ import type {Request} from 'react-server/src/ReactFizzServer';
 
 export * from 'react-dom-bindings/src/server/ReactFizzConfigDOMLegacy';
 
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
+
 export const supportsRequestStorage = false;
 export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom-node.js b/packages/react-server/src/forks/ReactFizzConfig.dom-node.js
index 8c9718e8234c3..5ee4566ad09ba 100644
--- a/packages/react-server/src/forks/ReactFizzConfig.dom-node.js
+++ b/packages/react-server/src/forks/ReactFizzConfig.dom-node.js
@@ -13,6 +13,8 @@ import type {Request} from 'react-server/src/ReactFizzServer';
 
 export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
+export * from 'react-client/src/ReactClientConsoleConfigServer';
+
 export const supportsRequestStorage = true;
 export const requestStorage: AsyncLocalStorage<Request | void> =
   new AsyncLocalStorage();
diff --git a/packages/react-server/src/forks/ReactFizzConfig.dom.js b/packages/react-server/src/forks/ReactFizzConfig.dom.js
index 2bf9be13273d6..17ddc166a7922 100644
--- a/packages/react-server/src/forks/ReactFizzConfig.dom.js
+++ b/packages/react-server/src/forks/ReactFizzConfig.dom.js
@@ -10,5 +10,7 @@ import type {Request} from 'react-server/src/ReactFizzServer';
 
 export * from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
+
 export const supportsRequestStorage = false;
 export const requestStorage: AsyncLocalStorage<Request | void> = (null: any);

From 31ded8fd846cf57f36a88fb2f19ecfeb8ff3052e Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 10 Jun 2024 22:14:59 -0400
Subject: [PATCH 06/10] Ignore error

---
 packages/internal-test-utils/shouldIgnoreConsoleError.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/internal-test-utils/shouldIgnoreConsoleError.js b/packages/internal-test-utils/shouldIgnoreConsoleError.js
index 383650d25a0b7..e29fd2146ba4d 100644
--- a/packages/internal-test-utils/shouldIgnoreConsoleError.js
+++ b/packages/internal-test-utils/shouldIgnoreConsoleError.js
@@ -3,6 +3,10 @@
 module.exports = function shouldIgnoreConsoleError(format, args) {
   if (__DEV__) {
     if (typeof format === 'string') {
+      if (format.startsWith('%c%s%c')) {
+        // Looks like a badged error message
+        args.splice(0, 3);
+      }
       if (
         args[0] != null &&
         ((typeof args[0] === 'object' &&

From 5d99faca4d2bea90336e74bc4a867e02f9e358bb Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 10 Jun 2024 22:26:05 -0400
Subject: [PATCH 07/10] Allow arg mismatches

---
 packages/internal-test-utils/consoleMock.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/internal-test-utils/consoleMock.js b/packages/internal-test-utils/consoleMock.js
index 45a59d2b4cb29..328cf3d90d0c4 100644
--- a/packages/internal-test-utils/consoleMock.js
+++ b/packages/internal-test-utils/consoleMock.js
@@ -418,13 +418,18 @@ export function createLogAssertion(
         let argIndex = 0;
         // console.* could have been called with a non-string e.g. `console.error(new Error())`
         // eslint-disable-next-line react-internal/safe-string-coercion
-        String(format).replace(/%s/g, () => argIndex++);
+        String(format).replace(/%s|%c/g, () => argIndex++);
         if (argIndex !== args.length) {
-          logsMismatchingFormat.push({
-            format,
-            args,
-            expectedArgCount: argIndex,
-          });
+          if (format.includes('%c%s')) {
+            // We intentionally use mismatching formatting when printing badging because we don't know
+            // the best default to use for different types because the default varies by platform.
+          } else {
+            logsMismatchingFormat.push({
+              format,
+              args,
+              expectedArgCount: argIndex,
+            });
+          }
         }
 
         // Check for extra component stacks

From 4bcac7ec48b07b0c37e579cfc870d3ecd9be0729 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Tue, 11 Jun 2024 21:29:28 -0400
Subject: [PATCH 08/10] Align shouldIgnoreConsole opt-out

---
 packages/internal-test-utils/shouldIgnoreConsoleError.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/internal-test-utils/shouldIgnoreConsoleError.js b/packages/internal-test-utils/shouldIgnoreConsoleError.js
index e29fd2146ba4d..0b5798d241a1d 100644
--- a/packages/internal-test-utils/shouldIgnoreConsoleError.js
+++ b/packages/internal-test-utils/shouldIgnoreConsoleError.js
@@ -3,7 +3,7 @@
 module.exports = function shouldIgnoreConsoleError(format, args) {
   if (__DEV__) {
     if (typeof format === 'string') {
-      if (format.startsWith('%c%s%c')) {
+      if (format.startsWith('%c%s')) {
         // Looks like a badged error message
         args.splice(0, 3);
       }

From a3d6ef28bd64f09133869483d920278c51bd0caa Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Wed, 12 Jun 2024 10:58:11 -0400
Subject: [PATCH 09/10] Fix env name

---
 packages/react-server/src/ReactFlightServer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 7c833137c83bd..1ac94765454c5 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -2776,7 +2776,7 @@ function emitErrorChunk(
   if (__DEV__) {
     let message;
     let stack = '';
-    let env = request.environmentName;
+    let env = request.environmentName();
     try {
       if (error instanceof Error) {
         // eslint-disable-next-line react-internal/safe-string-coercion

From 218f42430a1a07674bb8f377b4a8348eddfd7dc5 Mon Sep 17 00:00:00 2001
From: eps1lon <sebastian.silbermann@vercel.com>
Date: Wed, 19 Jun 2024 17:49:14 +0200
Subject: [PATCH 10/10] Explicitly assert on badged errors instead of ignoring
 badged errors

---
 .../shouldIgnoreConsoleError.js                  |  4 ----
 .../src/__tests__/ReactFlightDOM-test.js         | 16 ++++++++++++++++
 .../src/__tests__/ReactFlightDOMBrowser-test.js  | 16 ++++++++++++++++
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/internal-test-utils/shouldIgnoreConsoleError.js b/packages/internal-test-utils/shouldIgnoreConsoleError.js
index 0b5798d241a1d..383650d25a0b7 100644
--- a/packages/internal-test-utils/shouldIgnoreConsoleError.js
+++ b/packages/internal-test-utils/shouldIgnoreConsoleError.js
@@ -3,10 +3,6 @@
 module.exports = function shouldIgnoreConsoleError(format, args) {
   if (__DEV__) {
     if (typeof format === 'string') {
-      if (format.startsWith('%c%s')) {
-        // Looks like a badged error message
-        args.splice(0, 3);
-      }
       if (
         args[0] != null &&
         ((typeof args[0] === 'object' &&
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 3bf8e02e0f687..57f50ea47723d 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -841,6 +841,10 @@ describe('ReactFlightDOM', () => {
         expectedGamesValue,
     );
 
+    if (gate(flags => flags.enableOwnerStacks)) {
+      // TODO: assertConsoleServerErrorDev
+      assertConsoleErrorDev([theError.message]);
+    }
     expect(reportedErrors).toEqual([theError]);
     reportedErrors = [];
 
@@ -1129,6 +1133,10 @@ describe('ReactFlightDOM', () => {
       expect(container.innerHTML).toBe('<p>digest("for reasons")</p>');
     }
 
+    if (gate(flags => flags.enableOwnerStacks)) {
+      // TODO: assertConsoleServerErrorDev
+      assertConsoleErrorDev(['for reasons']);
+    }
     expect(reportedErrors).toEqual(['for reasons']);
   });
 
@@ -1303,6 +1311,10 @@ describe('ReactFlightDOM', () => {
       expect(container.innerHTML).toBe('<p>digest("bug in the bundler")</p>');
     }
 
+    if (gate(flags => flags.enableOwnerStacks)) {
+      // TODO: assertConsoleServerErrorDev
+      assertConsoleErrorDev(['bug in the bundler']);
+    }
     expect(reportedErrors).toEqual(['bug in the bundler']);
   });
 
@@ -1419,6 +1431,10 @@ describe('ReactFlightDOM', () => {
         ? '<p>Server throw + a dev digest</p>'
         : '<p>digest("Server throw")</p>',
     );
+    if (gate(flags => flags.enableOwnerStacks)) {
+      // TODO: assertConsoleServerErrorDev
+      assertConsoleErrorDev([theError.message]);
+    }
     expect(reportedErrors).toEqual([theError]);
   });
 
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 90393e435e91f..cc728ebcbec4c 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -24,6 +24,7 @@ let serverExports;
 let webpackMap;
 let webpackServerMap;
 let act;
+let assertConsoleErrorDev;
 let React;
 let ReactDOM;
 let ReactDOMClient;
@@ -69,6 +70,8 @@ describe('ReactFlightDOMBrowser', () => {
     patchMessageChannel(Scheduler);
 
     act = require('internal-test-utils').act;
+    assertConsoleErrorDev =
+      require('internal-test-utils').assertConsoleErrorDev;
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
@@ -566,6 +569,10 @@ describe('ReactFlightDOMBrowser', () => {
         gamesExpectedValue,
     );
 
+    if (gate(flags => flags.enableOwnerStacks)) {
+      // TODO: assertConsoleServerErrorDev
+      assertConsoleErrorDev([theError.message]);
+    }
     expect(reportedErrors).toEqual([theError]);
     reportedErrors = [];
 
@@ -790,6 +797,10 @@ describe('ReactFlightDOMBrowser', () => {
       : '<p>digest("for reasons")</p>';
     expect(container.innerHTML).toBe(expectedValue);
 
+    if (gate(flags => flags.enableOwnerStacks)) {
+      // TODO: assertConsoleServerErrorDev
+      assertConsoleErrorDev(['for reasons']);
+    }
     expect(reportedErrors).toEqual(['for reasons']);
   });
 
@@ -954,6 +965,11 @@ describe('ReactFlightDOMBrowser', () => {
     expect(container.innerHTML).toBe(
       __DEV__ ? 'Oops! + a dev digest' : 'digest("Oops!")',
     );
+
+    if (gate(flags => flags.enableOwnerStacks)) {
+      // TODO: assertConsoleServerErrorDev
+      assertConsoleErrorDev(['Oops!']);
+    }
     expect(reportedErrors.length).toBe(1);
     expect(reportedErrors[0].message).toBe('Oops!');
   });