fix: error overlay on server hmr syntax error

Author: hi-ogawa

packages/plugin-rsc/src/plugin.ts

@@ -31,7 +31,7 @@ import {
 } from './transforms'
 import { generateEncryptionKey, toBase64 } from './utils/encryption-utils'
 import { createRpcServer } from './utils/rpc'
-import { normalizeViteImportAnalysisUrl } from './vite-utils'
+import { normalizeViteImportAnalysisUrl, prepareError } from './vite-utils'
 
 // state for build orchestration
 let serverReferences: Record<string, string> = {}
@@ -385,9 +385,22 @@ export default function vitePluginRsc(
             // transform js to surface syntax errors
             for (const mod of ctx.modules) {
               if (mod.type === 'js') {
-                await this.environment.transformRequest(mod.url)
+                try {
+                  await this.environment.transformRequest(mod.url)
+                } catch (e) {
+                  server.environments.client.hot.send({
+                    type: 'error',
+                    err: prepareError(e as any),
+                  })
+                  throw e
+                }
               }
             }
+            // send empty client updates to clear error overlay if any
+            ctx.server.environments.client.hot.send({
+              type: 'update',
+              updates: [],
+            })
             // server hmr
             ctx.server.environments.client.hot.send({
               type: 'custom',

packages/plugin-rsc/src/vite-utils.ts

@@ -2,7 +2,8 @@
 
 import fs from 'node:fs'
 import path from 'node:path'
-import type { DevEnvironment, Rollup } from 'vite'
+import type { DevEnvironment, ErrorPayload, Rollup } from 'vite'
+import { stripVTControlCharacters as strip } from 'node:util'
 
 export const VALID_ID_PREFIX = `/@id/`
 
@@ -125,3 +126,29 @@ export function normalizeViteImportAnalysisUrl(
 
   return url
 }
+
+// error formatting
+// https://github.com/vitejs/vite/blob/8033e5bf8d3ff43995d0620490ed8739c59171dd/packages/vite/src/node/server/middlewares/error.ts#L11
+
+type RollupError = Rollup.RollupError
+
+export function prepareError(err: Error | RollupError): ErrorPayload['err'] {
+  // only copy the information we need and avoid serializing unnecessary
+  // properties, since some errors may attach full objects (e.g. PostCSS)
+  return {
+    message: strip(err.message),
+    stack: strip(cleanStack(err.stack || '')),
+    id: (err as RollupError).id,
+    frame: strip((err as RollupError).frame || ''),
+    plugin: (err as RollupError).plugin,
+    pluginCode: (err as RollupError).pluginCode?.toString(),
+    loc: (err as RollupError).loc,
+  }
+}
+
+function cleanStack(stack: string) {
+  return stack
+    .split(/\n/)
+    .filter((l) => /^\s*at/.test(l))
+    .join('\n')
+}