From 57d9595938a66ddff3bddc042b87d89034597f22 Mon Sep 17 00:00:00 2001
From: Amr Gaber <amrtgaber@gmail.com>
Date: Tue, 19 May 2026 00:03:09 -0500
Subject: [PATCH] refactor: move not-found to router default and add error
 boundary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Register the not-found component on the router via
defaultNotFoundComponent instead of on the root route, so it covers
errors thrown from the root route itself rather than being hosted
inside the same route it protects. Add an ErrorBoundary component
wired as defaultErrorComponent for the same reason — previously
uncaught errors had no surface and rendered as a blank page.
---
 src/components/error-boundary.tsx | 28 ++++++++++++++++++++++++++++
 src/main.tsx                      |  4 ++++
 src/routes/__root.tsx             |  2 --
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/components/error-boundary.tsx

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 (
+    <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>
+  )
+}
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<RouterContext>()({
   component: RootComponent,
-  notFoundComponent: NotFound,
 })
 
 function RootComponent() {