Merge pull request #338 from ekumamatthew/error-page

feat: added error page

Author: yusuftomilola

frontend/app/error.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface ErrorPageProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function ErrorPage({ error, reset }: ErrorPageProps) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <div className="h-screen max-w-2xl mx-auto p-4 flex flex-col items-center justify-center">
+        <div className="flex items-center justify-center mb-6">
+          <h1 className="text-4xl text-white mr-2">500 |</h1>
+          <p className="text-lg text-white">Internal Server Error</p>
+        </div>
+
+        <p className="text-sm text-white">
+          We&apos;re having trouble right now. Please refresh the page or try again
+          later.
+        </p>
+        <div className="flex lg:flex-row flex-col max-w-md my-4 gap-4">
+          <button
+            onClick={reset}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Try Again
+          </button>
+          <button
+            onClick={() => (window.location.href = "/")}
+            className="px-4 py-2 bg-slate-600 text-white rounded hover:bg-slate-700"
+          >
+            Go Home
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/page.tsx

@@ -4,4 +4,4 @@ export default function Home() {
       <h1>HomePage</h1>
     </section>
   );
-}
+}

frontend/app/test-error/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+
+export default function TestErrorPage() {
+  const [shouldThrow, setShouldThrow] = useState(false);
+
+  if (shouldThrow) {
+    throw new Error("This is a test error to demonstrate the error page!");
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-900 text-white p-8">
+      <div className="max-w-2xl mx-auto">
+        <h1 className="text-3xl font-bold mb-6">Error Page Test</h1>
+        <p className="text-lg mb-6">
+          Click the button below to trigger an error and test the error page:
+        </p>
+        <button
+          onClick={() => setShouldThrow(true)}
+          className="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-200"
+        >
+          Trigger Error
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/package.json

@@ -10,6 +10,8 @@
     "test": "jest"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.2",
+    "@tanstack/react-query-devtools": "^5.90.2",
     "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0"