No catchall route for unknown URLs — visiting /garbage or /workspace/foo renders a blank main area (Navbar still shows, main is empty) #154

New issue

Closed

opened 2026-10-03 16:04:39 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 16:04:39 +00:00

Owner

Finding

The app has 5 React routes (/, /workspace, /editor, /gallery, /help) defined in src/App.tsx. There is no catchall route. Visiting a path that doesn't match any defined route (e.g. /garbage, /workspace/foo, /editor/123) renders nothing — the Routes component returns null for unmatched locations.

Verified: grep -rn 'Route.*\*\|NotFound\|404\|catchall\|catchAll' src/ returns no matches outside of test fixtures.

A user who mistypes a URL, follows a stale bookmark, or clicks a misconfigured link gets a blank page with no nav, no error, and no recovery. The Navbar still renders, so they can click "Workspace" or "Gallery" to get back, but the page area is empty.

Where

Routes: src/App.tsx:9-17
Missing catchall: same file, after line 17

Suggested fix shape

Add a catchall <Route path="*"> to src/App.tsx that renders a NotFound page (or inlines a simple component):

<Route path="*" element={<NotFound />} />

The NotFound page should:

Show "Page not found" with the bad URL
Provide a "Back to Home" button linking to /
Match the existing visual design (use the same fonts, colors, layout as the rest of the app)

This is a small new component, ~50 lines, plus one route line in App.tsx. The catchall should render inside the existing Layout so the Navbar/Footer are present, giving the user a way to recover without using the browser back button.

Severity

Medium. The navbar still renders so the user can navigate, but a blank main area is bad UX. The fix is small.

Discovered by

Gap analysis (2026-10-02) of app routing.

Same shape as #152 (no error boundaries) — both are "what happens when the user goes off the happy path." A 404 handler and an error boundary are the two halves of resilient navigation.

## Finding The app has 5 React routes (`/`, `/workspace`, `/editor`, `/gallery`, `/help`) defined in `src/App.tsx`. There is no catchall route. Visiting a path that doesn't match any defined route (e.g. `/garbage`, `/workspace/foo`, `/editor/123`) renders nothing — the `Routes` component returns `null` for unmatched locations. Verified: `grep -rn 'Route.*\*\|NotFound\|404\|catchall\|catchAll' src/` returns no matches outside of test fixtures. A user who mistypes a URL, follows a stale bookmark, or clicks a misconfigured link gets a blank page with no nav, no error, and no recovery. The Navbar still renders, so they can click "Workspace" or "Gallery" to get back, but the page area is empty. ## Where - Routes: `src/App.tsx:9-17` - Missing catchall: same file, after line 17 ## Suggested fix shape Add a catchall `<Route path="*">` to `src/App.tsx` that renders a `NotFound` page (or inlines a simple component): ```tsx <Route path="*" element={<NotFound />} /> ``` The `NotFound` page should: 1. Show "Page not found" with the bad URL 2. Provide a "Back to Home" button linking to `/` 3. Match the existing visual design (use the same fonts, colors, layout as the rest of the app) This is a small new component, ~50 lines, plus one route line in App.tsx. The catchall should render inside the existing `Layout` so the Navbar/Footer are present, giving the user a way to recover without using the browser back button. ## Severity Medium. The navbar still renders so the user can navigate, but a blank main area is bad UX. The fix is small. ## Discovered by Gap analysis (2026-10-02) of app routing. ## Related - Same shape as #152 (no error boundaries) — both are "what happens when the user goes off the happy path." A 404 handler and an error boundary are the two halves of resilient navigation.

Mark added the

feature-request

triage-approved

labels

2026-10-03 16:04:40 +00:00

Mark referenced this issue from a commit

2026-10-03 16:45:52 +00:00

fix(#154): add 404 catchall route — unknown URLs render NotFound page with Back-to-Home + quick-nav

Mark commented

2026-10-03 16:57:48 +00:00

Author

Owner

Fixed in 004adae0a9 — added catchall route + NotFound page.

What changed:

New src/pages/NotFound.tsx (135 lines): 404 page with bad-path echo, "Back to Home" button, quick-nav to Workspace/Gallery/Help, and a "Go back" link to the previous same-origin page when one exists. Lives inside the existing Layout so the Navbar/Footer stay visible for recovery without the browser back button. Mirrors the dark hero / gold-accent design language of Help.tsx.
src/App.tsx: <Route path="*"> appended after the five named routes, also wrapped in its own <RouteBoundary scope="NotFound"> for consistency with the error-boundary structure added in #153.
New src/pages/NotFound.test.tsx: 6 tests covering catchall rendering, bad-path echo (path + query + hash), Back-to-Home link target, ordering guard so the named routes still win, sub-paths like /editor/123 hitting the catchall, and keyboard focus.

Verification: vitest run → 648/648 passed (was 630 before the rebased #153 + the 6 new tests for this fix). eslint . clean. tsc -b --noEmit clean. Rebased onto origin/main (which picked up #153), pushed: 85d342f..004adae.

Closing this issue — the catchall is live on main.

**Fixed in 004adae0a9f6abba0f0c7ed227316fe1085cc9cf** — added catchall route + NotFound page. **What changed:** - New `src/pages/NotFound.tsx` (135 lines): 404 page with bad-path echo, "Back to Home" button, quick-nav to Workspace/Gallery/Help, and a "Go back" link to the previous same-origin page when one exists. Lives inside the existing Layout so the Navbar/Footer stay visible for recovery without the browser back button. Mirrors the dark hero / gold-accent design language of Help.tsx. - `src/App.tsx`: `<Route path="*">` appended after the five named routes, also wrapped in its own `<RouteBoundary scope="NotFound">` for consistency with the error-boundary structure added in #153. - New `src/pages/NotFound.test.tsx`: 6 tests covering catchall rendering, bad-path echo (path + query + hash), Back-to-Home link target, ordering guard so the named routes still win, sub-paths like `/editor/123` hitting the catchall, and keyboard focus. **Verification:** `vitest run` → 648/648 passed (was 630 before the rebased #153 + the 6 new tests for this fix). `eslint .` clean. `tsc -b --noEmit` clean. Rebased onto origin/main (which picked up #153), pushed: `85d342f..004adae`. Closing this issue — the catchall is live on main.

Mark closed this issue

2026-10-03 16:57:49 +00:00