From 1dff6abb3be01322ae157a092515d3d8982264f6 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Fri, 3 Apr 2026 15:36:11 +0200
Subject: [PATCH] feat: add error boundary to root route for crash resilience

Adds a TanStack Router error boundary to the root route so rendering errors or uncaught React Query failures show a friendly error page instead of white-screening the app. The error boundary displays a professional error message with a "Try again" button that resets state and invalidates router data.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/routes/__root.tsx | 47 ++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/client/routes/__root.tsx b/src/client/routes/__root.tsx
index 71d9689..221a0fd 100644
--- a/src/client/routes/__root.tsx
+++ b/src/client/routes/__root.tsx
@@ -1,8 +1,10 @@
 import {
 	createRootRoute,
+	type ErrorComponentProps,
 	Outlet,
 	useMatchRoute,
 	useNavigate,
+	useRouter,
 } from "@tanstack/react-router";
 import { useState } from "react";
 import "../app.css";
@@ -21,8 +23,53 @@ import { useUIStore } from "../stores/uiStore";
 
 export const Route = createRootRoute({
 	component: RootLayout,
+	errorComponent: RootErrorBoundary,
 });
 
+function RootErrorBoundary({ error, reset }: ErrorComponentProps) {
+	const router = useRouter();
+
+	return (
+		<div className="min-h-screen bg-gray-50 flex items-center justify-center">
+			<div className="max-w-md mx-auto text-center px-4">
+				<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+					<svg
+						className="w-6 h-6 text-red-600"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+						/>
+					</svg>
+				</div>
+				<h1 className="text-xl font-semibold text-gray-900 mb-2">
+					Something went wrong
+				</h1>
+				<p className="text-sm text-gray-500 mb-6">
+					{error instanceof Error
+						? error.message
+						: "An unexpected error occurred"}
+				</p>
+				<button
+					type="button"
+					onClick={() => {
+						reset();
+						router.invalidate();
+					}}
+					className="px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
+				>
+					Try again
+				</button>
+			</div>
+		</div>
+	);
+}
+
 function RootLayout() {
 	const navigate = useNavigate();
 	const { data: auth } = useAuth();