fix: checkout error boundary

gregfromstl · gregfromstl · commit 53b761b4c178 · 2025-05-06T13:03:54.000-07:00
diff --git a/apps/dashboard/src/app/checkout/error.tsx b/apps/dashboard/src/app/checkout/error.tsx
@@ -0,0 +1,28 @@
+"use client"; // Error boundaries must be Client Components
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useEffect } from "react";
+
+export default function ErrorPage({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <Card className="overflow-hidden text-center">
+      <CardHeader className="border-b md:border-b-0">
+        <CardTitle className="font-bold text-destructive text-lg">
+          Something went wrong
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="text-muted-foreground">
+        {error.message}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/dashboard/src/app/checkout/layout.tsx b/apps/dashboard/src/app/checkout/layout.tsx
@@ -1,3 +1,4 @@
+import "../../global.css";
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "next-themes";
 import { Inter } from "next/font/google";
@@ -23,11 +24,22 @@ export default function CheckoutLayout({
         >
           <body
             className={cn(
-              "bg-background font-sans antialiased",
+              "h-screen w-screen bg-background font-sans antialiased",
               fontSans.variable,
             )}
           >
-            {children}
+            <div className="relative mx-auto flex h-full w-full flex-col items-center justify-center overflow-hidden border py-10">
+              <main className="container z-10 flex justify-center">
+                {children}
+              </main>
+
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                alt=""
+                src="/assets/login/background.svg"
+                className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
+              />
+            </div>
           </body>
         </ThemeProvider>
       </Providers>
diff --git a/apps/dashboard/src/app/checkout/page.tsx b/apps/dashboard/src/app/checkout/page.tsx
@@ -1,4 +1,3 @@
-import "../../global.css";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Metadata } from "next";
 import { createThirdwebClient, defineChain, getContract } from "thirdweb";
@@ -73,24 +72,13 @@ export default async function RoutesPage({
   };
 
   return (
-    <div className="relative mx-auto flex h-screen w-screen flex-col items-center justify-center overflow-hidden border py-10">
-      <main className="container z-10 flex justify-center">
-        <CheckoutEmbed
-          redirectUri={redirectUri}
-          chainId={Number(chainId)}
-          recipientAddress={recipientAddress}
-          amount={BigInt(amount)}
-          token={token}
-          clientId={client.clientId}
-        />
-      </main>
-
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        alt=""
-        src="/assets/login/background.svg"
-        className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
-      />
-    </div>
+    <CheckoutEmbed
+      redirectUri={redirectUri}
+      chainId={Number(chainId)}
+      recipientAddress={recipientAddress}
+      amount={BigInt(amount)}
+      token={token}
+      clientId={client.clientId}
+    />
   );
 }
