feat: configure error page (#132)

* feat: configure error page * feat: not-found 404 * feat: log error * Update not-found.tsx --------- Co-authored-by: Lachezar Marinov <[email protected]>
jst-seminar-rostlab-tum · Dec 15, 2024 · fb6bd51 · fb6bd51
1 parent ab7e186
commit fb6bd51
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 12 deletions.
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -2,25 +2,35 @@
 
 import { useEffect } from 'react';
 
-export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+import { CustomButton } from '@/components/Buttons/CustomButton';
+import { Topbar } from '@/components/Topbar/Topbar';
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
     /* eslint-disable no-console */
     console.error(error);
   }, [error]);
 
   return (
-    <div>
-      <h2>Something went wrong!</h2>
-      <button
-        type="button"
-        onClick={
-          // Attempt to recover by trying to re-render the segment
-          () => reset()
-        }
-      >
-        Try again
-      </button>
+    <div className="flex flex-col h-screen">
+      <Topbar />
+      <main className="flex h-full flex-col items-center justify-center gap-2 text-content">
+        <section className="text-center">
+          <h2 className="text-xl font-semibold">An Error Occurred</h2>
+          <p>Please try again or go back to the Home page.</p>
+        </section>
+        <div className="flex flex-row gap-2 mt-4">
+          <CustomButton variant="solid" size="lg" onClick={() => reset()}>
+            Try again
+          </CustomButton>
+          <a href="/">
+            <CustomButton variant="solid" size="lg">
+              Go to Home page
+            </CustomButton>
+          </a>
+        </div>
+      </main>
     </div>
   );
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { CustomButton } from '@/components/Buttons/CustomButton';
+import { Topbar } from '@/components/Topbar/Topbar';
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col h-screen">
+      <Topbar />
+      <main className="flex h-full flex-col items-center justify-center gap-2 text-content">
+        <section className="text-center">
+          <h2 className="text-xl font-semibold">Ooops</h2>
+          <p>The requested page could not be found.</p>
+        </section>
+        <div className="flex flex-row gap-2 mt-4">
+          <a href="/">
+            <CustomButton variant="solid" size="lg">
+              Go to Home page
+            </CustomButton>
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}