From c5b54f627cbc456fc716bd920c85d41ab851ed0c Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 17 Apr 2025 09:30:55 -0500
Subject: [PATCH] Add custom error page for client-side exceptions

---
 app/global-error.tsx              | 12 ++++++++++++
 app/not-found.tsx                 |  2 +-
 src/components/HttpStatusPage.tsx |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 app/global-error.tsx

diff --git a/app/global-error.tsx b/app/global-error.tsx
new file mode 100644
index 00000000..030664fd
--- /dev/null
+++ b/app/global-error.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import HttpStatusPage from '@/components/HttpStatusPage';
+import { TbRefresh } from 'react-icons/tb';
+
+export default function GlobalError() {
+  return (
+    <HttpStatusPage status={<TbRefresh />}>
+      Something went wrong
+    </HttpStatusPage>
+  );
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
index aca6aeaa..f2d6f88e 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -10,7 +10,7 @@ export default function NotFound() {
   return (
     <HttpStatusPage status={404}>
       <span className={clsx(
-        'underline underline-offset-2 decoration-dotted',
+        'underline underline-offset-4 decoration-dotted',
         'cursor-not-allowed',
       )}>
         {pathname}
diff --git a/src/components/HttpStatusPage.tsx b/src/components/HttpStatusPage.tsx
index f905683c..1101c1e9 100644
--- a/src/components/HttpStatusPage.tsx
+++ b/src/components/HttpStatusPage.tsx
@@ -8,7 +8,7 @@ export default function HttpStatusPage({
   status,
   children,
 }: {
-  status: number
+  status: ReactNode
   children?: ReactNode
 }) {
   return (