add error template

unjs · Aug 2, 2023 · a9caff2 · a9caff2
1 parent 9480026
commit a9caff2
Showing 1 changed file with 30 additions and 3 deletions.
diff --git a/src/watch.ts b/src/watch.ts
@@ -1,4 +1,4 @@
-import type { RequestListener } from "node:http";
+import type { RequestListener, ServerResponse } from "node:http";
 import { consola } from "consola";
 import { dirname } from "pathe";
 import type { AsyncSubscription } from "@parcel/watcher";
@@ -18,11 +18,15 @@ export async function listenAndWatch(
   // Initialize listener
   const listenter = await listen((req, res) => {
     if (error) {
-      res.end((error as Error)?.stack || error.toString());
+      res.setHeader("Content-Type", "text/html");
+      return res.end(errorTemplate(error.toString(), (error as Error)?.stack));
     } else if (handle) {
       return handle(req, res);
     } else {
-      res.end("Please wait for the server to load.");
+      res.setHeader("Content-Type", "text/html");
+      return res.end(
+        `<!DOCTYPE html><html lang="en-US"><meta http-equiv="refresh" content="3"></head><body><p>Server is loading...</p>`,
+      );
     }
   }, options);
 
@@ -91,3 +95,26 @@ export async function listenAndWatch(
 
   return listenter;
 }
+
+function errorTemplate(message: string, stack?: string) {
+  return `<!DOCTYPE html>
+  <html>
+  <head>
+  <title>Server Error</title>
+  <meta charset="utf-8">
+  <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name=viewport>
+  <style>
+  .error-page{padding: 1rem;background:#f7f8fb;color:#47494e;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}.error-page .error{max-width:450px}.error-page .title{font-size:24px;font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}.error-page .description{color:#7f828b;line-height:21px;margin-bottom:10px;text-align:left;}.error-page a{color:#7f828b!important;text-decoration:none}
+  </style>
+  </head>
+  <body>
+    <div class="error-page">
+      <div class="error">
+          <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48"><path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"/></svg>
+          <div class="title">Server Error</div>
+          <div class="description">${message}<pre>${stack}</pre></div>
+      </div>
+    </div>
+  </body>
+  </html>`;
+}