Better error page

MeteorProxy · Jul 18, 2024 · 41fa031 · 41fa031
1 parent 3f4e258
commit 41fa031
Showing 1 changed file with 43 additions and 24 deletions.
diff --git a/src/worker.ts b/src/worker.ts
@@ -116,41 +116,60 @@ class MeteorServiceWorker {
       })
     } catch (error) {
       self.$meteor.util.log(error, '#FF5757')
-      return this.renderError(error, version)
+      const url = self.$meteor.rewrite.url.decode(request.url)
+      return this.renderError(error, url, version)
     }
   }
 
-  renderError(error: Error, version: string) {
+  renderError(error: Error, url: string, version: string) {
     return new Response(
-      typeof self.$meteor.config.errorPage === 'string'
-        ? self.$meteor.config.errorPage
-        : `
+      `
         <!DOCTYPE html>
         <html lang="en">
           <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            ${self.$meteor.config.errorPage?.head || ''}
-            <title>Error</title>
-            <style>
-              body {
-                font-family: system-ui;
-                display: flex;
-                flex-direction: column;
-              }
-              textarea {
-                font-family: monospace;
-                width: 315px;
-                height: 100px;
-              }
-              ${self.$meteor.config.errorPage?.css || ''}
-            </style>
+            <script src="https://cdn.tailwindcss.com"></script>
+            <title>Something went wrong</title>
+
           </head>
           <body>
-            <h1>Something went wrong</h1>
-            <h3>Uh oh - something occured that prevented Meteor from processing your request.</h3>
-            <textarea readonly>${error}</textarea>
-            <p>Meteor ${version}</p>
+            <div class="flex min-h-[100dvh] flex-col items-center justify-center bg-white px-4 py-12 sm:px-6 lg:px-8">
+              <div class="mx-auto max-w-md text-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  class="mx-auto h-12 w-12 stroke-red-400"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+                  ></path>
+                </svg>
+                <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                  Something went wrong
+                </h1>
+                <p class="mt-4 text-gray-500">
+                  Meteor ran into an error while processing your request.
+                </p>
+                <div class="mt-6 space-y-4">
+                  <p class="mt-4 text-gray-500 text-left">URL: <span class="p-1.5 px-2 bg-gray-100 font-mono text-sm rounded-md">${url}</span></p>
+                  <p class="mt-4 text-gray-500 text-left">Version: <span class="p-1.5 px-2 bg-gray-100 font-mono text-sm rounded-md">${version}</span></p>
+                  <pre class="rounded-md bg-gray-100 p-4 text-left text-sm text-gray-500">${error}</pre>
+                  <div class="flex space-x-2">
+                    <button onclick="window.location.reload()" class="rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-gray-900 flex-1 transition-all">
+                      Reload Page
+                    </button>
+                    <a href="https://github.com/meteorproxy/meteor/issues/new" target="_blank" class="rounded-md border-2 border-gray-800 px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-800 hover:text-white flex-1 transition-all">
+                      Report Error
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
           </body>
         </html>
       `,