fix(html): show error overlay when parsing invalid file (vitejs#6184)

arbassett · web-flow · commit 1f945f62bf4a · 2021-12-26T21:28:47.000+01:00
diff --git 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
@@ -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('<div Bad', '<div> 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
@@ -0,0 +1 @@
+<div Bad Html</div>
diff --git 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
@@ -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>
+      `)
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -485,3 +485,5 @@ export function injectQuery(url: string, queryToInject: string): string {`
`485`	`485`	`hash \|\| ''`
`486`	`486`	}`
`487`	`487`	`}`
	`488`	`+`
	`489`	`+export { ErrorOverlay }`