add error page

server/handlers/helpers.handler.js

@@ -15,6 +15,10 @@ function error(error, req, res, _next) {
     signale.fatal(error);
   }
 
+  if (!env.isDev && !(error instanceof CustomError)) {
+    logger.error(error.message);
+  }
+
   const message = error instanceof CustomError ? error.message : "An error occurred.";
   const statusCode = error.statusCode ?? 500;
 
@@ -23,6 +27,14 @@ function error(error, req, res, _next) {
     return;
   }
 
+  if (req.isHTML) {
+    res.render("error", {
+      message: "An error occurred. Please try again later."
+    });
+    return;
+  }
+
+
   return res.status(statusCode).json({ error: message });
 };
 

server/views/error.hbs

@@ -0,0 +1,11 @@
+{{> header}}
+<div id="error-page" class="section-container">
+  <h2>
+    Error!
+  </h2>
+  <p>{{message}}</p>
+  <a class="back-to-home" href="/">
+    ← Back to homepage
+  </a>
+</div>
+{{> footer}}

static/css/styles.css

@@ -1996,6 +1996,12 @@ svg.map path.active { stroke: hsl(261, 46%, 50%); stroke-width: 1.5; }
 
 #terms { width: 600px; }
 
+/* ERROR PAGE */
+
+#error-page { align-items: center; text-align: center; }
+#error-page h2 { margin: 0; }
+#error-page .back-to-home { margin-top: 2rem; }
+
 /* RESPONSIVE STYLES */
 
 @media only screen and (max-width: 768px) {