Use runtime stage end time to ignore I/O debug info from dynamic stage

This ensures that any I/O awaited during the dynamic stage (i.e. after
other uncached I/O resolved) does not contaminate the owner stacks used
for error reporting.

Author: unstubbable

packages/next/src/client/app-index.tsx

@@ -214,7 +214,6 @@ if (clientResumeFetch) {
       callServer,
       findSourceMapURL,
       debugChannel,
-      // @ts-expect-error This is not yet part of the React types
       startTime: 0,
     }
   )

packages/next/src/server/app-render/app-render.tsx

@@ -828,6 +828,7 @@ async function generateDynamicFlightRenderResultWithStagesInDev(
       dynamicChunks,
       staticInterruptReason,
       runtimeInterruptReason,
+      runtimeStageEndTime,
       debugChannel: returnedDebugChannel,
       requestStore: finalRequestStore,
     } = await renderWithRestartOnCacheMissInDev(
@@ -854,6 +855,7 @@ async function generateDynamicFlightRenderResultWithStagesInDev(
         dynamicChunks,
         staticInterruptReason,
         runtimeInterruptReason,
+        runtimeStageEndTime,
         ctx,
         clientReferenceManifest,
         finalRequestStore,
@@ -1547,6 +1549,7 @@ function assertClientReferenceManifest(
 function App<T>({
   reactServerStream,
   reactDebugStream,
+  debugEndTime,
   preinitScripts,
   clientReferenceManifest,
   ServerInsertedHTMLProvider,
@@ -1556,6 +1559,7 @@ function App<T>({
   /* eslint-disable @next/internal/no-ambiguous-jsx -- React Client */
   reactServerStream: Readable | BinaryStreamOf<T>
   reactDebugStream: Readable | ReadableStream<Uint8Array> | undefined
+  debugEndTime: number | undefined
   preinitScripts: () => void
   clientReferenceManifest: NonNullable<RenderOpts['clientReferenceManifest']>
   ServerInsertedHTMLProvider: ComponentType<{
@@ -1569,6 +1573,7 @@ function App<T>({
     getFlightStream<InitialRSCPayload>(
       reactServerStream,
       reactDebugStream,
+      debugEndTime,
       clientReferenceManifest,
       nonce
     )
@@ -1614,15 +1619,13 @@ function App<T>({
 // consistent for now.
 function ErrorApp<T>({
   reactServerStream,
-  reactDebugStream,
   preinitScripts,
   clientReferenceManifest,
   ServerInsertedHTMLProvider,
   nonce,
   images,
 }: {
   reactServerStream: BinaryStreamOf<T>
-  reactDebugStream: ReadableStream<Uint8Array> | undefined
   preinitScripts: () => void
   clientReferenceManifest: NonNullable<RenderOpts['clientReferenceManifest']>
   ServerInsertedHTMLProvider: ComponentType<{
@@ -1636,7 +1639,8 @@ function ErrorApp<T>({
   const response = ReactClient.use(
     getFlightStream<InitialRSCPayload>(
       reactServerStream,
-      reactDebugStream,
+      undefined,
+      undefined,
       clientReferenceManifest,
       nonce
     )
@@ -2578,6 +2582,7 @@ async function renderToStream(
           dynamicChunks,
           staticInterruptReason,
           runtimeInterruptReason,
+          runtimeStageEndTime,
           debugChannel: returnedDebugChannel,
           requestStore: finalRequestStore,
         } = await renderWithRestartOnCacheMissInDev(
@@ -2604,6 +2609,7 @@ async function renderToStream(
           dynamicChunks,
           staticInterruptReason,
           runtimeInterruptReason,
+          runtimeStageEndTime,
           ctx,
           clientReferenceManifest,
           finalRequestStore,
@@ -2724,6 +2730,7 @@ async function renderToStream(
           <App
             reactServerStream={reactServerResult.tee()}
             reactDebugStream={reactDebugStream}
+            debugEndTime={undefined}
             preinitScripts={preinitScripts}
             clientReferenceManifest={clientReferenceManifest}
             ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -2770,6 +2777,7 @@ async function renderToStream(
       <App
         reactServerStream={reactServerResult.tee()}
         reactDebugStream={reactDebugStream}
+        debugEndTime={undefined}
         preinitScripts={preinitScripts}
         clientReferenceManifest={clientReferenceManifest}
         ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -2930,7 +2938,6 @@ async function renderToStream(
           element: (
             <ErrorApp
               reactServerStream={errorServerStream}
-              reactDebugStream={undefined}
               ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
               preinitScripts={errorPreinitScripts}
               clientReferenceManifest={clientReferenceManifest}
@@ -3195,6 +3202,7 @@ async function renderWithRestartOnCacheMissInDev(
       staticInterruptReason: initialStageController.getStaticInterruptReason(),
       runtimeInterruptReason:
         initialStageController.getRuntimeInterruptReason(),
+      runtimeStageEndTime: initialStageController.getRuntimeStageEndTime(),
       debugChannel,
       requestStore,
     }
@@ -3311,6 +3319,7 @@ async function renderWithRestartOnCacheMissInDev(
     dynamicChunks,
     staticInterruptReason: finalStageController.getStaticInterruptReason(),
     runtimeInterruptReason: finalStageController.getRuntimeInterruptReason(),
+    runtimeStageEndTime: initialStageController.getRuntimeStageEndTime(),
     debugChannel,
     requestStore,
   }
@@ -3469,6 +3478,7 @@ async function spawnStaticShellValidationInDev(
   dynamicServerChunks: Array<Uint8Array>,
   staticInterruptReason: Error | null,
   runtimeInterruptReason: Error | null,
+  runtimeStageEndTime: number,
   ctx: AppRenderContext,
   clientReferenceManifest: NonNullable<RenderOpts['clientReferenceManifest']>,
   requestStore: RequestStore,
@@ -3477,7 +3487,7 @@ async function spawnStaticShellValidationInDev(
 ): Promise<void> {
   // TODO replace this with a delay on the entire dev render once the result is propagated
   // via the websocket and not the main render itself
-  await new Promise((r) => setTimeout(r, 300))
+  await new Promise((r) => setTimeout(r, 2000))
   const {
     componentMod: ComponentMod,
     getDynamicParamFromSegment,
@@ -3547,10 +3557,17 @@ async function spawnStaticShellValidationInDev(
     debugChannelClient.on('data', (c) => debugChunks.push(c))
   }
 
+  // For both runtime and static validation we use the same end time which is
+  // when the runtime stage ended. This ensures that any I/O that is awaited
+  // (start of the await) in the dynamic stage won't be considered by React when
+  // constructing the owner stacks that we use for the validation errors.
+  const debugEndTime = runtimeStageEndTime
+
   const runtimeResult = await validateStagedShell(
     runtimeServerChunks,
     dynamicServerChunks,
     debugChunks,
+    debugEndTime,
     rootParams,
     fallbackRouteParams,
     allowEmptyStaticShell,
@@ -3573,6 +3590,7 @@ async function spawnStaticShellValidationInDev(
     staticServerChunks,
     dynamicServerChunks,
     debugChunks,
+    debugEndTime,
     rootParams,
     fallbackRouteParams,
     allowEmptyStaticShell,
@@ -3647,6 +3665,7 @@ async function warmupModuleCacheForRuntimeValidationInDev(
     <App
       reactServerStream={runtimeServerStream}
       reactDebugStream={undefined}
+      debugEndTime={undefined}
       preinitScripts={preinitScripts}
       clientReferenceManifest={clientReferenceManifest}
       ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -3723,6 +3742,7 @@ async function validateStagedShell(
   stageChunks: Array<Uint8Array>,
   allServerChunks: Array<Uint8Array>,
   debugChunks: null | Array<Uint8Array>,
+  debugEndTime: number | undefined,
   rootParams: Params,
   fallbackRouteParams: OpaqueFallbackRouteParams | null,
   allowEmptyStaticShell: boolean,
@@ -3796,6 +3816,7 @@ async function validateStagedShell(
             <App
               reactServerStream={serverStream}
               reactDebugStream={debugChannelClient}
+              debugEndTime={debugEndTime}
               preinitScripts={preinitScripts}
               clientReferenceManifest={clientReferenceManifest}
               ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -4295,6 +4316,7 @@ async function prerenderToStream(
           <App
             reactServerStream={initialServerResult.asUnclosingStream()}
             reactDebugStream={undefined}
+            debugEndTime={undefined}
             preinitScripts={preinitScripts}
             clientReferenceManifest={clientReferenceManifest}
             ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -4528,6 +4550,7 @@ async function prerenderToStream(
               <App
                 reactServerStream={reactServerResult.asUnclosingStream()}
                 reactDebugStream={undefined}
+                debugEndTime={undefined}
                 preinitScripts={preinitScripts}
                 clientReferenceManifest={clientReferenceManifest}
                 ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -4687,6 +4710,7 @@ async function prerenderToStream(
             <App
               reactServerStream={foreverStream}
               reactDebugStream={undefined}
+              debugEndTime={undefined}
               preinitScripts={() => {}}
               clientReferenceManifest={clientReferenceManifest}
               ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -4844,6 +4868,7 @@ async function prerenderToStream(
           <App
             reactServerStream={reactServerResult.asUnclosingStream()}
             reactDebugStream={undefined}
+            debugEndTime={undefined}
             preinitScripts={preinitScripts}
             clientReferenceManifest={clientReferenceManifest}
             ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -4987,6 +5012,7 @@ async function prerenderToStream(
             <App
               reactServerStream={foreverStream}
               reactDebugStream={undefined}
+              debugEndTime={undefined}
               preinitScripts={() => {}}
               clientReferenceManifest={clientReferenceManifest}
               ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -5073,6 +5099,7 @@ async function prerenderToStream(
         <App
           reactServerStream={reactServerResult.asUnclosingStream()}
           reactDebugStream={undefined}
+          debugEndTime={undefined}
           preinitScripts={preinitScripts}
           clientReferenceManifest={clientReferenceManifest}
           ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
@@ -5248,7 +5275,6 @@ async function prerenderToStream(
             // eslint-disable-next-line @next/internal/no-ambiguous-jsx
             <ErrorApp
               reactServerStream={errorServerStream}
-              reactDebugStream={undefined}
               ServerInsertedHTMLProvider={ServerInsertedHTMLProvider}
               preinitScripts={errorPreinitScripts}
               clientReferenceManifest={clientReferenceManifest}

packages/next/src/server/app-render/staged-rendering.ts

@@ -15,6 +15,7 @@ export class StagedRenderingController {
   naturalStage: RenderStage = RenderStage.Static
   staticInterruptReason: Error | null = null
   runtimeInterruptReason: Error | null = null
+  runtimeStageEndTime: number = Infinity
   /** Whether sync IO should interrupt the render */
   enableSyncInterrupt = true
 
@@ -129,6 +130,10 @@ export class StagedRenderingController {
     return this.runtimeInterruptReason
   }
 
+  getRuntimeStageEndTime() {
+    return this.runtimeStageEndTime
+  }
+
   abandonRender() {
     if (!this.mayAbandon) {
       throw new InvariantError(
@@ -188,6 +193,7 @@ export class StagedRenderingController {
       this.runtimeStagePromise.resolve()
     }
     if (currentStage < RenderStage.Dynamic && stage >= RenderStage.Dynamic) {
+      this.runtimeStageEndTime = performance.now() + performance.timeOrigin
       const dynamicListeners = this.dynamicStageListeners
       for (let i = 0; i < dynamicListeners.length; i++) {
         dynamicListeners[i]()

packages/next/src/server/app-render/use-flight-response.tsx

@@ -33,6 +33,7 @@ const findSourceMapURL =
 export function getFlightStream<T>(
   flightStream: Readable | BinaryStreamOf<T>,
   debugStream: Readable | ReadableStream<Uint8Array> | undefined,
+  debugEndTime: number | undefined,
   clientReferenceManifest: DeepReadonly<ClientReferenceManifest>,
   nonce: string | undefined
 ): Promise<T> {
@@ -65,6 +66,7 @@ export function getFlightStream<T>(
       },
       nonce,
       debugChannel: debugStream ? { readable: debugStream } : undefined,
+      endTime: debugEndTime,
     })
   } else {
     // The types of flightStream and debugStream should match.
@@ -90,6 +92,7 @@ export function getFlightStream<T>(
         findSourceMapURL,
         nonce,
         debugChannel: debugStream,
+        endTime: debugEndTime,
       }
     )
   }

packages/next/types/$$compiled.internal.d.ts

@@ -115,6 +115,8 @@ declare module 'react-server-dom-webpack/client.browser' {
     replayConsoleLogs?: boolean
     temporaryReferences?: TemporaryReferenceSet
     debugChannel?: { readable?: ReadableStream; writable?: WritableStream }
+    startTime?: number
+    endTime?: number
   }
 
   export function createFromFetch<T>(
@@ -318,6 +320,8 @@ declare module 'react-server-dom-webpack/client.edge' {
     replayConsoleLogs?: boolean
     environmentName?: string
     debugChannel?: { readable?: ReadableStream }
+    startTime?: number
+    endTime?: number
   }
 
   export type EncodeFormActionCallback = <A>(

test/e2e/app-dir/cache-components-errors/fixtures/default/app/dynamic-root/page.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from 'react'
 
 import { IndirectionOne, IndirectionTwo } from './indirection'
+import { cookies } from 'next/headers'
 
 export default async function Page() {
   return (
@@ -56,8 +57,15 @@ const fetchRandomCached = async (entropy: string) => {
 }
 
 const fetchRandom = async (entropy: string) => {
+  // Hide uncached I/O behind a runtime API call, to ensure we still get the
+  // correct owner stack for the error.
+  await cookies()
   const response = await fetch(
     'https://next-data-api-endpoint.vercel.app/api/random?b=' + entropy
   )
+  // The error should point at the fetch above, and not at the following fetch.
+  await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/random?b=' + entropy + 'x'
+  )
   return response.text()
 }