diff --git a/src/components/error-boundary.tsx b/src/components/error-boundary.tsx
new file mode 100644
index 0000000..ac9b804
--- /dev/null
+++ b/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 (
+
+
+ Something went wrong
+
+
Error
+
+ An unexpected error occurred. Please try again.
+
+
+
+
+
+
+ )
+}
diff --git a/src/main.tsx b/src/main.tsx
index d4a18ee..108c716 100644
--- a/src/main.tsx
+++ b/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" {
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index f6dac3b..62178df 100644
--- a/src/routes/__root.tsx
+++ b/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()({
component: RootComponent,
- notFoundComponent: NotFound,
})
function RootComponent() {