From c8440b8cfd9e38a54cafb71a28b0ce653f0dc1a2 Mon Sep 17 00:00:00 2001
From: Amr Gaber <amrtgaber@gmail.com>
Date: Mon, 18 May 2026 18:49:05 -0500
Subject: [PATCH] refactor: move error and not-found components to router
 defaults

Register the error boundary and not-found component on the router via
defaultErrorComponent and defaultNotFoundComponent instead of on the
root route. This lets the boundary catch errors thrown by the root
route itself, which the route-level errorComponent cannot since it is
hosted inside the same route. Also renames RootErrorComponent to
ErrorBoundary so the export matches its filename.
---
 README.md                         | 2 +-
 src/components/error-boundary.tsx | 2 +-
 src/main.tsx                      | 4 ++++
 src/routes/__root.tsx             | 4 ----
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index ab78fdb..3779dc6 100644
--- a/README.md
+++ b/README.md
@@ -274,7 +274,7 @@ src/
 │   ├── ui/                 # shadcn/ui components (Button, Card, Input, Label)
 │   ├── theme-provider.tsx  # Dark/light/system theme context
 │   ├── theme-toggle.tsx    # Theme cycle button
-│   ├── error-boundary.tsx  # Root error component with retry
+│   ├── error-boundary.tsx  # Default error boundary with retry
 │   └── not-found.tsx       # 404 page
 ├── lib/
 │   ├── analytics.tsx       # AnalyticsProvider + useAnalytics hook
diff --git a/src/components/error-boundary.tsx b/src/components/error-boundary.tsx
index 6a4ee55..4f35084 100644
--- a/src/components/error-boundary.tsx
+++ b/src/components/error-boundary.tsx
@@ -3,7 +3,7 @@ import type { ErrorComponentProps } from "@tanstack/react-router"
 import { Button } from "@/components/ui/button"
 import { logger } from "@/lib/logger"
 
-export function RootErrorComponent({ error, reset }: ErrorComponentProps) {
+export function ErrorBoundary({ error, reset }: ErrorComponentProps) {
   logger.error("Uncaught error in route component", {
     message: error.message,
     stack: error.stack,
diff --git a/src/main.tsx b/src/main.tsx
index 42dafbb..9783f51 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 { Skeleton } from "./components/ui/skeleton"
 import "./index.css"
@@ -41,6 +43,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 23ab92a..10e5cb9 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -6,8 +6,6 @@ import {
   useRouter,
 } from "@tanstack/react-router"
 import { Toaster } from "sonner"
-import { RootErrorComponent } from "@/components/error-boundary"
-import { NotFound } from "@/components/not-found"
 import { useAnalytics } from "@/lib/analytics"
 
 const TanStackRouterDevtools = import.meta.env.PROD
@@ -41,8 +39,6 @@ interface RouterContext {
 
 export const Route = createRootRouteWithContext<RouterContext>()({
   component: RootComponent,
-  notFoundComponent: NotFound,
-  errorComponent: RootErrorComponent,
 })
 
 function RouteTracker() {