diff --git a/apps/web/src/components/RootError.tsx b/apps/web/src/components/RootError.tsx
new file mode 100644
index 0000000..e370317
--- /dev/null
+++ b/apps/web/src/components/RootError.tsx
@@ -0,0 +1,56 @@
+import { Link } from "@tanstack/react-router";
+
+interface RootErrorProps {
+ error: Error;
+ reset: () => void;
+}
+
+export default function RootError({ error, reset }: RootErrorProps) {
+ return (
+
+
+
+
+
+ something went wrong
+
+
+
+
+ Unexpected{" "}
+
+ error
+
+
+
+
+ Something crashed. This has been noted —{" "}
+ it's not you.
+
+
+ {import.meta.env.DEV && (
+
+ {error.message}
+
+ )}
+
+
+
+
+ Back to home
+
+
+
+ );
+}
diff --git a/apps/web/src/components/RouteError.tsx b/apps/web/src/components/RouteError.tsx
new file mode 100644
index 0000000..d068eb4
--- /dev/null
+++ b/apps/web/src/components/RouteError.tsx
@@ -0,0 +1,49 @@
+interface RouteErrorProps {
+ error: Error;
+ reset: () => void;
+}
+
+export default function RouteError({ error, reset }: RouteErrorProps) {
+ return (
+
+
+
+
+
+ something went wrong
+
+
+
+
+ This page{" "}
+
+ crashed
+
+
+
+
+ Something went wrong loading this page.{" "}
+ Try again or
+ head back home.
+
+
+ {import.meta.env.DEV && (
+
+ {error.message}
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index 4dcdf3c..c672ced 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -2,6 +2,7 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import Navbar from "../components/navbar/NavBar";
import NotFound from "../components/NotFound";
+import RootError from "../components/RootError";
const RootLayout = () => {
return (
@@ -18,4 +19,5 @@ const RootLayout = () => {
export const Route = createRootRoute({
component: RootLayout,
notFoundComponent: NotFound,
+ errorComponent: RootError,
});
diff --git a/apps/web/src/routes/play.tsx b/apps/web/src/routes/play.tsx
index 32db5c4..df4959d 100644
--- a/apps/web/src/routes/play.tsx
+++ b/apps/web/src/routes/play.tsx
@@ -4,6 +4,7 @@ import type { GameSession, GameRequest, AnswerResult } from "@lila/shared";
import { QuestionCard } from "../components/game/QuestionCard";
import { ScoreScreen } from "../components/game/ScoreScreen";
import { GameSetup } from "../components/game/GameSetup";
+import RouteError from "../components/RouteError";
import { authClient } from "../lib/auth-client";
type GameStartResponse = { success: true; data: GameSession };
@@ -127,6 +128,7 @@ function Play() {
export const Route = createFileRoute("/play")({
component: Play,
+ errorComponent: RouteError,
beforeLoad: async () => {
const { data: session } = await authClient.getSession();
if (!session) {
diff --git a/documentation/backlog.md b/documentation/backlog.md
index 82bdf94..865c9f2 100644
--- a/documentation/backlog.md
+++ b/documentation/backlog.md
@@ -8,9 +8,6 @@ Labels: `[feature]` `[infra]` `[security]` `[ux]` `[debt]`
Things that are actively in progress or should be picked up immediately. Mostly operational risk and the remaining phase 7 hardening work.
-- **React error boundaries** `[ux]`
- Catch and display runtime errors gracefully instead of crashing the entire app.
-
- **Pin dependencies in package.json** `[debt]` `[infra]`
Unpinned deps in a CI/CD pipeline are a real risk. Pin all versions to exact values to prevent unexpected breakage on build.
@@ -111,6 +108,7 @@ Directionally right, timing is unclear. Revisit when the next/now work is done.
Shipped milestones, newest first.
+- **04 - 2026 - React error boundaries** - Catch and display runtime errors gracefully instead of crashing the entire app.
- **04 - 2026 - 404 and redirect handling** - Unknown routes return raw errors. Add a catch-all route on the frontend for client-side 404s.
- **04 - 2026 - Multiplayer GameService unit tests** - round evaluation, scoring, tie-breaking, timeout handling
- **04 - 2026 - Security headers with helmet** - Add helmet middleware to set secure HTTP response headers.