diff --git a/app/global-error.tsx b/app/global-error.tsx
new file mode 100644
index 0000000..462a96d
--- /dev/null
+++ 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 (
+
+
+
+
+
+ );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index d6e1076..d9d6752 100644
--- 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 (
-
-
- {children}
-
-
+
+
+
+ {children}
+
+
+
);
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..3bd34e3
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,10 @@
+import { RouteStateCard } from "@/components/ui/RouteStateCard";
+
+export default function NotFound() {
+ return (
+
+ );
+}
diff --git a/components/ui/GlobalErrorBoundary.tsx b/components/ui/GlobalErrorBoundary.tsx
new file mode 100644
index 0000000..8680ae9
--- /dev/null
+++ 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 (
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/components/ui/RouteStateCard.tsx b/components/ui/RouteStateCard.tsx
new file mode 100644
index 0000000..7c0c650
--- /dev/null
+++ 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 (
+
+
+
+ Oops
+
+
{title}
+
{message}
+
+