Skip to content

Auto-reload stale code-split chunks + CLAUDE.md production-hardening checklist#32

Merged
amrtgaber merged 3 commits into
mainfrom
chore/claude-md-and-chunk-reload
Jun 28, 2026
Merged

Auto-reload stale code-split chunks + CLAUDE.md production-hardening checklist#32
amrtgaber merged 3 commits into
mainfrom
chore/claude-md-and-chunk-reload

Conversation

@amrtgaber

@amrtgaber amrtgaber commented Jun 28, 2026

Copy link
Copy Markdown
Contributor

Transfers two general-case lessons from a sibling SPA's live-event launch into the template.

Changes

fix: recover from stale code-split chunks (vite:preloadError)

A code-split SPA orphans content-hashed chunks for already-open tabs on every deploy; a tab on a previous build 404s when it lazily imports a route chunk the new deploy has replaced. main.tsx now listens for Vite's vite:preloadError and surfaces a one-shot "new version available" toast (sonner) with a Reload action.

It prompts rather than force-reloading on purpose: the router uses defaultPreload: "intent", so the event also fires for speculative hover preloads — an auto-reload would reload the page when a user merely hovers a stale link, discarding any unsaved work. The toast lets the user reload on their own terms; preventDefault() suppresses the otherwise-uncaught preload errors.

docs: add CLAUDE.md

Agent-facing orientation, the template's conventions, and a framework-level production hardening checklist distilled from running a sibling SPA through a high-traffic live event: stale code-split chunks, total sort comparators, coercing nullable fields at one chokepoint, void-promise handling, intentional-cancellation (AbortError) noise, API/consumer schema coordination, and green-CI ≠ verified-in-prod.

Test plan

  • pnpm lint — pass (4 pre-existing react-refresh warnings in __root.tsx, unrelated)
  • pnpm format:check — pass
  • pnpm tsc --noEmit — pass
  • pnpm test:run — 2 passed
  • pnpm build — succeeds

A code-split SPA orphans content-hashed chunks for already-open tabs on every
deploy; a tab on a previous build 404s when it lazily imports a route chunk the
new deploy has replaced. Listen for Vite's `vite:preloadError` and reload once
to pick up the current build, with a timestamp guard so a genuinely broken
deploy (the chunk stays missing) can't reload-loop.
Agent-facing orientation, the template's conventions (committed generated API
client, adapter-boundary coercion, global mutation errors, chunk auto-reload),
and a framework-level "production hardening" checklist distilled from running a
sibling SPA through a high-traffic live event: stale code-split chunks, total
sort comparators, coercing nullable fields at one chokepoint, void-promise
handling, intentional-cancellation noise, and API/consumer schema coordination.
The `vite:preloadError` listener now surfaces a one-shot "new version available"
toast (sonner) with a Reload action instead of calling `location.reload()`
directly. The router uses `defaultPreload: "intent"`, so this event also fires
for speculative hover preloads — an auto-reload would reload the page when a user
merely hovers a stale link and discard any unsaved work. The toast lets the user
reload on their own terms; `preventDefault()` suppresses the now-handled uncaught
preload errors. Drops the sessionStorage reload-loop guard (no auto-reload to
loop).
@amrtgaber
amrtgaber merged commit 48cf259 into main Jun 28, 2026
2 checks passed
@amrtgaber
amrtgaber deleted the chore/claude-md-and-chunk-reload branch June 28, 2026 20:27
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