From 102c2fd5ad32a607f2b14dd728e8a802b7ddce34 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Sat, 13 Apr 2024 23:48:08 +0900 Subject: [PATCH] fix: fix accumulated stacks in error overlay (#16393) --- packages/vite/src/client/overlay.ts | 5 +---- playground/html/__tests__/html.spec.ts | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts index f0e34cac19e68e..63f570be488efb 100644 --- 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 index 1baab83cf6a792..ed06f730308a4d 100644 --- a/playground/html/__tests__/html.spec.ts +++ b/playground/html/__tests__/html.spec.ts @@ -274,6 +274,29 @@ describe.runIf(isServe)('invalid', () => { expect(isVisbleOverlay).toBeFalsy() }) + test('stack is updated', 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/) + }) + test('should reload when fixed', async () => { await page.goto(viteTestUrl + '/invalid.html') await editFile('invalid.html', (content) => {