Prevent "use cache" timeout errors from being caught in userland code (vercel#78998)

When `dynamicIO` is enabled and a `"use cache"` function accesses
dynamic request APIs, we fail the prerendering with a timeout error
after 50 seconds.

This error could be swallowed in userland code however, when the cached
function is wrapped in a try/catch block. That's not the intended
behavior, so we now fail the prerendering (or dynamic validation in dev
mode) with the timeout error in this case as well, using the same
approach as in vercel#77838.

This also works around a bug that led to the timeout errors not being
source-mapped correctly with Turbopack.

In a future PR, we will adapt the behaviour for prerendering of fallback
shells that are allowed to be empty, in which case the timeout must not
fail the build.

Author: unstubbable

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

@@ -187,7 +187,6 @@ import {
 } from '../resume-data-cache/resume-data-cache'
 import type { MetadataErrorType } from '../../lib/metadata/resolve-metadata'
 import isError from '../../lib/is-error'
-import { isUseCacheTimeoutError } from '../use-cache/use-cache-errors'
 import { createServerInsertedMetadata } from './metadata-insertion/create-server-inserted-metadata'
 import { getPreviouslyRevalidatedTags } from '../server-utils'
 import { executeRevalidates } from '../revalidation-utils'
@@ -632,7 +631,6 @@ async function generateDynamicFlightRenderResult(
       ctx,
       false,
       ctx.clientReferenceManifest,
-      ctx.workStore.route,
       requestStore
     )
   }
@@ -1390,7 +1388,6 @@ async function renderToHTMLOrFlightImpl(
       res,
       ctx,
       metadata,
-      workStore,
       loaderTree
     )
 
@@ -1410,8 +1407,8 @@ async function renderToHTMLOrFlightImpl(
 
     // If we encountered any unexpected errors during build we fail the
     // prerendering phase and the build.
-    if (workStore.invalidUsageError) {
-      throw workStore.invalidUsageError
+    if (workStore.invalidDynamicUsageError) {
+      throw workStore.invalidDynamicUsageError
     }
     if (response.digestErrorsMap.size) {
       const buildFailingError = response.digestErrorsMap.values().next().value
@@ -1564,7 +1561,6 @@ async function renderToHTMLOrFlightImpl(
             req,
             res,
             ctx,
-            workStore,
             notFoundLoaderTree,
             formState,
             postponedState
@@ -1591,14 +1587,13 @@ async function renderToHTMLOrFlightImpl(
       req,
       res,
       ctx,
-      workStore,
       loaderTree,
       formState,
       postponedState
     )
 
-    if (workStore.invalidUsageError) {
-      throw workStore.invalidUsageError
+    if (workStore.invalidDynamicUsageError) {
+      throw workStore.invalidDynamicUsageError
     }
 
     // If we have pending revalidates, wait until they are all resolved.
@@ -1727,7 +1722,6 @@ async function renderToStream(
   req: BaseNextRequest,
   res: BaseNextResponse,
   ctx: AppRenderContext,
-  workStore: WorkStore,
   tree: LoaderTree,
   formState: any,
   postponedState: PostponedState | null
@@ -1873,7 +1867,6 @@ async function renderToStream(
         ctx,
         res.statusCode === 404,
         clientReferenceManifest,
-        workStore.route,
         requestStore
       )
 
@@ -2220,10 +2213,9 @@ async function spawnDynamicValidationInDev(
   ctx: AppRenderContext,
   isNotFound: boolean,
   clientReferenceManifest: NonNullable<RenderOpts['clientReferenceManifest']>,
-  route: string,
   requestStore: RequestStore
 ): Promise<void> {
-  const { componentMod: ComponentMod, implicitTags } = ctx
+  const { componentMod: ComponentMod, implicitTags, workStore } = ctx
   const rootParams = getRootParams(
     ComponentMod.tree,
     ctx.getDynamicParamFromSegment
@@ -2317,7 +2309,7 @@ async function spawnDynamicValidationInDev(
             process.env.NEXT_DEBUG_BUILD ||
             process.env.__NEXT_VERBOSE_LOGGING
           ) {
-            printDebugThrownValueForProspectiveRender(err, route)
+            printDebugThrownValueForProspectiveRender(err, workStore.route)
           }
         },
         signal: initialServerRenderController.signal,
@@ -2335,7 +2327,7 @@ async function spawnDynamicValidationInDev(
     ) {
       // We don't normally log these errors because we are going to retry anyway but
       // it can be useful for debugging Next.js itself to get visibility here when needed
-      printDebugThrownValueForProspectiveRender(err, route)
+      printDebugThrownValueForProspectiveRender(err, workStore.route)
     }
   }
 
@@ -2375,7 +2367,7 @@ async function spawnDynamicValidationInDev(
           ) {
             // We don't normally log these errors because we are going to retry anyway but
             // it can be useful for debugging Next.js itself to get visibility here when needed
-            printDebugThrownValueForProspectiveRender(err, route)
+            printDebugThrownValueForProspectiveRender(err, workStore.route)
           }
         },
       }
@@ -2387,7 +2379,7 @@ async function spawnDynamicValidationInDev(
         // We're going to retry to so we normally would suppress this error but
         // when verbose logging is on we print it
         if (process.env.__NEXT_VERBOSE_LOGGING) {
-          printDebugThrownValueForProspectiveRender(err, route)
+          printDebugThrownValueForProspectiveRender(err, workStore.route)
         }
       }
     })
@@ -2467,10 +2459,6 @@ async function spawnDynamicValidationInDev(
         clientReferenceManifest.clientModules,
         {
           onError: (err) => {
-            if (isUseCacheTimeoutError(err)) {
-              return err.digest
-            }
-
             if (
               finalServerController.signal.aborted &&
               isPrerenderInterruptedError(err)
@@ -2511,12 +2499,6 @@ async function spawnDynamicValidationInDev(
           {
             signal: finalClientController.signal,
             onError: (err, errorInfo) => {
-              if (isUseCacheTimeoutError(err)) {
-                dynamicValidation.dynamicErrors.push(err)
-
-                return
-              }
-
               if (
                 isPrerenderInterruptedError(err) ||
                 finalClientController.signal.aborted
@@ -2531,7 +2513,7 @@ async function spawnDynamicValidationInDev(
                 const componentStack = errorInfo.componentStack
                 if (typeof componentStack === 'string') {
                   trackAllowedDynamicAccess(
-                    route,
+                    workStore.route,
                     componentStack,
                     dynamicValidation
                   )
@@ -2572,7 +2554,7 @@ async function spawnDynamicValidationInDev(
       // track any dynamic access that occurs above the suspense boundary because
       // we'll do so in the route shell.
       throwIfDisallowedDynamic(
-        route,
+        workStore,
         preludeIsEmpty,
         dynamicValidation,
         serverDynamicTracking,
@@ -2611,7 +2593,6 @@ async function prerenderToStream(
   res: BaseNextResponse,
   ctx: AppRenderContext,
   metadata: AppPageRenderResultMetadata,
-  workStore: WorkStore,
   tree: LoaderTree
 ): Promise<PrerenderToStreamResult> {
   // When prerendering formState is always null. We still include it
@@ -2626,6 +2607,7 @@ async function prerenderToStream(
     nonce,
     pagePath,
     renderOpts,
+    workStore,
   } = ctx
 
   const rootParams = getRootParams(tree, getDynamicParamFromSegment)
@@ -2840,6 +2822,12 @@ async function prerenderToStream(
         initialServerRenderController.abort()
         initialServerPrerenderController.abort()
 
+        // We don't need to continue the prerender process if we already
+        // detected invalid dynamic usage in the initial prerender phase.
+        if (workStore.invalidDynamicUsageError) {
+          throw workStore.invalidDynamicUsageError
+        }
+
         let initialServerResult
         try {
           initialServerResult = await createReactServerPrerenderResult(
@@ -3106,7 +3094,7 @@ async function prerenderToStream(
         // we'll do so in the route shell.
         if (!ctx.renderOpts.doNotThrowOnEmptyStaticShell) {
           throwIfDisallowedDynamic(
-            workStore.route,
+            workStore,
             preludeIsEmpty,
             dynamicValidation,
             serverDynamicTracking,
@@ -3428,6 +3416,12 @@ async function prerenderToStream(
         initialServerRenderController.abort()
         initialServerPrerenderController.abort()
 
+        // We don't need to continue the prerender process if we already
+        // detected invalid dynamic usage in the initial prerender phase.
+        if (workStore.invalidDynamicUsageError) {
+          throw workStore.invalidDynamicUsageError
+        }
+
         // We've now filled caches and triggered any inadvertant sync bailouts
         // due to lazy module initialization. We can restart our render to capture results
 
@@ -3591,7 +3585,7 @@ async function prerenderToStream(
         if (!ctx.renderOpts.doNotThrowOnEmptyStaticShell) {
           // We don't have a shell because the root errored when we aborted.
           throwIfDisallowedDynamic(
-            workStore.route,
+            workStore,
             preludeIsEmpty,
             dynamicValidation,
             serverDynamicTracking,

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

@@ -651,12 +651,17 @@ function createErrorWithComponentStack(
 }
 
 export function throwIfDisallowedDynamic(
-  route: string,
+  workStore: WorkStore,
   hasEmptyShell: boolean,
   dynamicValidation: DynamicValidationState,
   serverDynamic: DynamicTrackingState,
   clientDynamic: DynamicTrackingState
 ): void {
+  if (workStore.invalidDynamicUsageError) {
+    console.error(workStore.invalidDynamicUsageError)
+    throw new StaticGenBailoutError()
+  }
+
   if (hasEmptyShell) {
     if (dynamicValidation.hasSuspenseAboveBody) {
       // This route has opted into allowing fully dynamic rendering
@@ -698,7 +703,7 @@ export function throwIfDisallowedDynamic(
     // to indicate your are ok with fully dynamic rendering.
     if (dynamicValidation.hasDynamicViewport) {
       console.error(
-        `Route "${route}" has a \`generateViewport\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) without explicitly allowing fully dynamic rendering. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport`
+        `Route "${workStore.route}" has a \`generateViewport\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) without explicitly allowing fully dynamic rendering. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport`
       )
       throw new StaticGenBailoutError()
     }
@@ -708,7 +713,7 @@ export function throwIfDisallowedDynamic(
       dynamicValidation.hasDynamicMetadata
     ) {
       console.error(
-        `Route "${route}" has a \`generateMetadata\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) when the rest of the route does not. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata`
+        `Route "${workStore.route}" has a \`generateMetadata\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) when the rest of the route does not. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata`
       )
       throw new StaticGenBailoutError()
     }

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

@@ -51,12 +51,13 @@ export interface WorkStore {
   dynamicUsageStack?: string
 
   /**
-   * Invalid usage errors might be caught in userland. We attach them to the
-   * work store to ensure we can still fail the build or dev render.
+   * Invalid dynamic usage errors might be caught in userland. We attach them to
+   * the work store to ensure we can still fail the build, or show en error in
+   * dev mode.
    */
   // TODO: Collect an array of errors, and throw as AggregateError when
   // `serializeError` and the Dev Overlay support it.
-  invalidUsageError?: Error
+  invalidDynamicUsageError?: Error
 
   nextFetchId?: number
   pathWasRevalidated?: boolean

packages/next/src/server/request/utils.ts

@@ -29,7 +29,7 @@ export function throwForSearchParamsAccessInUseCache(
   )
 
   Error.captureStackTrace(error, constructorOpt)
-  workStore.invalidUsageError ??= error
+  workStore.invalidDynamicUsageError ??= error
 
   throw error
 }

packages/next/src/server/use-cache/use-cache-wrapper.ts

@@ -253,8 +253,8 @@ async function collectResult(
   let idx = 0
   const bufferStream = new ReadableStream({
     pull(controller) {
-      if (workStore.invalidUsageError) {
-        controller.error(workStore.invalidUsageError)
+      if (workStore.invalidDynamicUsageError) {
+        controller.error(workStore.invalidDynamicUsageError)
       } else if (idx < buffer.length) {
         controller.enqueue(buffer[idx++])
       } else if (errors.length > 0) {
@@ -365,7 +365,6 @@ async function generateCacheEntryImpl(
   const resultPromise = createLazyResult(() => fn.apply(null, args))
 
   let errors: Array<unknown> = []
-  let timeoutErrorHandled = false
 
   // In the "Cache" environment, we only need to make sure that the error
   // digests are handled correctly. Error formatting and reporting is not
@@ -385,13 +384,6 @@ async function generateCacheEntryImpl(
       console.error(error)
     }
 
-    if (error === timeoutError) {
-      timeoutErrorHandled = true
-      // The timeout error already aborted the whole stream. We don't need
-      // to also push this error into the `errors` array.
-      return timeoutError.digest
-    }
-
     errors.push(error)
   }
 
@@ -404,6 +396,7 @@ async function generateCacheEntryImpl(
     // Otherwise we assume you stalled on hanging input and de-opt. This needs
     // to be lower than just the general timeout of 60 seconds.
     const timer = setTimeout(() => {
+      workStore.invalidDynamicUsageError = timeoutError
       timeoutAbortController.abort(timeoutError)
     }, 50000)
 
@@ -422,7 +415,7 @@ async function generateCacheEntryImpl(
         signal: abortSignal,
         temporaryReferences,
         onError(error) {
-          if (renderSignal.aborted && renderSignal.reason === error) {
+          if (abortSignal.aborted && abortSignal.reason === error) {
             return undefined
           }
 
@@ -433,11 +426,7 @@ async function generateCacheEntryImpl(
 
     clearTimeout(timer)
 
-    if (timeoutAbortController.signal.aborted && !timeoutErrorHandled) {
-      // When halting is enabled, the prerender will not call `onError` when
-      // it's aborted with the timeout abort signal, and hanging promises will
-      // also not be rejected. In this case, we're creating an erroring stream
-      // here, to ensure that the error is propagated to the server environment.
+    if (timeoutAbortController.signal.aborted) {
       stream = new ReadableStream({
         start(controller) {
           controller.error(timeoutError)

test/e2e/app-dir/use-cache-hanging-inputs/app/fallback-params/[slug]/page.tsx

@@ -0,0 +1,14 @@
+'use cache'
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+
+  return <p>slug: {slug}</p>
+}
+
+// If generateStaticParams would be used here to define at least one set of
+// complete params, we would not yield a timeout error.

test/e2e/app-dir/use-cache-hanging-inputs/app/search-params-caught/page.tsx

@@ -0,0 +1,28 @@
+async function getSearchParam({
+  searchParams,
+}: {
+  searchParams: Promise<{ n: string }>
+}): Promise<string> {
+  'use cache'
+
+  return (await searchParams).n
+}
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ n: string }>
+}) {
+  let searchParam: string | undefined
+
+  try {
+    searchParam = await getSearchParam({ searchParams })
+  } catch {
+    // Ignore not having access to searchParams. This is still an invalid
+    // dynamic access though that we need to detect.
+  }
+
+  return (
+    <p>{searchParam ? `search param: ${searchParam}` : 'no search param'}</p>
+  )
+}