Skip to content

Commit

Permalink
fix(html): show error overlay when parsing invalid file (vitejs#6184)
Browse files Browse the repository at this point in the history
  • Loading branch information
arbassett authored Dec 26, 2021
1 parent 1d722c5 commit 1f945f6
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 2 deletions.
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
28 changes: 27 additions & 1 deletion packages/playground/html/__tests__/html.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getColor, isBuild } from '../../testUtils'
import { getColor, isBuild, editFile } from '../../testUtils'

function testPage(isNested: boolean) {
test('pre transform', async () => {
Expand Down Expand Up @@ -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('<div Bad', '<div> Good')
})
const content = await page.waitForSelector('text=Good Html')
expect(content).toBeTruthy()
})
})
}
1 change: 1 addition & 0 deletions packages/playground/html/invalid.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div Bad Html</div>
2 changes: 2 additions & 0 deletions packages/vite/src/client/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -485,3 +485,5 @@ export function injectQuery(url: string, queryToInject: string): string {
hash || ''
}`
}

export { ErrorOverlay }
18 changes: 17 additions & 1 deletion packages/vite/src/node/server/middlewares/error.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,23 @@ export function errorMiddleware(
next()
} else {
res.statusCode = 500
res.end()
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Error</title>
<script type="module">
import { ErrorOverlay } from '/@vite/client'
document.body.appendChild(new ErrorOverlay(${JSON.stringify(
prepareError(err)
).replace(/</g, '\\u003c')}))
</script>
</head>
<body>
</body>
</html>
`)
}
}
}

0 comments on commit 1f945f6

Please sign in to comment.