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] 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>