inject devtools integration via onAfterTaskError

packages/next/src/server/after/after-context.ts

@@ -17,11 +17,6 @@ import {
   patchAfterCallstackInDev,
   type OriginalStacks,
 } from './after-dev-callstacks'
-import {
-  HMR_ACTIONS_SENT_TO_BROWSER,
-  type NextJsHotReloaderInterface,
-} from '../dev/hot-reloader-types'
-import { stringifyError } from '../../shared/lib/utils'
 
 export type AfterContextOpts = {
   isEnabled: boolean
@@ -185,8 +180,6 @@ export class AfterContext {
           )
         }
       }
-
-      reportAfterErrorInDev(error)
     }
 
     if (this.onTaskError) {
@@ -207,28 +200,6 @@ export class AfterContext {
   }
 }
 
-function reportAfterErrorInDev(error: unknown) {
-  // TODO: we probably want to inject this as `onAfterTaskError` from NextDevServer,
-  // where we have access to `bundlerService` (which has the hotReloader)
-  const hotReloader: NextJsHotReloaderInterface | undefined =
-    // @ts-expect-error
-    globalThis[Symbol.for('@next/dev/hot-reloader')]
-
-  hotReloader?.send({
-    action: HMR_ACTIONS_SENT_TO_BROWSER.AFTER_ERROR,
-    source: process.env.NEXT_RUNTIME === 'edge' ? 'edge-server' : 'server',
-    errorJSON: isError(error)
-      ? stringifyError(error)
-      : (() => {
-          try {
-            return JSON.stringify(error)
-          } catch (_) {
-            return '<unknown>'
-          }
-        })(),
-  })
-}
-
 function errorWaitUntilNotAvailable(): never {
   throw new Error(
     '`unstable_after()` will not work correctly, because `waitUntil` is not available in the current environment.'

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

@@ -366,6 +366,8 @@ export default abstract class Server<
   protected readonly enabledDirectories: NextEnabledDirectories
   protected abstract getEnabledDirectories(dev: boolean): NextEnabledDirectories
 
+  protected afterTaskErrorHandler: ((error: unknown) => void) | undefined
+
   protected readonly experimentalTestProxy?: boolean
 
   protected abstract findPageComponents(params: {
@@ -2438,7 +2440,7 @@ export default abstract class Server<
         postponed,
         waitUntil: this.getWaitUntil(),
         onClose: res.onClose.bind(res),
-        onAfterTaskError: undefined,
+        onAfterTaskError: this.afterTaskErrorHandler,
         // only available in dev
         setAppIsrStatus: (this as any).setAppIsrStatus,
       }
@@ -2486,7 +2488,7 @@ export default abstract class Server<
               isRevalidate: isSSG,
               waitUntil: this.getWaitUntil(),
               onClose: res.onClose.bind(res),
-              onAfterTaskError: undefined,
+              onAfterTaskError: this.afterTaskErrorHandler,
               onInstrumentationRequestError:
                 this.renderOpts.onInstrumentationRequestError,
               buildId: this.renderOpts.buildId,

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

@@ -200,6 +200,15 @@ export default class DevServer extends Server {
     this.pagesDir = pagesDir
     this.appDir = appDir
 
+    if (this.nextConfig.experimental.after) {
+      this.afterTaskErrorHandler = (error: unknown) => {
+        return this.bundlerService.reportAfterTaskError(
+          error,
+          process.env.NEXT_RUNTIME === 'edge' ? 'edge-server' : 'server'
+        )
+      }
+    }
+
     if (this.nextConfig.experimental.serverComponentsHmrCache) {
       this.serverComponentsHmrCache = new LRUCache(
         this.nextConfig.cacheMaxMemorySize,

packages/next/src/server/lib/dev-bundler-service.ts

@@ -38,6 +38,11 @@ export class DevBundlerService {
       return await this.bundler.logErrorWithOriginalStack(...args)
     }
 
+  public reportAfterTaskError: typeof this.bundler.reportAfterTaskError =
+    async (...args) => {
+      return await this.bundler.reportAfterTaskError(...args)
+    }
+
   public async getFallbackErrorComponents(url?: string) {
     await this.bundler.hotReloader.buildFallbackError()
     // Build the error page to ensure the fallback is built too.

packages/next/src/server/lib/router-utils/setup-dev-bundler.ts

@@ -81,7 +81,10 @@ import type { LazyRenderServerInstance } from '../router-server'
 import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../dev/hot-reloader-types'
 import { PAGE_TYPES } from '../../../lib/page-types'
 import { createHotReloaderTurbopack } from '../../dev/hot-reloader-turbopack'
-import { getErrorSource } from '../../../shared/lib/error-source'
+import {
+  getErrorSource,
+  type ErrorSourceType,
+} from '../../../shared/lib/error-source'
 import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 import { generateEncryptionKeyBase64 } from '../../app-render/encryption-utils-server'
 import {
@@ -93,6 +96,7 @@ import { normalizeMetadataPageToRoute } from '../../../lib/metadata/get-metadata
 import { createEnvDefinitions } from '../experimental/create-env-definitions'
 import { JsConfigPathsPlugin } from '../../../build/webpack/plugins/jsconfig-paths-plugin'
 import { store as consoleStore } from '../../../build/output/store'
+import { stringifyError } from '../../../shared/lib/utils'
 
 export type SetupOpts = {
   renderServer: LazyRenderServerInstance
@@ -1074,11 +1078,32 @@ async function startWatcher(opts: SetupOpts) {
     }
   }
 
+  async function reportAfterTaskError(error: unknown, source: ErrorSourceType) {
+    const serializeErrorToJSON = (err: unknown) => {
+      if (isError(err)) {
+        return stringifyError(err)
+      }
+
+      try {
+        return JSON.stringify(err)
+      } catch (_) {
+        return '<unknown>'
+      }
+    }
+
+    hotReloader.send({
+      action: HMR_ACTIONS_SENT_TO_BROWSER.AFTER_ERROR,
+      source: source,
+      errorJSON: serializeErrorToJSON(error),
+    })
+  }
+
   return {
     serverFields,
     hotReloader,
     requestHandler,
     logErrorWithOriginalStack,
+    reportAfterTaskError,
 
     async ensureMiddleware(requestUrl?: string) {
       if (!serverFields.actualMiddlewareFile) return