feat: read error from custom element attributes in vite-error-overlay

packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts

@@ -158,3 +158,12 @@ test('import.meta.url', async () => {
   await page.goto(url)
   expect(await page.textContent('.protocol')).toEqual('file:')
 })
+
+if (!isBuild) {
+  test('error overlay', async () => {
+    await page.goto(url + '/error')
+    expect(await page.textContent('vite-error-overlay .message-body')).toMatch(
+      'This should render vite-error-overlay'
+    )
+  })
+}

packages/playground/ssr-vue/server.js

@@ -52,10 +52,11 @@ async function createServer(
   }
 
   app.use('*', async (req, res) => {
+    let template, render
+
     try {
       const url = req.originalUrl
 
-      let template, render
       if (!isProd) {
         // always read fresh template in dev
         template = fs.readFileSync(resolve('index.html'), 'utf-8')
@@ -76,7 +77,20 @@ async function createServer(
     } catch (e) {
       vite && vite.ssrFixStacktrace(e)
       console.log(e.stack)
-      res.status(500).end(e.stack)
+
+      if (template && !isProd) {
+        res
+          .status(500)
+          .set({ 'Content-Type': 'text/html' })
+          .end(
+            template.replace(
+              `</body>`,
+              `<vite-error-overlay message="${e.message}" stack="${e.stack}"></vite-error-overlay>\n</body>`
+            )
+          )
+      } else {
+        res.status(500).end(e.stack)
+      }
     }
   })
 

packages/playground/ssr-vue/src/pages/Error.vue

@@ -0,0 +1,11 @@
+<template>
+  <h1>Error</h1>
+</template>
+
+<script>
+export default {
+  setup() {
+    throw new Error('This should render vite-error-overlay')
+  }
+}
+</script>

packages/vite/src/client/overlay.ts

@@ -123,6 +123,37 @@ export class ErrorOverlay extends HTMLElement {
     this.root = this.attachShadow({ mode: 'open' })
     this.root.innerHTML = template
 
+    if (!err) {
+      // In SSR, the overlay element can be directly injected in
+      // the HTML response with the error information as attributes.
+      err = {
+        id: this.getAttribute('id') || undefined,
+        message: this.getAttribute('message') || '',
+        stack: this.getAttribute('stack') || '',
+        plugin: this.getAttribute('plugin') || undefined,
+        pluginCode: this.getAttribute('plugin-code') || undefined,
+        frame: this.getAttribute('frame') || undefined,
+        loc: this.hasAttribute('loc-line')
+          ? {
+              file: this.getAttribute('loc-file') || undefined,
+              line: Number(this.getAttribute('loc-line')),
+              column: Number(this.getAttribute('loc-column'))
+            }
+          : undefined
+      }
+    }
+
+    this.showError(err)
+
+    this.root.querySelector('.window')!.addEventListener('click', (e) => {
+      e.stopPropagation()
+    })
+    this.addEventListener('click', () => {
+      this.close()
+    })
+  }
+
+  showError(err: ErrorPayload['err']) {
     codeframeRE.lastIndex = 0
     const hasFrame = err.frame && codeframeRE.test(err.frame)
     const message = hasFrame
@@ -144,13 +175,6 @@ export class ErrorOverlay extends HTMLElement {
       this.text('.frame', err.frame!.trim())
     }
     this.text('.stack', err.stack, true)
-
-    this.root.querySelector('.window')!.addEventListener('click', (e) => {
-      e.stopPropagation()
-    })
-    this.addEventListener('click', () => {
-      this.close()
-    })
   }
 
   text(selector: string, text: string, linkFiles = false): void {