Merge pull request #989 from JoeMakuta/style/enhance-global-error-page

MODSetter · web-flow · commit 95bb52222019 · 2026-03-26T12:42:35.000-07:00
fix: enhance GlobalError component with improved UI and error handling
diff --git a/surfsense_web/app/global-error.tsx b/surfsense_web/app/global-error.tsx
@@ -1,28 +1,32 @@
 "use client";
 
-import NextError from "next/error";
+import "./globals.css";
 import posthog from "posthog-js";
 import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
 
 export default function GlobalError({
-	error,
-	reset,
+  error,
+  reset,
 }: {
-	error: Error & { digest?: string };
-	reset: () => void;
+  error: Error & { digest?: string };
+  reset: () => void;
 }) {
-	useEffect(() => {
-		posthog.captureException(error);
-	}, [error]);
+  useEffect(() => {
+    posthog.captureException(error);
+  }, [error]);
 
-	return (
-		<html lang="en">
-			<body>
-				<NextError statusCode={0} />
-				<button type="button" onClick={reset}>
-					Try again
-				</button>
-			</body>
-		</html>
-	);
+  return (
+    <html lang="en">
+      <body>
+        <div className="flex min-h-screen flex-col items-center justify-center gap-4 p-4">
+          <h2 className="text-xl font-semibold">Something went wrong</h2>
+          <p className="text-sm text-muted-foreground">
+            An unexpected error occurred.
+          </p>
+          <Button onClick={reset}>Try again</Button>
+        </div>
+      </body>
+    </html>
+  );
 }
