Send dynamic validation errors to browser via WebSocket

packages/next/errors.json

@@ -943,5 +943,8 @@
   "942": "Unexpected stream chunk while in Before stage",
   "943": "getFlightStream should always receive a ReadableStream when using the edge runtime",
   "944": "nodeStreamFromReadableStream cannot be used in the edge runtime",
-  "945": "createNodeStreamFromChunks cannot be used in the edge runtime"
+  "945": "createNodeStreamFromChunks cannot be used in the edge runtime",
+  "946": "Failed to deserialize errors.",
+  "947": "Expected `sendErrorsToBrowser` to be defined in renderOpts.",
+  "948": "Failed to serialize errors."
 }

packages/next/src/build/templates/app-page.ts

@@ -545,6 +545,7 @@ export async function handler(
           setCacheStatus: routerServerContext?.setCacheStatus,
           setIsrStatus: routerServerContext?.setIsrStatus,
           setReactDebugChannel: routerServerContext?.setReactDebugChannel,
+          sendErrorsToBrowser: routerServerContext?.sendErrorsToBrowser,
 
           dir:
             process.env.NEXT_RUNTIME === 'nodejs'

packages/next/src/client/dev/hot-reloader/app/hot-reloader-app.tsx

@@ -38,12 +38,19 @@ import {
 } from '../../../components/app-router-instance'
 import { InvariantError } from '../../../../shared/lib/invariant-error'
 import { getOrCreateDebugChannelReadableWriterPair } from '../../debug-channel'
+// TODO: Explicitly import from client.browser (doesn't work with Webpack).
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createFromReadableStream as createFromReadableStreamBrowser } from 'react-server-dom-webpack/client'
+import { findSourceMapURL } from '../../../app-find-source-map-url'
 
 export interface StaticIndicatorState {
   pathname: string | null
   appIsrManifest: Record<string, boolean> | null
 }
 
+const createFromReadableStream =
+  createFromReadableStreamBrowser as (typeof import('react-server-dom-webpack/client.browser'))['createFromReadableStream']
+
 let mostRecentCompilationHash: any = null
 let __nextDevClientId = Math.round(Math.random() * 100 + Date.now())
 let reloading = false
@@ -504,6 +511,29 @@ export function processMessage(
       dispatcher.onCacheIndicator(message.state)
       return
     }
+    case HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER: {
+      createFromReadableStream<Error[]>(
+        new ReadableStream({
+          start(controller) {
+            controller.enqueue(message.serializedErrors)
+            controller.close()
+          },
+        }),
+        { findSourceMapURL }
+      ).then(
+        (errors) => {
+          for (const error of errors) {
+            console.error(error)
+          }
+        },
+        (err) => {
+          console.error(
+            new Error('Failed to deserialize errors.', { cause: err })
+          )
+        }
+      )
+      return
+    }
     case HMR_MESSAGE_SENT_TO_BROWSER.MIDDLEWARE_CHANGES:
     case HMR_MESSAGE_SENT_TO_BROWSER.CLIENT_CHANGES:
     case HMR_MESSAGE_SENT_TO_BROWSER.SERVER_ONLY_CHANGES:

packages/next/src/client/dev/hot-reloader/app/web-socket.ts

@@ -223,6 +223,14 @@ function parseBinaryMessage(data: ArrayBuffer): HmrMessageSentToBrowser {
   const messageType = view.getUint8(0)
 
   switch (messageType) {
+    case HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER: {
+      const serializedErrors = new Uint8Array(data, 1)
+
+      return {
+        type: HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER,
+        serializedErrors,
+      }
+    }
     case HMR_MESSAGE_SENT_TO_BROWSER.REACT_DEBUG_CHUNK: {
       assertByteLength(data, 2)
       const requestIdLength = view.getUint8(1)

packages/next/src/client/dev/hot-reloader/pages/hot-reloader-pages.ts

@@ -394,6 +394,7 @@ function processMessage(message: HmrMessageSentToBrowser) {
       break
     case HMR_MESSAGE_SENT_TO_BROWSER.CACHE_INDICATOR:
     case HMR_MESSAGE_SENT_TO_BROWSER.REACT_DEBUG_CHUNK:
+    case HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER:
       // Only relevant for app router.
       break
     case HMR_MESSAGE_SENT_TO_BROWSER.MIDDLEWARE_CHANGES:

packages/next/src/client/page-bootstrap.ts

@@ -124,6 +124,7 @@ export function pageBootstrap(assetPrefix: string) {
         case HMR_MESSAGE_SENT_TO_BROWSER.REQUEST_CURRENT_ERROR_STATE:
         case HMR_MESSAGE_SENT_TO_BROWSER.REQUEST_PAGE_METADATA:
         case HMR_MESSAGE_SENT_TO_BROWSER.CACHE_INDICATOR:
+        case HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER:
           // Most of these action types are handled in
           // src/client/dev/hot-reloader/pages/hot-reloader-pages.ts and
           // src/client/dev/hot-reloader/app/hot-reloader-app.tsx