diff --git a/apps/web/src/components/RootError.tsx b/apps/web/src/components/RootError.tsx deleted file mode 100644 index e370317..0000000 --- a/apps/web/src/components/RootError.tsx +++ /dev/null @@ -1,56 +0,0 @@ -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 deleted file mode 100644 index d068eb4..0000000 --- a/apps/web/src/components/RouteError.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 c672ced..4dcdf3c 100644 --- a/apps/web/src/routes/__root.tsx +++ b/apps/web/src/routes/__root.tsx @@ -2,7 +2,6 @@ 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 ( @@ -19,5 +18,4 @@ 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 df4959d..32db5c4 100644 --- a/apps/web/src/routes/play.tsx +++ b/apps/web/src/routes/play.tsx @@ -4,7 +4,6 @@ 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 }; @@ -128,7 +127,6 @@ 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 865c9f2..82bdf94 100644 --- a/documentation/backlog.md +++ b/documentation/backlog.md @@ -8,6 +8,9 @@ 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. @@ -108,7 +111,6 @@ 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.