feat(hmr): add runtimeErrors option

packages/vite/src/client/client.ts

@@ -19,6 +19,7 @@ declare const __HMR_DIRECT_TARGET__: string
 declare const __HMR_BASE__: string
 declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
+declare const __HMR_RUNTIME_ERRORS__: boolean | ((err: ErrorEvent) => unknown)
 declare const __WS_TOKEN__: string
 
 console.debug('[vite] connecting...')
@@ -37,6 +38,7 @@ const directSocketHost = __HMR_DIRECT_TARGET__
 const base = __BASE__ || '/'
 const hmrTimeout = __HMR_TIMEOUT__
 const wsToken = __WS_TOKEN__
+const runtimeErrors = __HMR_RUNTIME_ERRORS__
 
 const transport = normalizeModuleRunnerTransport(
   (() => {
@@ -109,6 +111,19 @@ if (typeof window !== 'undefined') {
   window.addEventListener?.('beforeunload', () => {
     willUnload = true
   })
+
+  if (runtimeErrors) {
+    if (typeof runtimeErrors === 'function') {
+      window.addEventListener('error', runtimeErrors)
+    } else {
+      window.addEventListener('error', (err: ErrorEvent) => {
+        const { error, message } = err
+        const errorObject =
+          error instanceof Error ? error : new Error(error || message)
+        createErrorOverlay(errorObject)
+      })
+    }
+  }
 }
 
 function cleanUrl(pathname: string): string {
@@ -306,7 +321,7 @@ async function handleMessage(payload: HotPayload) {
 const enableOverlay = __HMR_ENABLE_OVERLAY__
 const hasDocument = 'document' in globalThis
 
-function createErrorOverlay(err: ErrorPayload['err']) {
+function createErrorOverlay(err: ErrorPayload['err'] | Error) {
   clearErrorOverlay()
   const { customElements } = globalThis
   if (customElements) {

packages/vite/src/node/plugins/clientInjections.ts

@@ -48,6 +48,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
       const overlay = hmrConfig?.overlay !== false
       const isHmrServerSpecified = !!hmrConfig?.server
       const hmrConfigName = path.basename(config.configFile || 'vite.config.js')
+      const runtimeErrors = hmrConfig?.runtimeErrors ?? true
 
       // hmr.clientPort -> hmr.port
       // -> (24678 if middleware mode and HMR server is not specified) -> new URL(import.meta.url).port
@@ -77,6 +78,10 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
       const hmrEnableOverlayReplacement = escapeReplacement(overlay)
       const hmrConfigNameReplacement = escapeReplacement(hmrConfigName)
       const wsTokenReplacement = escapeReplacement(config.webSocketToken)
+      const hmrRuntimeErrorsReplacement =
+        typeof runtimeErrors === 'function'
+          ? () => runtimeErrors.toString()
+          : escapeReplacement(runtimeErrors)
 
       injectConfigValues = (code: string) => {
         return code
@@ -92,6 +97,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
           .replace(`__HMR_ENABLE_OVERLAY__`, hmrEnableOverlayReplacement)
           .replace(`__HMR_CONFIG_NAME__`, hmrConfigNameReplacement)
           .replace(`__WS_TOKEN__`, wsTokenReplacement)
+          .replace(`__HMR_RUNTIME_ERRORS__`, hmrRuntimeErrorsReplacement)
       }
     },
     async transform(code, id) {

packages/vite/src/node/server/hmr.ts

@@ -53,6 +53,7 @@ export interface HmrOptions {
   timeout?: number
   overlay?: boolean
   server?: HttpServer
+  runtimeErrors?: boolean | ((err: ErrorEvent) => unknown)
 }
 
 export interface HotUpdateOptions {