abort and report on sync IO errors in dev

Author: lubieowoce

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

@@ -17,6 +17,7 @@ import {
 } from '../app-render/work-async-storage.external'
 import type {
   DevStoreModernPartial,
+  DevRequestStoreModern,
   PrerenderStoreModernRuntime,
   RequestStore,
 } from '../app-render/work-unit-async-storage.external'
@@ -213,7 +214,7 @@ import { createPromiseWithResolvers } from '../../shared/lib/promise-with-resolv
 import { ImageConfigContext } from '../../shared/lib/image-config-context.shared-runtime'
 import { imageConfigDefault } from '../../shared/lib/image-config'
 import { RenderStage, StagedRenderingController } from './staged-rendering'
-import { hasRuntimePrefetchInLoaderTree } from './prefetch-validation'
+import { anySegmentHasRuntimePrefetchEnabled } from './prefetch-validation'
 
 export type GetDynamicParamFromSegment = (
   // [slug] / [[slug]] / [...slug]
@@ -2706,6 +2707,7 @@ async function renderWithRestartOnCacheMissInDev(
 ) {
   const {
     renderOpts,
+    workStore,
     componentMod: {
       routeModule: {
         userland: { loaderTree },
@@ -2714,15 +2716,24 @@ async function renderWithRestartOnCacheMissInDev(
   } = ctx
   const { clientReferenceManifest, ComponentMod, setReactDebugChannel } =
     renderOpts
+  const captureOwnerStack = ComponentMod.captureOwnerStack
+
   assertClientReferenceManifest(clientReferenceManifest)
 
-  const hasRuntimePrefetch = await hasRuntimePrefetchInLoaderTree(loaderTree)
+  // Check if any segment of the current page has runtime prefetching enabled.
+  // Note that if we're in a client navigation, this config might come from
+  // a shared layout parent that won't actually be rendered here.
+  // However, if the parent is runtime prefetchable, then all of its children
+  // can potentially run as part of a runtime prefetch, so it makes sense to validate them.
+  const hasRuntimePrefetch =
+    await anySegmentHasRuntimePrefetchEnabled(loaderTree)
 
   // If the render is restarted, we'll recreate a fresh request store
   let requestStore: RequestStore = initialRequestStore
 
   const environmentName = () => {
-    const currentStage = requestStore.stagedRendering!.currentStage
+    const { stagedRendering } = requestStore as DevRequestStoreModern
+    const currentStage = stagedRendering.currentStage
     switch (currentStage) {
       case RenderStage.Static:
         return 'Prerender'
@@ -2739,6 +2750,25 @@ async function renderWithRestartOnCacheMissInDev(
     }
   }
 
+  const throwIfInvalidDynamic = (expectedStage: RenderStage) => {
+    const { stagedRendering, dynamicTracking } =
+      requestStore as DevRequestStoreModern
+    if (
+      expectedStage !== RenderStage.Dynamic &&
+      // Sync IO errors advance us to the dynamic stage.
+      stagedRendering.currentStage === RenderStage.Dynamic
+    ) {
+      // We should always have an error set, but be defensive
+      if (dynamicTracking.syncDynamicErrorWithStack) {
+        throw dynamicTracking.syncDynamicErrorWithStack
+      }
+    }
+
+    if (workStore.invalidDynamicUsageError) {
+      throw workStore.invalidDynamicUsageError
+    }
+  }
+
   //===============================================
   // Initial render
   //===============================================
@@ -2773,6 +2803,10 @@ async function renderWithRestartOnCacheMissInDev(
     cacheSignal,
     hangingCacheAbortSignal: hangingCacheAbortController.signal,
     hangingPromiseAbortSignal: initialHangingPromiseController.signal,
+    dynamicTracking: createDynamicTrackingState(
+      false // isDebugDynamicAccesses
+    ),
+    captureOwnerStack,
   } satisfies DevStoreModernPartial)
 
   let debugChannel = setReactDebugChannel && createDebugChannel()
@@ -2813,6 +2847,8 @@ async function renderWithRestartOnCacheMissInDev(
           return stream
         },
         (stream) => {
+          throwIfInvalidDynamic(/* expected stage */ RenderStage.Static)
+
           // Runtime stage
 
           hadCacheMissInPreviousStages = cacheSignal.hasPendingReads()
@@ -2831,6 +2867,8 @@ async function renderWithRestartOnCacheMissInDev(
           return stream
         },
         (maybeStream) => {
+          throwIfInvalidDynamic(/* expected stage */ RenderStage.Runtime)
+
           // Dynamic stage
 
           // If the previous stage bailed out of the render due to a cache miss,
@@ -2881,6 +2919,10 @@ async function renderWithRestartOnCacheMissInDev(
 
   await cacheSignal.cacheReady()
   initialReactController.abort()
+  throwIfInvalidDynamic(
+    // If we're warming caches, we shouldn't have advanced past the runtime stage.
+    RenderStage.Runtime
+  )
 
   //===============================================
   // Final render (restarted)
@@ -2900,6 +2942,10 @@ async function renderWithRestartOnCacheMissInDev(
     stagedRendering: finalStageController,
     prerenderResumeDataCache: null,
     cacheSignal: null,
+    dynamicTracking: createDynamicTrackingState(
+      false // isDebugDynamicAccesses
+    ),
+    captureOwnerStack: ComponentMod.captureOwnerStack,
   } satisfies DevStoreModernPartial)
 
   // The initial render already wrote to its debug channel.
@@ -2923,11 +2969,15 @@ async function renderWithRestartOnCacheMissInDev(
         )
       },
       (stream) => {
+        throwIfInvalidDynamic(/* expected stage */ RenderStage.Static)
+
         // Runtime stage
         finalStageController.advanceStage(RenderStage.Runtime)
         return stream
       },
       (stream) => {
+        throwIfInvalidDynamic(/* expected stage */ RenderStage.Runtime)
+
         // Dynamic stage
         finalStageController.advanceStage(RenderStage.Dynamic)
         return stream

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

@@ -23,10 +23,10 @@
 import type { WorkStore } from '../app-render/work-async-storage.external'
 import type {
   WorkUnitStore,
-  RequestStore,
   PrerenderStoreLegacy,
   PrerenderStoreModern,
   PrerenderStoreModernRuntime,
+  DevRequestStoreModern,
 } from '../app-render/work-unit-async-storage.external'
 
 // Once postpone is in stable we should switch to importing the postpone export directly
@@ -296,14 +296,18 @@ export function abortOnSynchronousPlatformIOAccess(
 }
 
 export function trackSynchronousPlatformIOAccessInDev(
-  requestStore: RequestStore
+  requestStore: DevRequestStoreModern,
+  errorWithStack: Error
 ): void {
+  const { stagedRendering, dynamicTracking } = requestStore
   // We don't actually have a controller to abort but we do the semantic equivalent by
   // advancing the request store out of the prerender stage
-  if (requestStore.stagedRendering) {
-    // TODO: error for sync IO in the runtime stage
-    // (which is not currently covered by the validation render in `spawnDynamicValidationInDev`)
-    requestStore.stagedRendering.advanceStage(RenderStage.Dynamic)
+
+  // TODO: error for sync IO in the runtime stage
+  // (which is not currently covered by the validation render in `spawnDynamicValidationInDev`)
+  stagedRendering.advanceStage(RenderStage.Dynamic)
+  if (dynamicTracking.syncDynamicErrorWithStack === null) {
+    dynamicTracking.syncDynamicErrorWithStack = errorWithStack
   }
 }
 

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

@@ -3,7 +3,7 @@ import type { LoaderTree } from '../lib/app-dir-module'
 import { parseLoaderTree } from '../../shared/lib/router/utils/parse-loader-tree'
 import type { AppSegmentConfig } from '../../build/segment-config/app/app-segment-config'
 
-export async function hasRuntimePrefetchInLoaderTree(
+export async function anySegmentHasRuntimePrefetchEnabled(
   tree: LoaderTree
 ): Promise<boolean> {
   const { mod: layoutOrPageMod } = await getLayoutOrPageModule(tree)
@@ -22,7 +22,7 @@ export async function hasRuntimePrefetchInLoaderTree(
   for (const parallelRouteKey in parallelRoutes) {
     const parallelRoute = parallelRoutes[parallelRouteKey]
     const hasChildRuntimePrefetch =
-      await hasRuntimePrefetchInLoaderTree(parallelRoute)
+      await anySegmentHasRuntimePrefetchEnabled(parallelRoute)
     if (hasChildRuntimePrefetch) {
       return true
     }

packages/next/src/server/app-render/work-unit-async-storage.external.ts

@@ -71,6 +71,7 @@ export type RequestStore = ProdRequestStore | DevRequestStore
 
 export type ProdRequestStore = BaseRequestStore & AllMissing<DevStore>
 export type DevRequestStore = BaseRequestStore & DevStore
+export type DevRequestStoreModern = BaseRequestStore & DevStoreModern
 
 // If `cacheComponents` is enabled, we add multiple extra properties on the store.
 // We either want all of them to be present, or all of them to be undefined.
@@ -89,6 +90,8 @@ type DevStoreCommon = {
 
 export type DevStoreModernPartial = {
   readonly stagedRendering: StagedRenderingController
+  readonly captureOwnerStack: () => string | null
+  readonly dynamicTracking: DynamicTrackingState
 } & (
   | {
       // In the initial render, we track and fill caches

packages/next/src/server/async-storage/request-store.ts

@@ -263,7 +263,7 @@ function createRequestStoreImpl(
     serverComponentsHmrCache:
       serverComponentsHmrCache ||
       (globalThis as any).__serverComponentsHmrCache,
-    devFallbackParams,
+    devFallbackParams: devFallbackParams ?? null,
   }
 }
 

packages/next/src/server/node-environment-extensions/utils.tsx

@@ -1,6 +1,7 @@
 import { workAsyncStorage } from '../app-render/work-async-storage.external'
 import {
   workUnitAsyncStorage,
+  type DevRequestStoreModern,
   type PrerenderStoreModern,
 } from '../app-render/work-unit-async-storage.external'
 import {
@@ -87,7 +88,31 @@ export function io(expression: string, type: ApiType) {
     }
     case 'request':
       if (process.env.NODE_ENV === 'development') {
-        trackSynchronousPlatformIOAccessInDev(workUnitStore)
+        if (workUnitStore.stagedRendering) {
+          // If the prerender signal is already aborted we don't need to construct
+          // any stacks because something else actually terminated the prerender.
+          let message: string
+          switch (type) {
+            case 'time':
+              message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or \`connection()\`. Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time`
+              break
+            case 'random':
+              message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or \`connection()\`. Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random`
+              break
+            case 'crypto':
+              message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or \`connection()\`. Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto`
+              break
+            default:
+              throw new InvariantError(
+                'Unknown expression type in abortOnSynchronousPlatformIOAccess.'
+              )
+          }
+
+          trackSynchronousPlatformIOAccessInDev(
+            workUnitStore,
+            applyOwnerStack(new Error(message), workUnitStore)
+          )
+        }
       }
       break
     case 'prerender-ppr':
@@ -101,7 +126,10 @@ export function io(expression: string, type: ApiType) {
   }
 }
 
-function applyOwnerStack(error: Error, workUnitStore: PrerenderStoreModern) {
+function applyOwnerStack(
+  error: Error,
+  workUnitStore: PrerenderStoreModern | DevRequestStoreModern
+) {
   // TODO: Instead of stitching the stacks here, we should log the original
   // error as-is when it occurs, and let `patchErrorInspect` handle adding the
   // owner stack, instead of logging it deferred in the `LogSafely` component