fix: fix error overlay stack

vitejs · Apr 10, 2024 · 5f0e6a3 · 5f0e6a3
1 parent f8e0791
commit 5f0e6a3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
@@ -165,7 +165,6 @@ kbd {
 `
 
 // Error Template
-let template: HTMLElement
 const createTemplate = () =>
   h(
     'div',
@@ -214,9 +213,7 @@ export class ErrorOverlay extends HTMLElement {
   constructor(err: ErrorPayload['err'], links = true) {
     super()
     this.root = this.attachShadow({ mode: 'open' })
-
-    template ??= createTemplate()
-    this.root.appendChild(template)
+    this.root.appendChild(createTemplate())
 
     codeframeRE.lastIndex = 0
     const hasFrame = err.frame && codeframeRE.test(err.frame)

diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts
@@ -282,6 +282,29 @@ describe.runIf(isServe)('invalid', () => {
     const content = await page.waitForSelector('text=Good HTML')
     expect(content).toBeTruthy()
   })
+
+  test('stack', async () => {
+    await page.goto(viteTestUrl + '/invalid.html')
+
+    const errorOverlay = await page.waitForSelector('vite-error-overlay')
+    const hiddenPromise = errorOverlay.waitForElementState('hidden')
+    await page.keyboard.press('Escape')
+    await hiddenPromise
+
+    viteServer.hot.send({
+      type: 'error',
+      err: {
+        message: 'someError',
+        stack: [
+          'Error: someError',
+          '    at someMethod (/some/file.ts:1:2)',
+        ].join('\n'),
+      },
+    })
+    const newErrorOverlay = await page.waitForSelector('vite-error-overlay')
+    const stack = await newErrorOverlay.$$eval('.stack', (m) => m[0].innerHTML)
+    expect(stack).toMatch(/^Error: someError/)
+  })
 })
 
 describe('Valid HTML', () => {