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 diff --git a/packages/playground/html/__tests__/html.spec.ts b/packages/playground/html/__tests__/html.spec.ts index 823e2f4784ad7a..66f537e5026361 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,29 @@ 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 + }) + expect(message).toMatch(/^Unable to parse HTML/) + }) + + 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..5b5cf429687466 --- /dev/null +++ b/packages/playground/html/invalid.html @@ -0,0 +1 @@ +
diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts index 53ad4ccf611c2f..c9a95a66604bb3 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 + + + + + + `) } } }