From 17ca6445388904a5dbf5188d2b3fce9043895540 Mon Sep 17 00:00:00 2001 From: Aaron Bassett Date: Sun, 19 Dec 2021 16:06:44 -0500 Subject: [PATCH 1/5] fix(html): Show error overlay when parsing invalid file --- .../playground/html/__tests__/html.spec.ts | 31 ++++++++++++++++++- packages/playground/html/invalid.html | 1 + packages/vite/src/client/client.ts | 2 ++ .../vite/src/node/server/middlewares/error.ts | 18 ++++++++++- 4 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 packages/playground/html/invalid.html diff --git a/packages/playground/html/__tests__/html.spec.ts b/packages/playground/html/__tests__/html.spec.ts index 823e2f4784ad7a..653f88e7e9ac7f 100644 --- a/packages/playground/html/__tests__/html.spec.ts +++ b/packages/playground/html/__tests__/html.spec.ts @@ -1,4 +1,4 @@ -import { getColor, isBuild } from '../../testUtils' +import { getColor, isBuild, editFile } from '../../testUtils' function testPage(isNested: boolean) { test('pre transform', async () => { @@ -210,3 +210,32 @@ describe('unicode path', () => { expect(await page.textContent('h1')).toBe('unicode-path') }) }) + +if (!isBuild) { + describe('invalid', () => { + test('should be 500 with overlay', async () => { + const response = await page.goto(viteTestUrl + '/invalid.html') + expect(response.status()).toBe(500) + + const errorOverlay = await page.waitForSelector('vite-error-overlay') + expect(errorOverlay).toBeTruthy() + + const message = await errorOverlay.$$eval('.message-body', (m) => { + return m[0].innerHTML + }) + // use regex with variable filename and position values because they are different on win + expect(message).toMatch( + /^Unable to parse {"file":"\/invalid.html","line":.*,"column":.*}/ + ) + }) + + test('should reload when fixed', async () => { + const response = await page.goto(viteTestUrl + '/invalid.html') + await editFile('invalid.html', (content) => { + return content.replace('
Good') + }) + const content = await page.waitForSelector('text=Good Html') + expect(content).toBeTruthy() + }) + }) +} diff --git a/packages/playground/html/invalid.html b/packages/playground/html/invalid.html new file mode 100644 index 00000000000000..94623156ab58aa --- /dev/null +++ b/packages/playground/html/invalid.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts index c801b716d0318c..caeace6384ed04 100644 --- a/packages/vite/src/client/client.ts +++ b/packages/vite/src/client/client.ts @@ -485,3 +485,5 @@ export function injectQuery(url: string, queryToInject: string): string { hash || '' }` } + +export { ErrorOverlay } diff --git a/packages/vite/src/node/server/middlewares/error.ts b/packages/vite/src/node/server/middlewares/error.ts index ae24c9a7b81e44..eeb7f6bb18b813 100644 --- a/packages/vite/src/node/server/middlewares/error.ts +++ b/packages/vite/src/node/server/middlewares/error.ts @@ -69,7 +69,23 @@ export function errorMiddleware( next() } else { res.statusCode = 500 - res.end() + res.end(` + + + + + Error + + + + + + `) } } } From 58b8a7fa945f05be2eab038b3ba0c565fb051467 Mon Sep 17 00:00:00 2001 From: Aaron Bassett Date: Sun, 19 Dec 2021 16:20:45 -0500 Subject: [PATCH 2/5] fix(html): better overlay message regex --- packages/playground/html/__tests__/html.spec.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/playground/html/__tests__/html.spec.ts b/packages/playground/html/__tests__/html.spec.ts index 653f88e7e9ac7f..94a213d738597a 100644 --- a/packages/playground/html/__tests__/html.spec.ts +++ b/packages/playground/html/__tests__/html.spec.ts @@ -223,9 +223,8 @@ if (!isBuild) { const message = await errorOverlay.$$eval('.message-body', (m) => { return m[0].innerHTML }) - // use regex with variable filename and position values because they are different on win expect(message).toMatch( - /^Unable to parse {"file":"\/invalid.html","line":.*,"column":.*}/ + /^Unable to parse {"file":".*","line":.*,"column":.*}/ ) }) From 2fe8db988277c39d10da0ba436461e3c850ff4fe Mon Sep 17 00:00:00 2001 From: Aaron Bassett Date: Sun, 19 Dec 2021 16:39:47 -0500 Subject: [PATCH 3/5] fix: overlay message regex --- packages/playground/html/__tests__/html.spec.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/playground/html/__tests__/html.spec.ts b/packages/playground/html/__tests__/html.spec.ts index 94a213d738597a..66f537e5026361 100644 --- a/packages/playground/html/__tests__/html.spec.ts +++ b/packages/playground/html/__tests__/html.spec.ts @@ -223,9 +223,7 @@ if (!isBuild) { const message = await errorOverlay.$$eval('.message-body', (m) => { return m[0].innerHTML }) - expect(message).toMatch( - /^Unable to parse {"file":".*","line":.*,"column":.*}/ - ) + expect(message).toMatch(/^Unable to parse HTML/) }) test('should reload when fixed', async () => { From 9e5dba361ce731904f20d1b2fa8f41d19d290ef4 Mon Sep 17 00:00:00 2001 From: Aaron Bassett Date: Sun, 19 Dec 2021 16:40:46 -0500 Subject: [PATCH 4/5] fix: prettier ignore invalid.html --- .prettierignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.prettierignore b/.prettierignore index 76d0e7f08c2be1..1692b9d26cfa20 100644 --- a/.prettierignore +++ b/.prettierignore @@ -9,3 +9,4 @@ LICENSE.md pnpm-lock.yaml pnpm-workspace.yaml packages/playground/tsconfig-json-load-error/has-error/tsconfig.json +packages/playground/html/invalid.html From 6f524c4757810f9a051af0718a6d829288558438 Mon Sep 17 00:00:00 2001 From: Aaron Bassett Date: Sun, 19 Dec 2021 23:46:47 -0500 Subject: [PATCH 5/5] Update packages/playground/html/invalid.html Add missing new line Co-authored-by: Jeff Yang <32727188+ydcjeff@users.noreply.github.com> --- packages/playground/html/invalid.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/playground/html/invalid.html b/packages/playground/html/invalid.html index 94623156ab58aa..5b5cf429687466 100644 --- a/packages/playground/html/invalid.html +++ b/packages/playground/html/invalid.html @@ -1 +1 @@ -
\ No newline at end of file +