@samitouri / QOS-React-2 / commits / ead92181bd

[Flight] Avoid unnecessary indirection when serializing debug info (#34797)

When a debug channel is hooked up, and we're serializing debug models, if the result is an already outlined reference, we can emit it directly, without also outlining the reference. This would create an unnecessary indirection. Before: ``` :N1760023808330.2688 0:D"$2" 0:D"$3" 0:D"$4" 0:"hi" 1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}} 2:{"time":3.0989999999999327} 3:"$1" 4:{"time":3.261792000000014} ``` After: ``` :N1760023786873.8916 0:D"$2" 0:D"$1" 0:D"$3" 0:"hi" 1:{"name":"Component","key":null,"env":"Server","stack":[],"props":{}} 2:{"time":2.4145829999999933} 3:{"time":2.5488749999999527} ``` Notice how the second debug info chunk is now directly referencing chunk `1` in the debug channel, without outlining and referencing `"$1"` as its own debug chunk `3`. This not only simplifies the RSC payload, and reduces overhead. But more importantly it helps the client resolve cyclic references when a model has debug info that has a reference back to the model. The client is currently not able to resolve such a cycle when those chunk indirections are involved. Ideally, it would also be able to resolve them regardless, but that requires more work. In the meantime, this fixes an immediate issue.

Hendrik Liebau committed Oct 10, 2025 at 21:44 UTC ead92181bdbecc332a98daa808f341726dcaa414
2 files changed +71 -8
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+56
@@ -3051,4 +3051,60 @@ describe('ReactFlightDOMBrowser', () => {
3051 `);
3052 }
3053 });
3054 +
3055 + it('should resolve a cycle between debug info and the value it produces when using a debug channel', async () => {
3056 + // Same as `should resolve a cycle between debug info and the value it produces`, but using a debug channel.
3057 +
3058 + function Inner({style}) {
3059 + return <div style={style} />;
3060 + }
3061 +
3062 + function Component({style}) {
3063 + return <Inner style={style} />;
3064 + }
3065 +
3066 + const style = {};
3067 + const element = <Component style={style} />;
3068 + style.element = element;
3069 +
3070 + let debugReadableStreamController;
3071 +
3072 + const debugReadableStream = new ReadableStream({
3073 + start(controller) {
3074 + debugReadableStreamController = controller;
3075 + },
3076 + });
3077 +
3078 + const rscStream = await serverAct(() =>
3079 + ReactServerDOMServer.renderToReadableStream(element, webpackMap, {
3080 + debugChannel: {
3081 + writable: new WritableStream({
3082 + write(chunk) {
3083 + debugReadableStreamController.enqueue(chunk);
3084 + },
3085 + close() {
3086 + debugReadableStreamController.close();
3087 + },
3088 + }),
3089 + },
3090 + }),
3091 + );
3092 +
3093 + function ClientRoot({response}) {
3094 + return use(response);
3095 + }
3096 +
3097 + const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
3098 + debugChannel: {readable: debugReadableStream},
3099 + });
3100 +
3101 + const container = document.createElement('div');
3102 + const root = ReactDOMClient.createRoot(container);
3103 +
3104 + await act(() => {
3105 + root.render(<ClientRoot response={response} />);
3106 + });
3107 +
3108 + expect(container.innerHTML).toBe('<div></div>');
3109 + });
3110 });
packages/react-server/src/ReactFlightServer.js
+15 -8
@@ -4300,14 +4300,21 @@ function emitDebugChunk(
4300
4301 const json: string = serializeDebugModel(request, 500, debugInfo);
4302 if (request.debugDestination !== null) {
4303 - // Outline the actual timing information to the debug channel.
4304 - const outlinedId = request.nextChunkId++;
4305 - const debugRow = outlinedId.toString(16) + ':' + json + '\n';
4306 - request.pendingDebugChunks++;
4307 - request.completedDebugChunks.push(stringToChunk(debugRow));
4308 - const row =
4309 - serializeRowHeader('D', id) + '"$' + outlinedId.toString(16) + '"\n';
4310 - request.completedRegularChunks.push(stringToChunk(row));
4303 + if (json[0] === '"' && json[1] === '$') {
4304 + // This is already an outlined reference so we can just emit it directly,
4305 + // without an unnecessary indirection.
4306 + const row = serializeRowHeader('D', id) + json + '\n';
4307 + request.completedRegularChunks.push(stringToChunk(row));
4308 + } else {
4309 + // Outline the debug information to the debug channel.
4310 + const outlinedId = request.nextChunkId++;
4311 + const debugRow = outlinedId.toString(16) + ':' + json + '\n';
4312 + request.pendingDebugChunks++;
4313 + request.completedDebugChunks.push(stringToChunk(debugRow));
4314 + const row =
4315 + serializeRowHeader('D', id) + '"$' + outlinedId.toString(16) + '"\n';
4316 + request.completedRegularChunks.push(stringToChunk(row));
4317 + }
4318 } else {
4319 const row = serializeRowHeader('D', id) + json + '\n';
4320 request.completedRegularChunks.push(stringToChunk(row));