From 21272a680f07cb69873eb3668e7baaebfcf05606 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Sun, 19 Oct 2025 23:42:38 -0700 Subject: [PATCH] Lower case "rsc stream" debug info (#34921) This is an aesthetic thing. Most simple I/O entries are things like "script", "stylesheet", "fetch" etc. which are all a single word and lower case. The "RSC stream" name sticks out and draws unnecessary attention to itself where as it's really the least interesting to look at. I don't love the name because I'm not sure how to explain it. It's really mainly the byte size of the payload itself without considering things like server awaits things which will have their own cause. So I'm trying to communicate the download size of the stream of downloading the `.rsc` file or the `"rsc stream"`. --- packages/internal-test-utils/debugInfo.js | 4 ++-- .../react-client/src/ReactFlightClient.js | 2 +- .../src/backend/fiber/renderer.js | 10 ++++++-- .../ReactFlightAsyncDebugInfo-test.js | 24 +++++++++---------- 4 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/internal-test-utils/debugInfo.js b/packages/internal-test-utils/debugInfo.js index 7b9c730ba6..75183ce4b6 100644 --- a/packages/internal-test-utils/debugInfo.js +++ b/packages/internal-test-utils/debugInfo.js @@ -64,7 +64,7 @@ function normalizeIOInfo(config: DebugInfoConfig, ioInfo) { if (promise) { promise.then(); // init if (promise.status === 'fulfilled') { - if (ioInfo.name === 'RSC stream') { + if (ioInfo.name === 'rsc stream') { copy.byteSize = 0; copy.value = { value: 'stream', @@ -117,7 +117,7 @@ export function getDebugInfo(config: DebugInfoConfig, obj) { for (let i = 0; i < debugInfo.length; i++) { if ( debugInfo[i].awaited && - debugInfo[i].awaited.name === 'RSC stream' && + debugInfo[i].awaited.name === 'rsc stream' && config.ignoreRscStreamInfo ) { // Ignore RSC stream I/O info. diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 8bcabfb556..c7506a13e5 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -2721,7 +2721,7 @@ export function createStreamState( (debugValuePromise: any).status = 'fulfilled'; (debugValuePromise: any).value = streamDebugValue; streamState._debugInfo = { - name: 'RSC stream', + name: 'rsc stream', start: response._debugStartTime, end: response._debugStartTime, // will be updated once we finish a chunk byteSize: 0, // will be updated as we resolve a data chunk diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 4a61fba652..fe8722da56 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -6171,7 +6171,10 @@ export function attach( } } const newIO = asyncInfo.awaited; - if (newIO.name === 'RSC stream' && newIO.value != null) { + if ( + (newIO.name === 'RSC stream' || newIO.name === 'rsc stream') && + newIO.value != null + ) { const streamPromise = newIO.value; // Special case RSC stream entries to pick the last entry keyed by the stream. const existingEntry = streamEntries.get(streamPromise); @@ -6230,7 +6233,10 @@ export function attach( continue; } foundIOEntries.add(ioInfo); - if (ioInfo.name === 'RSC stream' && ioInfo.value != null) { + if ( + (ioInfo.name === 'RSC stream' || ioInfo.name === 'rsc stream') && + ioInfo.value != null + ) { const streamPromise = ioInfo.value; // Special case RSC stream entries to pick the last entry keyed by the stream. const existingEntry = streamEntries.get(streamPromise); diff --git a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js index 00c6f78503..db1d7af3a6 100644 --- a/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js +++ b/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js @@ -459,7 +459,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -867,7 +867,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -985,7 +985,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -1460,7 +1460,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "byteSize": 0, "end": 0, "env": "Server", - "name": "RSC stream", + "name": "rsc stream", "start": 0, "value": { "value": "stream", @@ -1475,7 +1475,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -1789,7 +1789,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2083,7 +2083,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2499,7 +2499,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2665,7 +2665,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -2845,7 +2845,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -3130,7 +3130,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": { @@ -3275,7 +3275,7 @@ describe('ReactFlightAsyncDebugInfo', () => { "awaited": { "byteSize": 0, "end": 0, - "name": "RSC stream", + "name": "rsc stream", "owner": null, "start": 0, "value": {