[Cache Components] Dim logs after prerender aborts (#84153)

When prerenders abort we reject hanging promises so resources can clean
up. This can lead to user code which logs errors from rejections
reporting many more errors than expected and these logs are for
semantically irrelevant errors.

To make it clearer that these errors are not semantically relevant we
will dim them. This is a partial solution because 3rd party loggers will
not necessarily interpret this and so these logs might continue to show
up as normal logs in donwstream systems. We may need to ask that
consumers of these logs interpret the dimmed nature and convey this
status to the viewer.

We will follow up this work with a config that allows you to hide logs
from aborted prerenders. This will completely suppress their emission to
the underlying log system but it will run after any userland patches so
you could still end up reporting errors for instance to an otel
collector because the filtering would be applied after not before. The
right way to solve this is for the log to check if there is a react
cacheSignal that is aborted and do their own suppresion.

Author: gnoff

.vscode/settings.json

@@ -62,7 +62,7 @@
     "packages/next/src/server/app-render/dynamic-access-async-storage-instance.ts",
     "packages/next/src/server/app-render/work-async-storage-instance.ts",
     "packages/next/src/server/app-render/work-unit-async-storage-instance.ts",
-    "packages/next/src/server/app-render/dev-logs-async-storage-instance.ts",
+    "packages/next/src/server/app-render/console-async-storage-instance.ts",
     "packages/next/src/client/components/segment-cache-impl/*"
   ],
   // Disable TypeScript surveys.

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

@@ -174,7 +174,7 @@ import {
   workUnitAsyncStorage,
   type PrerenderStore,
 } from './work-unit-async-storage.external'
-import { devLogsAsyncStorage } from './dev-logs-async-storage.external'
+import { consoleAsyncStorage } from './console-async-storage.external'
 import { CacheSignal } from './cache-signal'
 import { getTracedMetadata } from '../lib/trace/utils'
 import { InvariantError } from '../../shared/lib/invariant-error'
@@ -2309,7 +2309,7 @@ async function renderToStream(
         }
       )
 
-      devLogsAsyncStorage.run(
+      consoleAsyncStorage.run(
         { dim: true },
         spawnDynamicValidationInDev,
         resolveValidation,

packages/next/src/server/app-render/console-async-storage-instance.ts

@@ -0,0 +1,5 @@
+import { createAsyncLocalStorage } from './async-local-storage'
+import type { ConsoleAsyncStorage } from './console-async-storage.external'
+
+export const consoleAsyncStorageInstance: ConsoleAsyncStorage =
+  createAsyncLocalStorage()

packages/next/src/server/app-render/dev-logs-async-storage.external.ts renamed to packages/next/src/server/app-render/console-async-storage.external.ts

@@ -1,9 +1,9 @@
 import type { AsyncLocalStorage } from 'async_hooks'
 
 // Share the instance module in the next-shared layer
-import { devLogsAsyncStorageInstance } from './dev-logs-async-storage-instance' with { 'turbopack-transition': 'next-shared' }
+import { consoleAsyncStorageInstance } from './console-async-storage-instance' with { 'turbopack-transition': 'next-shared' }
 
-export interface DevLogsStore {
+export interface ConsoleStore {
   /**
    * if true the color of logs output will be dimmed to indicate the log is
    * from a repeat or validation render that is not typically relevant to
@@ -12,6 +12,6 @@ export interface DevLogsStore {
   readonly dim: boolean
 }
 
-export type DevLogsAsyncStorage = AsyncLocalStorage<DevLogsStore>
+export type ConsoleAsyncStorage = AsyncLocalStorage<ConsoleStore>
 
-export { devLogsAsyncStorageInstance as devLogsAsyncStorage }
+export { consoleAsyncStorageInstance as consoleAsyncStorage }