StellarState · Ssoleed · Jul 30, 2026
diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { RouteStateCard } from "@/components/ui/RouteStateCard";
+import { logError } from "@/lib/logger";
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  logError("Unhandled render error", { error });
+
+  return (
+    <html lang="en">
+      <body>
+        <RouteStateCard
+          title="Something went wrong"
+          message="We ran into an unexpected issue. Please try again in a moment."
+        />
+      </body>
+    </html>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Providers } from "@/components/providers";
 import { Navbar } from "@/components/layout";
 import { Toaster } from "@/components/ui/sonner";
+import { GlobalErrorBoundary } from "@/components/ui/GlobalErrorBoundary";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -17,11 +18,13 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <Providers>
-          <Navbar />
-          {children}
-          <Toaster />
-        </Providers>
+        <GlobalErrorBoundary>
+          <Providers>
+            <Navbar />
+            {children}
+            <Toaster />
+          </Providers>
+        </GlobalErrorBoundary>
       </body>
     </html>
   );

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,10 @@
+import { RouteStateCard } from "@/components/ui/RouteStateCard";
+
+export default function NotFound() {
+  return (
+    <RouteStateCard
+      title="Page not found"
+      message="The page you are looking for does not exist or may have been moved."
+    />
+  );
+}
diff --git a/components/ui/GlobalErrorBoundary.tsx b/components/ui/GlobalErrorBoundary.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { RouteStateCard } from "@/components/ui/RouteStateCard";
+import { logError } from "@/lib/logger";
+
+interface GlobalErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface GlobalErrorBoundaryState {
+  hasError: boolean;
+}
+
+export class GlobalErrorBoundary extends Component<
+  GlobalErrorBoundaryProps,
+  GlobalErrorBoundaryState
+> {
+  constructor(props: GlobalErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): GlobalErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    logError("Unhandled render error", { error, errorInfo });
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        <RouteStateCard
+          title="Something went wrong"
+          message="We ran into an unexpected issue. Please try again in a moment."
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/components/ui/RouteStateCard.tsx b/components/ui/RouteStateCard.tsx
@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface RouteStateCardProps {
+  title: string;
+  message: string;
+}
+
+export function RouteStateCard({ title, message }: RouteStateCardProps) {
+  return (
+    <main className="flex min-h-[70vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md rounded-lg border border-border bg-background p-8 text-center shadow-sm">
+        <p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
+          Oops
+        </p>
+        <h1 className="mt-4 text-3xl font-semibold">{title}</h1>
+        <p className="mt-3 text-sm leading-6 text-muted-foreground">{message}</p>
+        <Button asChild className="mt-6">
+          <Link href="/marketplace">Go to Marketplace</Link>
+        </Button>
+      </div>
+    </main>
+  );
+}
diff --git a/components/ui/__tests__/GlobalErrorBoundary.test.tsx b/components/ui/__tests__/GlobalErrorBoundary.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { GlobalErrorBoundary } from "../GlobalErrorBoundary";
+import * as logger from "@/lib/logger";
+
+function BrokenComponent() {
+  throw new Error("boom");
+}
+
+describe("GlobalErrorBoundary", () => {
+  beforeEach(() => {
+    vi.spyOn(logger, "logError").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders the fallback page and logs the error", () => {
+    render(
+      <GlobalErrorBoundary>
+        <BrokenComponent />
+      </GlobalErrorBoundary>
+    );
+
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /go to marketplace/i })).toHaveAttribute(
+      "href",
+      "/marketplace"
+    );
+    expect(logger.logError).toHaveBeenCalled();
+  });
+});
diff --git a/components/ui/__tests__/RouteStateCard.test.tsx b/components/ui/__tests__/RouteStateCard.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { RouteStateCard } from "../RouteStateCard";
+
+describe("RouteStateCard", () => {
+  it("renders the title, message, and marketplace link", () => {
+    render(
+      <RouteStateCard
+        title="Page not found"
+        message="The page you are looking for does not exist."
+      />
+    );
+
+    expect(screen.getByText("Page not found")).toBeInTheDocument();
+    expect(
+      screen.getByText("The page you are looking for does not exist.")
+    ).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /go to marketplace/i })).toHaveAttribute(
+      "href",
+      "/marketplace"
+    );
+  });
+});
diff --git a/package-lock.json b/package-lock.json