fix(domains): crash-proof DomainCard against unexpected status values #4049 — ccantynz/alecrae.com

Originally written by @ccantynz-alt on GitHub.
Imported from https://github.com/ccantynz-alt/AlecRae.com/pull/82

Summary

DomainCard accessed stateStyles[verificationState] without a fallback — if the value was null, undefined, or any unexpected string, stateStyles[...] returned undefined and state.bg threw a TypeError during React rendering, which the error boundary caught and showed "Something went wrong"
mapDomain used a loose runtime type cast (as "pending" | "verified" | "failed") that silently passed through bad values rather than explicitly normalising them

Changes

packages/ui/src/composites/domain-card.tsx

// before
const state = stateStyles[verificationState];
// after
const state = stateStyles[verificationState] ?? stateStyles.pending;

apps/web/app/(dashboard)/domains/page.tsx Replaced the implicit cast with an explicit exhaustive mapping:

const verificationState =
  rawStatus === "verified" ? "verified" :
  rawStatus === "failed"   ? "failed"   :
  rawStatus === "expired"  ? "expired"  :
  "pending"; // covers "verifying", "pending", null, undefined, unknown

Why this fixes it

React render-time TypeErrors go to the error boundary (not to try/catch in async data-loading code). So even though loadDomains was fully wrapped in try/catch, a crash inside DomainCard's render escaped into the boundary and showed the "Something went wrong" page.

Test plan

Navigate to /domains — no error boundary
With no domains: shows "No domains configured" empty state
With a domain present: DomainCard renders for all status values (pending, verifying, verified, failed, expired)
TypeScript and build: both pass clean (verified locally)

Box deploy note

After merging to main, run the pull ritual on the box to pick up this fix:

git pull --ff-only origin main && bun install && bun run db:migrate && sudo systemctl restart alecrae-web

https://claude.ai/code/session_01SQnsrDnjuwbSRbL7kEKg35

Generated by Claude Code