Version skew protection and ChunkLoadError recovery#368
Merged
Conversation
After a deploy, stale client JS can mismatch with the new server, causing RSC 404s and ChunkLoadErrors. This adds Next.js built-in deploymentId protection (triggers hard reload on navigation mismatch) and a global-error.tsx boundary that catches ChunkLoadErrors with sessionStorage-based infinite loop prevention.
jhodapp
changed the title
github-project-automation
bot
moved this from Review
to ✅ Done
in Refactor Coaching Platform
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
After a deploy, the Next.js server restarts with new chunk hashes but the browser still holds old JS bundles. This mismatch causes RSC flight data 404s and ChunkLoadErrors, which can cascade into React error #185 (maximum update depth exceeded). This PR adds two layers of protection.
GitHub Issue: Related to #366
Changes
deploymentIdtonext.config.mjs— Next.js built-in version skew protection that detects client/server mismatch during navigation and triggers a hard reloadGIT_COMMIT_SHAas a Docker build arg through all Dockerfile stages and the CI workflow, sodeploymentIdis set in productionglobal-error.tsx— root error boundary that catches ChunkLoadErrors (stale chunks 404ing) and auto-reloads once, with sessionStorage-based infinite loop preventionTesting Strategy
__tests__/app/global-error.test.tsxcovering:window.location.reload()"Failed to fetch dynamically imported module"errors are treated as chunk errorsglobal-error.tsxonly activates in production builds (Next.js limitation) — E2E testing not possible in dev mode per vercel/next.js#46964GIT_COMMIT_SHAdefaults toundefinedlocally, sodeploymentIdis disabled in dev — no behavioral changeConcerns
GIT_COMMIT_SHAneeds to be passed there separatelyglobal-error.tsxcannot be E2E tested againstnpm run dev— only production builds. The integration tests cover the component logic thoroughly.