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() {