[Flight] Instrument the Console in the RSC Environment and Replay Logs on the Client

packages/react-client/src/ReactFlightClient.js

@@ -670,6 +670,10 @@ function parseModelString(
       }
       case '@': {
         // Promise
+        if (value.length === 2) {
+          // Infinite promise that never resolves.
+          return new Promise(() => {});
+        }
         const id = parseInt(value.slice(2), 16);
         const chunk = getChunk(response, id);
         return chunk;
@@ -725,6 +729,21 @@ function parseModelString(
         // BigInt
         return BigInt(value.slice(2));
       }
+      case 'E': {
+        if (__DEV__) {
+          // In DEV mode we allow indirect eval to produce functions for logging.
+          // This should not compile to eval() because then it has local scope access.
+          try {
+            // eslint-disable-next-line no-eval
+            return (0, eval)(value.slice(2));
+          } catch (x) {
+            // We currently use this to express functions so we fail parsing it,
+            // let's just return a blank function as a place holder.
+            return function () {};
+          }
+        }
+        // Fallthrough
+      }
       default: {
         // We assume that anything else is a reference ID.
         const id = parseInt(value.slice(1), 16);
@@ -1063,6 +1082,27 @@ function resolveDebugInfo(
   chunkDebugInfo.push(debugInfo);
 }
 
+function resolveConsoleEntry(
+  response: Response,
+  value: UninitializedModel,
+): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolveConsoleEntry should never be called in production mode. This is a bug in React.',
+    );
+  }
+
+  const payload: [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);
+}
+
 function mergeBuffer(
   buffer: Array<Uint8Array>,
   lastChunk: Uint8Array,
@@ -1212,6 +1252,13 @@ function processFullRow(
         resolveDebugInfo(response, id, debugInfo);
         return;
       }
+      // Fallthrough to share the error with Console entries.
+    }
+    case 87 /* "W" */: {
+      if (__DEV__) {
+        resolveConsoleEntry(response, row);
+        return;
+      }
       throw new Error(
         'Failed to read a RSC payload created by a development version of React ' +
           'on the server while using a production version on the client. Always use ' +

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -1995,4 +1995,45 @@ describe('ReactFlight', () => {
       </div>,
     );
   });
+
+  // @gate enableServerComponentLogs && __DEV__
+  it('replays logs, but not onError logs', async () => {
+    function foo() {
+      return 'hello';
+    }
+    function ServerComponent() {
+      console.log('hi', {prop: 123, fn: foo});
+      throw new Error('err');
+    }
+
+    let transport;
+    expect(() => {
+      // Reset the modules so that we get a new overridden console on top of the
+      // one installed by expect. This ensures that we still emit console.error
+      // calls.
+      jest.resetModules();
+      jest.mock('react', () => require('react/react.react-server'));
+      ReactServer = require('react');
+      ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+      transport = ReactNoopFlightServer.render({root: <ServerComponent />});
+    }).toErrorDev('err');
+
+    const log = console.log;
+    try {
+      console.log = jest.fn();
+      // The error should not actually get logged because we're not awaiting the root
+      // so it's not thrown but the server log also shouldn't be replayed.
+      await ReactNoopFlightClient.read(transport);
+
+      expect(console.log).toHaveBeenCalledTimes(1);
+      expect(console.log.mock.calls[0][0]).toBe('hi');
+      expect(console.log.mock.calls[0][1].prop).toBe(123);
+      const loggedFn = console.log.mock.calls[0][1].fn;
+      expect(typeof loggedFn).toBe('function');
+      expect(loggedFn).not.toBe(foo);
+      expect(loggedFn.toString()).toBe(foo.toString());
+    } finally {
+      console.log = log;
+    }
+  });
 });