From 1f774b24f0ea3199d34a23a3b1b1409955154fbb Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Fri, 7 Jun 2024 15:31:11 -0700
Subject: [PATCH 1/3] fix: show error if vite client cannot be loaded

---
 packages/vite/src/node/server/middlewares/error.ts | 2 ++
 playground/html/__tests__/html.spec.ts             | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/vite/src/node/server/middlewares/error.ts b/packages/vite/src/node/server/middlewares/error.ts
index 1d67f1aa55e4ed..1dc287e6e1c72f 100644
--- a/packages/vite/src/node/server/middlewares/error.ts
+++ b/packages/vite/src/node/server/middlewares/error.ts
@@ -84,6 +84,8 @@ export function errorMiddleware(
             </script>
           </head>
           <body>
+            <h1>Internal Server Error</h1>
+            <pre>${err.stack?.replace(/</g, '&lt;')}</pre>
           </body>
         </html>
       `)
diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts
index 85ceea961752ee..2d12082c9dff68 100644
--- a/playground/html/__tests__/html.spec.ts
+++ b/playground/html/__tests__/html.spec.ts
@@ -259,7 +259,7 @@ describe.runIf(isServe)('invalid', () => {
     const errorOverlay = await page.waitForSelector('vite-error-overlay')
     expect(errorOverlay).toBeTruthy()
 
-    await page.click('html')
+    await page.click('html', { position: { x: 50, y: 50 } })
     const isVisbleOverlay = await errorOverlay.isVisible()
     expect(isVisbleOverlay).toBeFalsy()
   })

From b7ef5142999ec673661889e1310be134adc367fd Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 12 Jun 2024 20:04:21 -0700
Subject: [PATCH 2/3] render the error in html only if the error overlay fails
 to load

---
 packages/vite/src/node/server/middlewares/error.ts | 14 ++++++++------
 playground/html/__tests__/html.spec.ts             |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/vite/src/node/server/middlewares/error.ts b/packages/vite/src/node/server/middlewares/error.ts
index 1dc287e6e1c72f..5d4ab39e9b0333 100644
--- a/packages/vite/src/node/server/middlewares/error.ts
+++ b/packages/vite/src/node/server/middlewares/error.ts
@@ -77,15 +77,17 @@ export function errorMiddleware(
             <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')}))
+              try {
+                const { ErrorOverlay } = await import('/@vite/client')
+                document.body.appendChild(new ErrorOverlay(${JSON.stringify(
+                  prepareError(err),
+                ).replace(/</g, '\\u003c')}))
+              } catch {
+                document.innerHTML = \`<h1>Internal Server Error</h1><h2>Error overlay failed to load</h2><pre>${err.stack?.replaceAll('<', '&lt;').replaceAll('$', '&dollar;')}</pre>\`
+              }
             </script>
           </head>
           <body>
-            <h1>Internal Server Error</h1>
-            <pre>${err.stack?.replace(/</g, '&lt;')}</pre>
           </body>
         </html>
       `)
diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts
index 2d12082c9dff68..85ceea961752ee 100644
--- a/playground/html/__tests__/html.spec.ts
+++ b/playground/html/__tests__/html.spec.ts
@@ -259,7 +259,7 @@ describe.runIf(isServe)('invalid', () => {
     const errorOverlay = await page.waitForSelector('vite-error-overlay')
     expect(errorOverlay).toBeTruthy()
 
-    await page.click('html', { position: { x: 50, y: 50 } })
+    await page.click('html')
     const isVisbleOverlay = await errorOverlay.isVisible()
     expect(isVisbleOverlay).toBeFalsy()
   })

From 30b9310c893df2706d996c18661e2b860aa96e49 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Thu, 18 Jul 2024 16:36:09 +0800
Subject: [PATCH 3/3] chore: improve logging

---
 .../vite/src/node/server/middlewares/error.ts  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/node/server/middlewares/error.ts b/packages/vite/src/node/server/middlewares/error.ts
index 5d4ab39e9b0333..1a17e5814473f2 100644
--- a/packages/vite/src/node/server/middlewares/error.ts
+++ b/packages/vite/src/node/server/middlewares/error.ts
@@ -77,13 +77,23 @@ export function errorMiddleware(
             <meta charset="UTF-8" />
             <title>Error</title>
             <script type="module">
+              const error = ${JSON.stringify(prepareError(err)).replace(
+                /</g,
+                '\\u003c',
+              )}
               try {
                 const { ErrorOverlay } = await import('/@vite/client')
-                document.body.appendChild(new ErrorOverlay(${JSON.stringify(
-                  prepareError(err),
-                ).replace(/</g, '\\u003c')}))
+                document.body.appendChild(new ErrorOverlay(error))
               } catch {
-                document.innerHTML = \`<h1>Internal Server Error</h1><h2>Error overlay failed to load</h2><pre>${err.stack?.replaceAll('<', '&lt;').replaceAll('$', '&dollar;')}</pre>\`
+                const h = (tag, text) => {
+                  const el = document.createElement(tag)
+                  el.textContent = text
+                  return el
+                }
+                document.body.appendChild(h('h1', 'Internal Server Error'))
+                document.body.appendChild(h('h2', error.message))
+                document.body.appendChild(h('pre', error.stack))
+                document.body.appendChild(h('p', '(Error overlay failed to load)'))
               }
             </script>
           </head>
