chore: error pages (#327)

oaknational · Oct 31, 2024 · 761f431 · 761f431
1 parent b2eba2a
commit 761f431
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/apps/nextjs/src/app/_error.tsx b/apps/nextjs/src/app/_error.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ *
+ * This page should never be reached as it is deprecated using the app router.
+ * By having this page we will silence warnings from vercel.
+ * This page redirects to the global handle all error page.
+ */
+
+export default function DeprecatedErrorPage({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  // redirect to global-error.tsx
+  useEffect(() => {
+    window.location.href = "/global-error";
+  }, [error]);
+}
diff --git a/apps/nextjs/src/app/global-error.tsx b/apps/nextjs/src/app/global-error.tsx
@@ -3,7 +3,8 @@
 import { useEffect } from "react";
 
 import * as Sentry from "@sentry/nextjs";
-import NextError from "next/error";
+
+import FullPageWarning from "@/components/FullPageWarning";
 
 export default function GlobalError({
   error,
@@ -19,11 +20,15 @@ export default function GlobalError({
   return (
     <html>
       <body>
-        {/* `NextError` is the default Next.js error page component. Its type
-        definition requires a `statusCode` prop. However, since the App Router
-        does not expose status codes for errors, we simply pass 0 to render a
-        generic error message. */}
-        <NextError statusCode={0} />
+        <FullPageWarning>
+          <FullPageWarning.Icon icon="acorn" size="xl" />
+
+          <FullPageWarning.Header>Something went wrong!</FullPageWarning.Header>
+
+          <FullPageWarning.Button href="/">
+            AI Experiments homepage
+          </FullPageWarning.Button>
+        </FullPageWarning>
       </body>
     </html>
   );