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 3cb918d6c8644..da835412f1e94 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 6bea5713383b6..8f62075124ee1 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 afb3eb4760127..4065bd495797b 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 56d98e65176d9..e9ad4d49250c2 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 7bcc12d94b08d..0a66776830e6c 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 1aac84fde6778..99bebcb87f124 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 c6336f7e42106..13b1daaa56801 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 d0fb59c51e8b6..da335e3df4b38 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 1aac84fde6778..99bebcb87f124 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 c6336f7e42106..13b1daaa56801 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 e7beb9586a65a..38bd585aad8e9 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') {