Skip to content

Branded 404 + error pages (Group D.2)#282

Merged
blove merged 1 commit into
mainfrom
claude/error-pages
May 13, 2026
Merged

Branded 404 + error pages (Group D.2)#282
blove merged 1 commit into
mainfrom
claude/error-pages

Conversation

@blove
Copy link
Copy Markdown
Contributor

@blove blove commented May 13, 2026

Summary

Final piece of the post-merge brand sweep. Adds two app-router special pages so users hitting a bad URL or a thrown error get the brand chrome instead of Next.js's unbranded defaults.

What's in

  • `apps/website/src/app/not-found.tsx` — server component, branded 404. Eyebrow "404" + h1 "Page not found." + Back home / Browse docs CTAs. Renders inside the standard Nav+Footer shell.
  • `apps/website/src/app/error.tsx` — client component (Next.js requires this for error boundaries). "Something went wrong." with the error digest visible, Try again (calls `reset`), Back home.

What's NOT in (intentionally)

`loading.tsx` — I tried adding it but it broke 404 status codes. Adding a root `loading.tsx` triggers Suspense streaming for every navigation, which commits the initial HTTP response with status 200 before `notFound()` calls can flow through their 404 status. Verified locally: with `loading.tsx` present, `/solutions/unknown-slug` returned 200 instead of 404 — and the existing e2e test `/solutions/unknown-slug returns 404` failed. That's a real SEO regression (bad URLs stay indexed). The branded loading state is low-value for this site (marketing routes are largely SSG and never see a loading state), so the tradeoff is clearly: skip `loading.tsx`, keep proper 404 status reporting.

Test plan

  • `pnpm nx e2e website` — 35 passed (including the `/solutions/unknown-slug` 404 test)
  • Manual curl of `/totally-fake-page` → HTTP 404 with branded UI
  • Manual curl of `/solutions/unknown-slug` → HTTP 404 with branded UI
  • Manually trigger an error to verify `error.tsx` renders

🤖 Generated with Claude Code

Adds two app-router special pages matching the Statusbrew aesthetic:

- apps/website/src/app/not-found.tsx — server component, branded 404.
  Eyebrow "404" + h1 "Page not found." + helpful copy + two CTAs
  (Back home, Browse docs). Renders inside the standard Nav+Footer
  shell from layout.tsx.

- apps/website/src/app/error.tsx — client component (required by
  Next.js for error boundaries). "Something went wrong." with the
  error digest visible, Try again button (calls `reset`), Back home
  link.

loading.tsx intentionally NOT added: it would trigger Suspense
streaming and commit the initial HTTP response with status 200 before
notFound() calls could set 404. Confirmed locally — adding loading.tsx
caused /solutions/unknown-slug to return 200 instead of 404, which
would let bad URLs stay indexed in search. The branded loading state
is low-value for this site (marketing routes are largely SSG) and not
worth the SEO regression.

All 35 website e2e tests pass — including the previously-flagged
'/solutions/unknown-slug returns 404' test, which confirms the 404
status flows through the new not-found.tsx correctly.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 13, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cacheplane Ready Ready Preview, Comment May 13, 2026 3:15am

Request Review

@blove blove merged commit 053fe80 into main May 13, 2026
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant