From a503bcee35864c4233af9d1088f27e619ae0ed6d Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 6 Dec 2024 21:35:58 +0100
Subject: [PATCH] feat: add global error page

---
 src/app/error.tsx            | 30 ++++++------------
 src/app/not-found.tsx        | 13 ++++----
 src/components/ErrorPage.tsx | 61 ++++++++++++++++++++++++++++++++++++
 3 files changed, 77 insertions(+), 27 deletions(-)
 create mode 100644 src/components/ErrorPage.tsx

diff --git a/src/app/error.tsx b/src/app/error.tsx
index a34504181b..142f8237b5 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -1,32 +1,20 @@
 "use client";
 
-import { useEffect } from "react";
+import { ErrorPage } from "@/components/ErrorPage";
 
 const ErrorBoundary = ({
   error,
-  reset,
 }: {
-  error: Error & { digest?: string };
-  reset: () => void;
+  error: Error & { digest?: string; statusCode?: string };
 }) => {
-  useEffect(() => {
-    // Log the error to an error reporting service
-    console.error(error);
-  }, [error]);
-
+  console.log(error.cause);
   return (
-    <div>
-      <h1>Something went wrong!</h1>
-      <button
-        type="button"
-        onClick={
-          // Attempt to recover by trying to re-render the segment
-          () => reset()
-        }
-      >
-        Try again
-      </button>
-    </div>
+    <ErrorPage
+      title="Something went wrong!"
+      correlationId={crypto.randomUUID()}
+      description={error.message}
+      errorCode={error.statusCode || "ONO"}
+    />
   );
 };
 
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 3440a40d18..71e433da4e 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,11 +1,12 @@
-import Link from "next/link";
+import "server-only";
+import { ErrorPage } from "@/components/ErrorPage";
 
 export default function NotFound() {
   return (
-    <div>
-      <h1>Not Found</h1>
-      <p>Could not find requested resource</p>
-      <Link href="/">Return Home</Link>
-    </div>
+    <ErrorPage
+      errorCode="404"
+      title="Page not found"
+      description="We couldn't find the page you were looking for"
+    />
   );
 }
diff --git a/src/components/ErrorPage.tsx b/src/components/ErrorPage.tsx
new file mode 100644
index 0000000000..332ca88646
--- /dev/null
+++ b/src/components/ErrorPage.tsx
@@ -0,0 +1,61 @@
+import { DashboardContainer } from "@/components/DashboardContainer";
+import { DataBlockWithCopy } from "@/components/requirements/DataBlockWithCopy";
+import { Anchor } from "@/components/ui/Anchor";
+import { buttonVariants } from "@/components/ui/Button";
+
+// TODO: simple compound component when design is certain
+
+const ErrorPage = ({
+  title,
+  description,
+  correlationId,
+  errorCode,
+}: {
+  title: string;
+  description: string;
+  correlationId?: string;
+  errorCode: string;
+}) => {
+  return (
+    <div className="relative h-screen">
+      <DashboardContainer className="flex size-full flex-col">
+        <main className="mx-auto flex h-full max-w-prose flex-col items-center justify-center text-center">
+          <h1 className="mb-4 text-pretty font-bold font-display text-4xl">
+            {title}
+          </h1>
+          <p className="mb-12 text-balance text-foreground-dimmed text-lg">
+            {description}
+          </p>
+          <Anchor
+            variant={"unstyled"}
+            href="/"
+            className={buttonVariants({
+              variant: "solid",
+              colorScheme: "primary",
+            })}
+          >
+            Return Home
+          </Anchor>
+        </main>
+        <footer className="mt-auto pb-8 text-center text-foreground-secondary text-xs sm:text-sm">
+          {correlationId && (
+            <code>
+              correlation id: <DataBlockWithCopy text={correlationId} />
+            </code>
+          )}
+        </footer>
+      </DashboardContainer>
+      <div className="-translate-y-1/2 -z-10 absolute top-1/2 w-full overflow-hidden text-center">
+        <div
+          className="font-black text-[clamp(128px,32vw,360px)] text-foreground leading-none tracking-tight opacity-20"
+          aria-hidden
+        >
+          {errorCode}
+        </div>
+        <div className="absolute inset-0 bg-gradient-to-t from-background" />
+      </div>
+    </div>
+  );
+};
+
+export { ErrorPage };