feat: instrumentation onRequestError

packages/next/src/build/templates/middleware.ts

@@ -6,6 +6,7 @@ import { adapter } from '../../server/web/adapter'
 
 // Import the userland code.
 import * as _mod from 'VAR_USERLAND'
+import { edgeInstrumentationOnRequestError } from '../../server/web/globals'
 
 const mod = { ..._mod }
 const handler = mod.middleware || mod.default
@@ -18,12 +19,38 @@ if (typeof handler !== 'function') {
   )
 }
 
+// Middleware will only sent out the FetchEvent to next server,
+// so load instrumentation module here and track the error inside middleware module.
+function errorHandledHandler(fn: AdapterOptions['handler']) {
+  return async (...args: Parameters<AdapterOptions['handler']>) => {
+    try {
+      return await fn(...args)
+    } catch (error) {
+      const req = args[0]
+      edgeInstrumentationOnRequestError(
+        error,
+        {
+          url: req.url,
+          method: req.method,
+          headers: Object.fromEntries(req.headers.entries()),
+        },
+        {
+          routerKind: 'Pages Router',
+          routePath: '/middleware',
+          routeType: 'middleware',
+        }
+      )
+      throw error
+    }
+  }
+}
+
 export default function nHandler(
   opts: Omit<AdapterOptions, 'IncrementalCache' | 'page' | 'handler'>
 ) {
   return adapter({
     ...opts,
     page,
-    handler,
+    handler: errorHandledHandler(handler),
   })
 }

packages/next/src/server/api-utils/node/api-resolver.ts

@@ -3,6 +3,7 @@ import type { NextApiRequest, NextApiResponse } from '../../../shared/lib/utils'
 import type { PageConfig, ResponseLimit } from '../../../types'
 import type { __ApiPreviewProps } from '../.'
 import type { CookieSerializeOptions } from 'next/dist/compiled/cookie'
+import type { ServerOnInstrumentationRequestError } from '../../app-render/types'
 
 import bytes from 'next/dist/compiled/bytes'
 import { generateETag } from '../../lib/etag'
@@ -324,7 +325,8 @@ export async function apiResolver(
   apiContext: ApiContext,
   propagateError: boolean,
   dev?: boolean,
-  page?: string
+  page?: string,
+  onError?: ServerOnInstrumentationRequestError
 ): Promise<void> {
   const apiReq = req as NextApiRequest
   const apiRes = res as NextApiResponse
@@ -435,6 +437,12 @@ export async function apiResolver(
       }
     }
   } catch (err) {
+    onError?.(err, req, {
+      routerKind: 'Pages Router',
+      routePath: page || '',
+      routeType: 'route',
+    })
+
     if (err instanceof ApiError) {
       sendError(apiRes, err.statusCode, err.message)
     } else {

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

@@ -596,7 +596,7 @@ async function renderToHTMLOrFlightImpl(
     nextFontManifest,
     supportsDynamicResponse,
     serverActions,
-    appDirDevErrorLogger,
+    onInstrumentationRequestError,
     assetPrefix = '',
     enableTainting,
   } = renderOpts
@@ -687,27 +687,37 @@ async function renderToHTMLOrFlightImpl(
   // logging.
   const silenceStaticGenerationErrors = isRoutePPREnabled && isStaticGeneration
 
+  const errorContext = {
+    routerKind: 'App Router',
+    routePath: pagePath,
+    routeType: 'render',
+  } as const
+
+  const onReactStreamRenderError = onInstrumentationRequestError
+    ? (err: Error) => onInstrumentationRequestError(err, req, errorContext)
+    : undefined
+
   const serverComponentsErrorHandler = createErrorHandler({
     source: ErrorHandlerSource.serverComponents,
     dev,
     isNextExport,
-    errorLogger: appDirDevErrorLogger,
+    onReactStreamRenderError,
     digestErrorsMap,
     silenceLogger: silenceStaticGenerationErrors,
   })
   const flightDataRendererErrorHandler = createErrorHandler({
     source: ErrorHandlerSource.flightData,
     dev,
     isNextExport,
-    errorLogger: appDirDevErrorLogger,
+    onReactStreamRenderError,
     digestErrorsMap,
     silenceLogger: silenceStaticGenerationErrors,
   })
   const htmlRendererErrorHandler = createErrorHandler({
     source: ErrorHandlerSource.html,
     dev,
     isNextExport,
-    errorLogger: appDirDevErrorLogger,
+    onReactStreamRenderError,
     digestErrorsMap,
     allCapturedErrors,
     silenceLogger: silenceStaticGenerationErrors,

packages/next/src/server/app-render/create-error-handler.tsx

@@ -33,15 +33,15 @@ export function createErrorHandler({
   source,
   dev,
   isNextExport,
-  errorLogger,
+  onReactStreamRenderError,
   digestErrorsMap,
   allCapturedErrors,
   silenceLogger,
 }: {
   source: (typeof ErrorHandlerSource)[keyof typeof ErrorHandlerSource]
   dev?: boolean
   isNextExport?: boolean
-  errorLogger?: (err: any) => Promise<void>
+  onReactStreamRenderError?: (err: any) => void
   digestErrorsMap: Map<string, Error>
   allCapturedErrors?: Error[]
   silenceLogger?: boolean
@@ -114,18 +114,11 @@ export function createErrorHandler({
           source === 'html') ||
         source === 'flightData'
       ) {
-        if (errorLogger) {
-          errorLogger(err).catch(() => {})
-        } else {
-          // The error logger is currently not provided in the edge runtime.
-          // Use the exposed `__next_log_error__` instead.
-          // This will trace error traces to the original source code.
-          if (typeof __next_log_error__ === 'function') {
-            __next_log_error__(err)
-          } else {
-            console.error(err)
-          }
-        }
+        // The error logger is currently not provided in the edge runtime.
+        // Use the exposed `__next_log_error__` instead.
+        // This will trace error traces to the original source code.
+
+        onReactStreamRenderError?.(err)
       }
     }
 

packages/next/src/server/app-render/types.ts

@@ -11,6 +11,10 @@ import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 
 import s from 'next/dist/compiled/superstruct'
 import type { RequestLifecycleOpts } from '../base-server'
+import type { InstrumentationOnRequestError } from '../instrumentation/types'
+import type { NextRequestHint } from '../web/adapter'
+import type { BaseNextRequest } from '../base-http'
+import type { IncomingMessage } from 'http'
 
 export type DynamicParamTypes =
   | 'catchall'
@@ -123,6 +127,14 @@ export type ActionFlightResponse =
   // This case happens when `redirect()` is called in a server action.
   | NextFlightResponse
 
+export type ServerOnInstrumentationRequestError = (
+  error: unknown,
+  // The request could be middleware, node server or web server request,
+  // we normalized them into an aligned format to `onRequestError` API later.
+  request: NextRequestHint | BaseNextRequest | IncomingMessage,
+  errorContext: Parameters<InstrumentationOnRequestError>[2]
+) => void | Promise<void>
+
 export interface RenderOptsPartial {
   err?: Error | null
   dev?: boolean
@@ -142,7 +154,7 @@ export interface RenderOptsPartial {
   isRevalidate?: boolean
   nextExport?: boolean
   nextConfigOutput?: 'standalone' | 'export'
-  appDirDevErrorLogger?: (err: any) => Promise<void>
+  onInstrumentationRequestError?: ServerOnInstrumentationRequestError
   isDraftMode?: boolean
   deploymentId?: string
   onUpdateCookies?: (cookies: string[]) => void

packages/next/src/server/base-server.ts

@@ -11,7 +11,10 @@ import type {
 } from './request-meta'
 import type { ParsedUrlQuery } from 'querystring'
 import type { RenderOptsPartial as PagesRenderOptsPartial } from './render'
-import type { RenderOptsPartial as AppRenderOptsPartial } from './app-render/types'
+import type {
+  RenderOptsPartial as AppRenderOptsPartial,
+  ServerOnInstrumentationRequestError,
+} from './app-render/types'
 import type {
   CachedAppPageValue,
   CachedPageValue,
@@ -47,6 +50,7 @@ import type {
 import type { MiddlewareMatcher } from '../build/analysis/get-page-static-info'
 import type { TLSSocket } from 'tls'
 import type { PathnameNormalizer } from './normalizers/request/pathname-normalizer'
+import type { InstrumentationModule } from './instrumentation/types'
 
 import { format as formatUrl, parse as parseUrl } from 'url'
 import { formatHostname } from './lib/format-hostname'
@@ -152,6 +156,7 @@ import {
   type WaitUntil,
 } from './after/builtin-request-context'
 import { ENCODED_TAGS } from './stream-utils/encodedTags'
+import { NextRequestHint } from './web/adapter'
 
 export type FindComponentsResult = {
   components: LoadComponentsReturnType
@@ -331,6 +336,7 @@ export default abstract class Server<
   protected readonly clientReferenceManifest?: DeepReadonly<ClientReferenceManifest>
   protected interceptionRoutePatterns: RegExp[]
   protected nextFontManifest?: DeepReadonly<NextFontManifest>
+  protected instrumentation: InstrumentationModule | undefined
   private readonly responseCache: ResponseCacheBase
 
   protected abstract getPublicDir(): string
@@ -574,6 +580,8 @@ export default abstract class Server<
         clientTraceMetadata: this.nextConfig.experimental.clientTraceMetadata,
         after: this.nextConfig.experimental.after ?? false,
       },
+      onInstrumentationRequestError:
+        this.instrumentationOnRequestError.bind(this),
     }
 
     // Initialize next/config with the environment configuration
@@ -816,6 +824,31 @@ export default abstract class Server<
     return matchers
   }
 
+  protected async instrumentationOnRequestError(
+    ...args: Parameters<ServerOnInstrumentationRequestError>
+  ) {
+    const [err, req, ctx] = args
+
+    if (
+      process.env.__NEXT_EXPERIMENTAL_INSTRUMENTATION &&
+      this.instrumentation
+    ) {
+      this.instrumentation.onRequestError?.(
+        err,
+        {
+          url: req.url || '',
+          method: req.method || 'GET',
+          // Normalize middleware headers and other server request headers
+          headers:
+            req instanceof NextRequestHint
+              ? Object.fromEntries(req.headers.entries())
+              : req.headers,
+        },
+        ctx
+      )
+    }
+  }
+
   public logError(err: Error): void {
     if (this.quiet) return
     Log.error(err)
@@ -1538,6 +1571,8 @@ export default abstract class Server<
     if (this.prepared) return
 
     if (this.preparedPromise === null) {
+      // Get instrumentation module
+      this.instrumentation = await this.loadInstrumentationModule()
       this.preparedPromise = this.prepareImpl().then(() => {
         this.prepared = true
         this.preparedPromise = null
@@ -1546,6 +1581,7 @@ export default abstract class Server<
     return this.preparedPromise
   }
   protected async prepareImpl(): Promise<void> {}
+  protected async loadInstrumentationModule(): Promise<any> {}
 
   // Backwards compatibility
   protected async close(): Promise<void> {}
@@ -2394,6 +2430,8 @@ export default abstract class Server<
               isRevalidate: isSSG,
               waitUntil: this.getWaitUntil(),
               onClose: res.onClose.bind(res),
+              onInstrumentationRequestError:
+                this.renderOpts.onInstrumentationRequestError,
             },
           }
 
@@ -2457,6 +2495,12 @@ export default abstract class Server<
 
             Log.error(err)
 
+            this.instrumentationOnRequestError(err, req, {
+              routerKind: 'App Router',
+              routePath: pathname,
+              routeType: 'route',
+            })
+
             // Otherwise, send a 500 response.
             await sendResponse(req, res, handleInternalServerErrorResponse())
 
@@ -2487,18 +2531,27 @@ export default abstract class Server<
               : res
 
             // Call the built-in render method on the module.
-            result = await routeModule.render(
-              // TODO: fix this type
-              // @ts-expect-error - preexisting accepted this
-              request,
-              response,
-              {
-                page: pathname,
-                params: opts.params,
-                query,
-                renderOpts,
-              }
-            )
+            try {
+              result = await routeModule.render(
+                // TODO: fix this type
+                // @ts-expect-error - preexisting accepted this
+                request,
+                response,
+                {
+                  page: pathname,
+                  params: opts.params,
+                  query,
+                  renderOpts,
+                }
+              )
+            } catch (err) {
+              this.instrumentationOnRequestError(err, req, {
+                routerKind: 'Pages Router',
+                routePath: pathname,
+                routeType: 'render',
+              })
+              throw err
+            }
           } else {
             const module = components.routeModule as AppPageRouteModule