[Flight] Prune debug info when chunks error (#36782)
Flight filters debug information by the consumer end time when a model initializes successfully. If the stream errors while the model is pending, already parsed debug information previously remained unfiltered and could produce stacks for work after the cutoff. Apply the same cutoff when transitioning a chunk to the errored state. Truncate the existing debug info array in place because the suspended Lazy already references that array, and Fizz reads the Lazy's debug info during abort. --------- Co-authored-by: Hendrik Liebau <mail@hendrik-liebau.de>
Josh Story committed
Jun 15, 2026 at 10:36 UTC
d9158919c598836c47fc61c1ba5f4d79d8fea69a
2 files changed
+177
-3
packages/react-client/src/ReactFlightClient.js
+28
-3
@@ -361,7 +361,7 @@ type Response = {
361
_debugRootStack?: null | Error, // DEV-only
362
_debugRootTask?: null | ConsoleTask, // DEV-only
363
_debugStartTime: number, // DEV-only
364
- _debugEndTime?: number, // DEV-only
364
+ _debugEndTime: null | number, // DEV-only
365
_debugIOStarted: boolean, // DEV-only
366
_debugFindSourceMapURL?: void | FindSourceMapURLCallback, // DEV-only
367
_debugChannel?: void | DebugChannel, // DEV-only
@@ -499,7 +499,6 @@ function filterDebugInfo(
499
response: Response,
500
value: {_debugInfo: ReactDebugInfo, ...},
501
) {
502
- // $FlowFixMe[invalid-compare]
502
if (response._debugEndTime === null) {
503
// No end time was defined, so we keep all debug info entries.
504
return;
@@ -523,6 +522,29 @@ function filterDebugInfo(
522
value._debugInfo = debugInfo;
523
}
524
525
+function pruneDebugInfoAfterError(
526
+ response: Response,
527
+ chunk: ErroredChunk<any>,
528
+): void {
529
+ if (response._debugEndTime === null) {
530
+ return;
531
+ }
532
+
533
+ const relativeEndTime =
534
+ response._debugEndTime -
535
+ // $FlowFixMe[prop-missing]
536
+ performance.timeOrigin;
537
+ const debugInfo = chunk._debugInfo;
538
+ for (let i = 0; i < debugInfo.length; i++) {
539
+ const info = debugInfo[i];
540
+ if (typeof info.time === 'number' && info.time > relativeEndTime) {
541
+ // This array may already be attached to the Lazy suspended in Fizz.
542
+ debugInfo.length = i;
543
+ return;
544
+ }
545
+ }
546
+}
547
+
548
function moveDebugInfoFromChunkToInnerValue<T>(
549
chunk: InitializedChunk<T> | InitializedStreamChunk<any>,
550
value: T,
@@ -764,6 +786,9 @@ function triggerErrorOnChunk<T>(
786
const erroredChunk: ErroredChunk<T> = chunk as any;
787
erroredChunk.status = ERRORED;
788
erroredChunk.reason = error;
789
+ if (__DEV__) {
790
+ pruneDebugInfoAfterError(response, erroredChunk);
791
+ }
792
if (listeners !== null) {
793
rejectChunk(response, listeners, error);
794
}
@@ -2762,7 +2787,7 @@ function ResponseInstance(
2787
// and is not considered I/O required to load the stream.
2788
setTimeout(markIOStarted.bind(this), 0);
2789
}
2765
- this._debugEndTime = debugEndTime == null ? null : debugEndTime;
2790
+ this._debugEndTime = debugEndTime === undefined ? null : debugEndTime;
2791
this._debugFindSourceMapURL = findSourceMapURL;
2792
this._debugChannel = debugChannel;
2793
this._blockedConsole = null;
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
+149
@@ -2055,6 +2055,155 @@ describe('ReactFlightDOMNode', () => {
2055
'ssr-abort',
2056
);
2057
});
2058
+
2059
+ // @gate __DEV__
2060
+ it('filters parsed debug info when the Flight stream errors', async () => {
2061
+ let resolveInitialData;
2062
+ const laterDataResolvers = [];
2063
+
2064
+ async function getInitialData() {
2065
+ return new Promise(resolve => {
2066
+ resolveInitialData = resolve;
2067
+ });
2068
+ }
2069
+
2070
+ async function loadInitialData() {
2071
+ return await getInitialData();
2072
+ }
2073
+
2074
+ async function loadLaterData() {
2075
+ for (let i = 0; i < 40; i++) {
2076
+ await new Promise(resolve => {
2077
+ laterDataResolvers[i] = resolve;
2078
+ });
2079
+ }
2080
+ }
2081
+
2082
+ async function Dynamic() {
2083
+ await loadInitialData();
2084
+ await loadLaterData();
2085
+ return ReactServer.createElement('p', null, 'Done');
2086
+ }
2087
+
2088
+ function App() {
2089
+ return ReactServer.createElement(
2090
+ 'html',
2091
+ null,
2092
+ ReactServer.createElement(
2093
+ 'body',
2094
+ null,
2095
+ ReactServer.createElement(Dynamic),
2096
+ ),
2097
+ );
2098
+ }
2099
+
2100
+ let staticEndTime = -1;
2101
+ const chunks = [];
2102
+
2103
+ await new Promise(resolve => {
2104
+ setTimeout(() => {
2105
+ const flightStream = ReactServerDOMServer.renderToPipeableStream(
2106
+ ReactServer.createElement(App),
2107
+ webpackMap,
2108
+ {
2109
+ filterStackFrame,
2110
+ },
2111
+ );
2112
+
2113
+ const passThrough = new Stream.PassThrough(streamOptions);
2114
+ flightStream.pipe(passThrough);
2115
+ passThrough.on('data', chunk => {
2116
+ chunks.push(chunk);
2117
+ });
2118
+ passThrough.on('end', resolve);
2119
+ });
2120
+
2121
+ setTimeout(() => {
2122
+ staticEndTime = performance.now() + performance.timeOrigin;
2123
+ resolveInitialData();
2124
+
2125
+ let index = 0;
2126
+ function resolveNext() {
2127
+ setTimeout(() => {
2128
+ laterDataResolvers[index++]();
2129
+ if (index < 40) {
2130
+ resolveNext();
2131
+ }
2132
+ });
2133
+ }
2134
+ setTimeout(resolveNext);
2135
+ });
2136
+ });
2137
+
2138
+ const contentStream = new Stream.Readable({
2139
+ ...streamOptions,
2140
+ read() {},
2141
+ });
2142
+ const response = ReactServerDOMClient.createFromNodeStream(
2143
+ contentStream,
2144
+ {
2145
+ moduleMap: null,
2146
+ moduleLoading: null,
2147
+ serverModuleMap: null,
2148
+ },
2149
+ {
2150
+ endTime: staticEndTime,
2151
+ },
2152
+ );
2153
+ // The final write contains the completed model. The preceding writes
2154
+ // contain the debug rows produced while rendering it.
2155
+ for (let i = 0; i < chunks.length - 1; i++) {
2156
+ contentStream.push(chunks[i]);
2157
+ }
2158
+
2159
+ const decoded = await response;
2160
+
2161
+ function ClientRoot() {
2162
+ return decoded;
2163
+ }
2164
+
2165
+ const flightError = new Error('Flight stream errored');
2166
+ const fizzAbortController = new AbortController();
2167
+ let caughtError;
2168
+ let ownerStack;
2169
+ const {prelude} = await new Promise(resolve => {
2170
+ let result;
2171
+
2172
+ setTimeout(() => {
2173
+ result = ReactDOMFizzStatic.prerenderToNodeStream(
2174
+ React.createElement(ClientRoot),
2175
+ {
2176
+ signal: fizzAbortController.signal,
2177
+ onError(error) {
2178
+ caughtError = error;
2179
+ ownerStack = React.captureOwnerStack
2180
+ ? React.captureOwnerStack()
2181
+ : null;
2182
+ },
2183
+ },
2184
+ );
2185
+ });
2186
+
2187
+ setTimeout(() => {
2188
+ contentStream.emit('error', flightError);
2189
+ contentStream.push(null);
2190
+ fizzAbortController.abort(new Error('Fizz aborted'));
2191
+ resolve(result);
2192
+ });
2193
+ });
2194
+
2195
+ expect(await readResult(prelude)).toBe('');
2196
+ expect(caughtError).toBe(flightError);
2197
+ expect(normalizeCodeLocInfo(ownerStack)).toBe(
2198
+ '\n' +
2199
+ gate(flags =>
2200
+ flags.enableAsyncDebugInfo
2201
+ ? ' in loadInitialData (at **)\n' + ' in Dynamic (at **)\n'
2202
+ : '',
2203
+ ) +
2204
+ ' in App (at **)',
2205
+ );
2206
+ });
2207
});
2208
2209
it('warns with a tailored message if eval is not available in dev', async () => {