From fcf1bbd9c14f297df97a925d650a6e64f5878f8a Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 25 Feb 2022 21:58:41 +0200
Subject: [PATCH] Better error page Closes #763

---
 app/components/Catcher.tsx |  2 +-
 app/root.tsx               | 17 +++++++++--------
 app/styles/global.css      |  4 ++++
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/components/Catcher.tsx b/app/components/Catcher.tsx
index 862013508..6ca49f59b 100644
--- a/app/components/Catcher.tsx
+++ b/app/components/Catcher.tsx
@@ -42,6 +42,6 @@ export function Catcher() {
 
     default:
       console.error(caught);
-      throw new Error(`${caught.status} - ${caught.statusText}`);
+      throw new Error(`${caught.status} - ${caught.statusText},${caught.data}`);
   }
 }
diff --git a/app/root.tsx b/app/root.tsx
index e0af00d1c..462b8b792 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -7,6 +7,7 @@ import { Catcher } from "./components/Catcher";
 import resetStyles from "~/styles/reset.css";
 import globalStyles from "~/styles/global.css";
 import layoutStyles from "~/styles/layout.css";
+import { DISCORD_URL } from "./constants";
 
 export const links: LinksFunction = () => {
   return [
@@ -77,19 +78,19 @@ export function CatchBoundary() {
   );
 }
 
-// TODO.... maybe we can render the same exact thing with added dialog you can close?
 export function ErrorBoundary({ error }: { error: Error }) {
-  console.error(error);
+  // TODO: do something not hacky with this
+  const [message, data] = error.message.split(",");
   return (
     <Document title="Error!">
       <Layout>
-        <div>
-          <h1>There was an error</h1>
-          <p>{error.message}</p>
+        <div className="container">
+          <h1>Error happened: {message}</h1>
+          <p>Message: {data}</p>
           <hr />
-          <p>
-            Hey, developer, you should replace this with what you want your
-            users to see.
+          <p className="mt-2 text-sm">
+            If you need help or want to report the error so that it can be fixed
+            please visit <a href={DISCORD_URL}>our Discord</a>
           </p>
         </div>
       </Layout>
diff --git a/app/styles/global.css b/app/styles/global.css
index 85d254bc5..4b6ccefe8 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -533,6 +533,10 @@ hr {
   margin-block: var(--s-4);
 }
 
+.text-sm {
+  font-size: var(--fonts-sm);
+}
+
 .text-xs {
   font-size: var(--fonts-xs);
 }