From 8e9de898d3a8a0945fcdc1a02959560bce2bbc30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 4 Jul 2024 12:15:35 -0400 Subject: [PATCH] [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. --- packages/react-client/src/ReactFlightClient.js | 9 +++++++++ packages/react-html/src/ReactHTMLServer.js | 1 + .../react-noop-renderer/src/ReactNoopFlightClient.js | 11 ++++++++++- .../src/ReactFlightDOMClientBrowser.js | 2 ++ .../src/ReactFlightDOMClientNode.js | 2 ++ .../src/ReactFlightDOMClientBrowser.js | 2 ++ .../src/ReactFlightDOMClientEdge.js | 2 ++ .../src/ReactFlightDOMClientNode.js | 2 ++ .../src/ReactFlightDOMClientBrowser.js | 2 ++ .../src/ReactFlightDOMClientEdge.js | 2 ++ .../src/ReactFlightDOMClientNode.js | 2 ++ 11 files changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 3cb918d6c8..da835412f1 100644 --- 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(chunk: SomeChunk): T { @@ -1278,6 +1279,7 @@ function ResponseInstance( nonce: void | string, temporaryReferences: void | TemporaryReferenceSet, findSourceMapURL: void | FindSourceMapURLCallback, + replayConsole: boolean, ) { const chunks: Map> = 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 index 6bea571338..8f62075124 100644 --- 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 index afb3eb4760..4065bd4957 100644 --- 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(source: Source): Thenable { - 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 index 56d98e6517..e9ad4d4925 100644 --- 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 index 7bcc12d94b..0a66776830 100644 --- 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( @@ -68,6 +69,7 @@ function createFromNodeStream( __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 index 1aac84fde6..99bebcb87f 100644 --- 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 index c6336f7e42..13b1daaa56 100644 --- 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 index d0fb59c51e..da335e3df4 100644 --- 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( @@ -77,6 +78,7 @@ function createFromNodeStream( __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 index 1aac84fde6..99bebcb87f 100644 --- 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 index c6336f7e42..13b1daaa56 100644 --- 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 index e7beb9586a..38bd585aad 100644 --- 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( @@ -78,6 +79,7 @@ function createFromNodeStream( __DEV__ && options && options.findSourceMapURL ? options.findSourceMapURL : undefined, + __DEV__ && options ? options.replayConsoleLogs === true : false, // defaults to false ); stream.on('data', chunk => { if (typeof chunk === 'string') {