Better error reporting

ejs-views/pages/error.ejs

@@ -0,0 +1,21 @@
+<%- include('../partials/header', { page }); %>
+
+<article>
+  <div class="w-full border border-secondary rounded p-3">
+    <span class="text-3xl text-primary">This Page encountered an Error!</span>
+  </div>
+  <div id="readme" class="mt-12 prose max-w-none">
+    <h1>
+      If you think you're seeing this page in error. Please report an issue on
+      <a href="https://github.com/pulsar-edit/package-frontend">GitHub</a> or
+      <a href="https://discord.gg/7aEbB9dGRT">Discord</a>.
+    </h1>
+    <pre>
+      <code class="hljs language-json">
+        <%-error%>
+      </code>
+    </pre>
+  </div>
+</article>
+
+<%- include('../partials/footer'); %>

src/handlers.js

@@ -27,7 +27,18 @@ async function fullListingPage(req, res, timecop) {
       og_image_type: "image/svg+xml"
     }});
   } catch(err) {
-    utils.displayError(req, res, err);
+    utils.displayError(req, res, {
+      error: utils.modifyErrorText(err),
+      dev: DEV,
+      timecop: false,
+      page: {
+        name: "PPR Error Page",
+        og_url: "https://web.pulsar-edit.dev/packages",
+        og_description: "The Pulsar Package Repository",
+        og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
+        og_image_type: "image/svg+xml"
+      }
+    });
   }
 }
 
@@ -54,7 +65,18 @@ async function singlePackageListing(req, res, timecop) {
       og_image_height: 600,
     }});
   } catch(err) {
-    utils.displayError(req, res, err);
+    utils.displayError(req, res, {
+      error: utils.modifyErrorText(err),
+      dev: DEV,
+      timecop: false,
+      page: {
+        name: "PPR Error Page",
+        og_url: "https://web.pulsar-edit.dev/packages",
+        og_description: "The Pulsar Package Repository",
+        og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
+        og_image_type: "image/svg+xml"
+      }
+    });
   }
 }
 

src/utils.js

@@ -21,17 +21,27 @@ const reg = require("./reg.js");
 
 // Collection of utility functions for the frontend
 
-async function displayError(req, res, errStatus) {
-  switch(errStatus) {
-    case 404:
-      res.status(404).render('404');
-      break;
-    case 505:
-      res.status(505).render('505');
-      break;
-    default:
-      res.status(505).render('505');
-      break;
+async function displayError(req, res, details) {
+  console.error(details);
+  res.status(500).render('error', details);
+}
+
+function modifyErrorText(err) {
+  // This function takes an error object, or error message string, and attempts
+  // to find the optimal formatting of the message to display to users.
+
+  if (typeof err === "object") {
+    if (typeof err.status === "number") {
+      // This is likely an error thrown from `superagent`
+      let text = `'${err.status}' Received from '${err?.response?.req?.host}${err?.response?.req?.path}'\n\t\t ${err.toString()}`;
+      return text;
+    } else {
+      // TODO Additional possibilities added here
+      return err;
+    }
+  } else {
+    // We likely already have an error message string
+    return err;
   }
 }
 
@@ -463,4 +473,5 @@ module.exports = {
   prepareForDetail,
   getPagination,
   Timecop,
+  modifyErrorText
 };