[Flight] Add option to replay console logs or not (#30207)

Defaults to true in browser builds, otherwise defaults to false. The assumption is that the server logs will already contain a log from the original Flight server. We currently always replay console logs but this leads to duplicates on the server by default when you use SSR, because the Flight Client on the server replays the logs. This can be nice since those logs gets badged. It can also be nice if they're running in separate servers but when they're logging to the same stream it's annoying. Which is really the typical set up so we should just make that the default but leave it configurable.
facebook · Jul 4, 2024 · 8e9de89 · 8e9de89
1 parent 3da2616
commit 8e9de89
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 1 deletion.
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
@@ -250,6 +250,7 @@ export type Response = {
   _tempRefs: void | TemporaryReferenceSet, // the set temporary references can be resolved from
   _debugRootTask?: null | ConsoleTask, // DEV-only
   _debugFindSourceMapURL?: void | FindSourceMapURLCallback, // DEV-only
+  _replayConsole: boolean, // DEV-only
 };
 
 function readChunk<T>(chunk: SomeChunk<T>): T {
@@ -1278,6 +1279,7 @@ function ResponseInstance(
   nonce: void | string,
   temporaryReferences: void | TemporaryReferenceSet,
   findSourceMapURL: void | FindSourceMapURLCallback,
+  replayConsole: boolean,
 ) {
   const chunks: Map<number, SomeChunk<any>> = new Map();
   this._bundlerConfig = bundlerConfig;
@@ -1304,6 +1306,7 @@ function ResponseInstance(
   }
   if (__DEV__) {
     this._debugFindSourceMapURL = findSourceMapURL;
+    this._replayConsole = replayConsole;
   }
   // Don't inline this call because it causes closure to outline the call above.
   this._fromJSON = createFromJSONCallback(this);
@@ -1317,6 +1320,7 @@ export function createResponse(
   nonce: void | string,
   temporaryReferences: void | TemporaryReferenceSet,
   findSourceMapURL: void | FindSourceMapURLCallback,
+  replayConsole: boolean,
 ): Response {
   // $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructors
   return new ResponseInstance(
@@ -1327,6 +1331,7 @@ export function createResponse(
     nonce,
     temporaryReferences,
     findSourceMapURL,
+    replayConsole,
   );
 }
 
@@ -2034,6 +2039,10 @@ function resolveConsoleEntry(
     );
   }
 
+  if (!response._replayConsole) {
+    return;
+  }
+
   const payload: [string, string, null | ReactComponentInfo, string, mixed] =
     parseModel(response, value);
   const methodName = payload[0];

diff --git a/packages/react-html/src/ReactHTMLServer.js b/packages/react-html/src/ReactHTMLServer.js
@@ -179,6 +179,7 @@ export function renderToMarkup(
       undefined,
       undefined,
       undefined,
+      false,
     );
     const resumableState = createResumableState(
       options ? options.identifierPrefix : undefined,

diff --git a/packages/react-noop-renderer/src/ReactNoopFlightClient.js b/packages/react-noop-renderer/src/ReactNoopFlightClient.js
@@ -50,7 +50,16 @@ const {createResponse, processBinaryChunk, getRoot, close} = ReactFlightClient({
 });
 
 function read<T>(source: Source): Thenable<T> {
-  const response = createResponse(source, null);
+  const response = createResponse(
+    source,
+    null,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    true,
+  );
   for (let i = 0; i < source.length; i++) {
     processBinaryChunk(response, source[i], 0);
   }

diff --git a/packages/react-server-dom-esm/src/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-esm/src/ReactFlightDOMClientBrowser.js
@@ -42,6 +42,7 @@ export type Options = {
   callServer?: CallServerCallback,
   temporaryReferences?: TemporaryReferenceSet,
   findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
 };
 
 function createResponseFromOptions(options: void | Options) {
@@ -57,6 +58,7 @@ function createResponseFromOptions(options: void | Options) {
     __DEV__ && options && options.findSourceMapURL
       ? options.findSourceMapURL
       : undefined,
+    __DEV__ ? (options ? options.replayConsoleLogs !== false : true) : false, // defaults to true
   );
 }
 

diff --git a/packages/react-server-dom-esm/src/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/ReactFlightDOMClientNode.js
@@ -50,6 +50,7 @@ export type Options = {
   nonce?: string,
   encodeFormAction?: EncodeFormActionCallback,
   findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
 };
 
 function createFromNodeStream<T>(
@@ -68,6 +69,7 @@ function createFromNodeStream<T>(
     __DEV__ && options && options.findSourceMapURL
       ? options.findSourceMapURL
       : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
   );
   stream.on('data', chunk => {
     processBinaryChunk(response, chunk);

diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-turbopack/src/ReactFlightDOMClientBrowser.js
@@ -41,6 +41,7 @@ export type Options = {
   callServer?: CallServerCallback,
   temporaryReferences?: TemporaryReferenceSet,
   findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
 };
 
 function createResponseFromOptions(options: void | Options) {
@@ -56,6 +57,7 @@ function createResponseFromOptions(options: void | Options) {
     __DEV__ && options && options.findSourceMapURL
       ? options.findSourceMapURL
       : undefined,
+    __DEV__ ? (options ? options.replayConsoleLogs !== false : true) : false, // defaults to true
   );
 }
 

diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMClientEdge.js b/packages/react-server-dom-turbopack/src/ReactFlightDOMClientEdge.js
@@ -71,6 +71,7 @@ export type Options = {
   encodeFormAction?: EncodeFormActionCallback,
   temporaryReferences?: TemporaryReferenceSet,
   findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
 };
 
 function createResponseFromOptions(options: Options) {
@@ -86,6 +87,7 @@ function createResponseFromOptions(options: Options) {
     __DEV__ && options && options.findSourceMapURL
       ? options.findSourceMapURL
       : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
   );
 }
 

diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/ReactFlightDOMClientNode.js
@@ -60,6 +60,7 @@ export type Options = {
   nonce?: string,
   encodeFormAction?: EncodeFormActionCallback,
   findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
 };
 
 function createFromNodeStream<T>(
@@ -77,6 +78,7 @@ function createFromNodeStream<T>(
     __DEV__ && options && options.findSourceMapURL
       ? options.findSourceMapURL
       : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
   );
   stream.on('data', chunk => {
     processBinaryChunk(response, chunk);

diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClientBrowser.js
@@ -41,6 +41,7 @@ export type Options = {
   callServer?: CallServerCallback,
   temporaryReferences?: TemporaryReferenceSet,
   findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
 };
 
 function createResponseFromOptions(options: void | Options) {
@@ -56,6 +57,7 @@ function createResponseFromOptions(options: void | Options) {
     __DEV__ && options && options.findSourceMapURL
       ? options.findSourceMapURL
       : undefined,
+    __DEV__ ? (options ? options.replayConsoleLogs !== false : true) : false, // defaults to true
   );
 }
 

diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js
@@ -71,6 +71,7 @@ export type Options = {
   encodeFormAction?: EncodeFormActionCallback,
   temporaryReferences?: TemporaryReferenceSet,
   findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
 };
 
 function createResponseFromOptions(options: Options) {
@@ -86,6 +87,7 @@ function createResponseFromOptions(options: Options) {
     __DEV__ && options && options.findSourceMapURL
       ? options.findSourceMapURL
       : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
   );
 }
 

diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js
@@ -61,6 +61,7 @@ export type Options = {
   nonce?: string,
   encodeFormAction?: EncodeFormActionCallback,
   findSourceMapURL?: FindSourceMapURLCallback,
+  replayConsoleLogs?: boolean,
 };
 
 function createFromNodeStream<T>(
@@ -78,6 +79,7 @@ function createFromNodeStream<T>(
     __DEV__ && options && options.findSourceMapURL
       ? options.findSourceMapURL
       : undefined,
+    __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false
   );
   stream.on('data', chunk => {
     if (typeof chunk === 'string') {