refactor: move not-found to router default and add error boundary

src/components/error-boundary.tsx

@@ -0,0 +1,28 @@
+import { Link } from "@tanstack/react-router"
+import type { ErrorComponentProps } from "@tanstack/react-router"
+import { Button } from "@/components/ui/button"
+
+export function ErrorBoundary({ error, reset }: ErrorComponentProps) {
+  console.error("Uncaught error in route component", {
+    message: error.message,
+    stack: error.stack,
+  })
+
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 p-8">
+      <p className="text-muted-foreground text-sm font-medium tracking-widest uppercase">
+        Something went wrong
+      </p>
+      <h1 className="text-primary text-7xl font-bold tracking-tight">Error</h1>
+      <p className="text-muted-foreground text-base">
+        An unexpected error occurred. Please try again.
+      </p>
+      <div className="flex gap-3">
+        <Button onClick={reset}>Try again</Button>
+        <Button variant="outline" asChild>
+          <Link to="/">Go home</Link>
+        </Button>
+      </div>
+    </div>
+  )
+}

src/main.tsx

@@ -7,6 +7,8 @@ import { RouterProvider, createRouter } from "@tanstack/react-router"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { toast } from "sonner"
+import { ErrorBoundary } from "./components/error-boundary"
+import { NotFound } from "./components/not-found"
 import { ThemeProvider } from "./components/theme-provider"
 import "./index.css"
 import { getErrorMessage } from "./lib/api-errors"
@@ -38,6 +40,8 @@ const router = createRouter({
   },
   defaultPreload: "intent",
   defaultPreloadStaleTime: 0,
+  defaultNotFoundComponent: NotFound,
+  defaultErrorComponent: ErrorBoundary,
 })
 
 declare module "@tanstack/react-router" {

src/routes/__root.tsx

@@ -2,7 +2,6 @@ import { lazy, Suspense } from "react"
 import { QueryClient } from "@tanstack/react-query"
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router"
 import { Toaster } from "sonner"
-import { NotFound } from "@/components/not-found"
 
 const TanStackRouterDevtools = import.meta.env.PROD
   ? () => null
@@ -35,7 +34,6 @@ interface RouterContext {
 
 export const Route = createRootRouteWithContext<RouterContext>()({
   component: RootComponent,
-  notFoundComponent: NotFound,
 })
 
 function RootComponent() {