Add error handling and extract common logic

Author: unstubbable

packages/next/src/server/dev/hot-reloader-turbopack.ts

@@ -125,7 +125,11 @@ import { recordMcpTelemetry } from '../mcp/mcp-telemetry-tracker'
 import { getFileLogger } from './browser-logs/file-logger'
 import type { ServerCacheStatus } from '../../next-devtools/dev-overlay/cache-indicator'
 import type { Lockfile } from '../../build/lockfile'
-import { streamToUint8Array } from '../stream-utils/node-web-streams-helper'
+import {
+  sendSerializedErrorsToClient,
+  sendSerializedErrorsToClientForHtmlRequest,
+  setErrorsRscStreamForHtmlRequest,
+} from './serialized-errors'
 
 const wsServer = new ws.Server({ noServer: true })
 const isTestMode = !!(
@@ -444,10 +448,6 @@ export async function createHotReloaderTurbopack(
   const clientsWithoutHtmlRequestId = new Set<ws>()
   const clientsByHtmlRequestId = new Map<string, ws>()
   const cacheStatusesByHtmlRequestId = new Map<string, ServerCacheStatus>()
-  const errorsRscStreamsByHtmlRequestId = new Map<
-    string,
-    ReadableStream<Uint8Array>
-  >()
   const clientStates = new WeakMap<ws, ClientState>()
 
   function sendToClient(client: ws, message: HmrMessageSentToBrowser) {
@@ -917,17 +917,10 @@ export async function createHotReloaderTurbopack(
             sendToClient.bind(null, client)
           )
 
-          const errorsRscStream =
-            errorsRscStreamsByHtmlRequestId.get(htmlRequestId)
-          if (errorsRscStream !== undefined) {
-            streamToUint8Array(errorsRscStream).then((serializedErrors) =>
-              sendToClient(client, {
-                type: HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER,
-                serializedErrors,
-              })
-            )
-            errorsRscStreamsByHtmlRequestId.delete(htmlRequestId)
-          }
+          sendSerializedErrorsToClientForHtmlRequest(
+            htmlRequestId,
+            sendToClient.bind(null, client)
+          )
         } else {
           clientsWithoutHtmlRequestId.add(client)
           onUpgrade(client, { isLegacyClient: true })
@@ -1201,17 +1194,17 @@ export async function createHotReloaderTurbopack(
 
     sendErrorsToBrowser(errorsRscStream, htmlRequestId) {
       const client = clientsByHtmlRequestId.get(htmlRequestId)
-      if (client !== undefined) {
-        streamToUint8Array(errorsRscStream).then((serializedErrors) => {
-          sendToClient(client, {
-            type: HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER,
-            serializedErrors,
-          })
-        })
+
+      if (client) {
+        // If the client is connected, we can send the errors immediately.
+        sendSerializedErrorsToClient(
+          errorsRscStream,
+          sendToClient.bind(null, client)
+        )
       } else {
-        // If the client is not connected, store the errors stream so that we
-        // can send it when the client connects.
-        errorsRscStreamsByHtmlRequestId.set(htmlRequestId, errorsRscStream)
+        // Otherwise, store the errors stream so that we can send it when the
+        // client connects.
+        setErrorsRscStreamForHtmlRequest(htmlRequestId, errorsRscStream)
       }
     },
 

packages/next/src/server/dev/hot-reloader-webpack.ts

@@ -114,7 +114,11 @@ import { recordMcpTelemetry } from '../mcp/mcp-telemetry-tracker'
 import { getFileLogger } from './browser-logs/file-logger'
 import type { ServerCacheStatus } from '../../next-devtools/dev-overlay/cache-indicator'
 import type { Lockfile } from '../../build/lockfile'
-import { streamToUint8Array } from '../stream-utils/node-web-streams-helper'
+import {
+  sendSerializedErrorsToClient,
+  sendSerializedErrorsToClientForHtmlRequest,
+  setErrorsRscStreamForHtmlRequest,
+} from './serialized-errors'
 
 const MILLISECONDS_IN_NANOSECOND = BigInt(1_000_000)
 
@@ -259,10 +263,6 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
   private reloadAfterInvalidation: boolean = false
   private isSrcDir: boolean
   private cacheStatusesByRequestId = new Map<string, ServerCacheStatus>()
-  private errorsRscStreamsByHtmlRequestId = new Map<
-    string,
-    ReadableStream<Uint8Array>
-  >()
 
   public serverStats: webpack.Stats | null
   public edgeServerStats: webpack.Stats | null
@@ -651,6 +651,11 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
           this.sendToClient.bind(this, client)
         )
 
+        sendSerializedErrorsToClientForHtmlRequest(
+          htmlRequestId,
+          this.sendToClient.bind(this, client)
+        )
+
         if (enableCacheComponents) {
           const status = this.cacheStatusesByRequestId.get(htmlRequestId)
           if (status) {
@@ -661,18 +666,6 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
             this.cacheStatusesByRequestId.delete(htmlRequestId)
           }
         }
-
-        const errorsRscStream =
-          this.errorsRscStreamsByHtmlRequestId.get(htmlRequestId)
-        if (errorsRscStream !== undefined) {
-          streamToUint8Array(errorsRscStream).then((serializedErrors) => {
-            this.sendToClient(client, {
-              type: HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER,
-              serializedErrors,
-            })
-          })
-          this.errorsRscStreamsByHtmlRequestId.delete(htmlRequestId)
-        }
       }
 
       client.on('close', () => {
@@ -1821,17 +1814,17 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
     htmlRequestId: string
   ): void {
     const client = this.webpackHotMiddleware?.getClient(htmlRequestId)
-    if (client !== undefined) {
-      streamToUint8Array(errorsRscStream).then((serializedErrors) => {
-        this.sendToClient(client, {
-          type: HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER,
-          serializedErrors,
-        })
-      })
+
+    if (client) {
+      // If the client is connected, we can send the errors immediately.
+      sendSerializedErrorsToClient(
+        errorsRscStream,
+        this.sendToClient.bind(this, client)
+      )
     } else {
-      // If the client is not connected, store the errors stream so that we can
-      // send it when the client connects.
-      this.errorsRscStreamsByHtmlRequestId.set(htmlRequestId, errorsRscStream)
+      // Otherwise, store the errors stream so that we can send it when the
+      // client connects.
+      setErrorsRscStreamForHtmlRequest(htmlRequestId, errorsRscStream)
     }
   }
 

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

@@ -0,0 +1,55 @@
+import { streamToUint8Array } from '../stream-utils/node-web-streams-helper'
+import {
+  HMR_MESSAGE_SENT_TO_BROWSER,
+  type HmrMessageSentToBrowser,
+} from './hot-reloader-types'
+
+const errorsRscStreamsByHtmlRequestId = new Map<
+  string,
+  ReadableStream<Uint8Array>
+>()
+
+export function sendSerializedErrorsToClient(
+  errorsRscStream: ReadableStream<Uint8Array>,
+  sendToClient: (message: HmrMessageSentToBrowser) => void
+) {
+  streamToUint8Array(errorsRscStream).then(
+    (serializedErrors) => {
+      sendToClient({
+        type: HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER,
+        serializedErrors,
+      })
+    },
+    (err) => {
+      console.error(new Error('Failed to serialize errors.', { cause: err }))
+    }
+  )
+}
+
+export function sendSerializedErrorsToClientForHtmlRequest(
+  htmlRequestId: string,
+  sendToClient: (message: HmrMessageSentToBrowser) => void
+) {
+  const errorsRscStream = errorsRscStreamsByHtmlRequestId.get(htmlRequestId)
+
+  if (!errorsRscStream) {
+    return
+  }
+
+  errorsRscStreamsByHtmlRequestId.delete(htmlRequestId)
+
+  sendSerializedErrorsToClient(errorsRscStream, sendToClient)
+}
+
+export function setErrorsRscStreamForHtmlRequest(
+  htmlRequestId: string,
+  errorsRscStream: ReadableStream<Uint8Array>
+) {
+  // TODO: Clean up after a timeout, in case the client never connects, e.g.
+  // when CURL'ing the page, or loading the page with JavaScript disabled etc.
+  errorsRscStreamsByHtmlRequestId.set(htmlRequestId, errorsRscStream)
+}
+
+export function deleteErrorsRscStreamForHtmlRequest(htmlRequestId: string) {
+  errorsRscStreamsByHtmlRequestId.delete(htmlRequestId)
+}