Conversation
When assets are redeployed with new content hashes, users with cached pages get TypeError when dynamically imported chunks (React.lazy) no longer exist on the CDN. This adds graceful recovery by detecting these errors and triggering a page reload with loop prevention. - Create chunk-load-error-handler utility with browser-variant detection (Chrome, Firefox, Safari all use different error messages) - Add ErrorBoundary fallback in react-bootloader to catch chunk errors in the React tree and reload instead of showing blank components - Add global unhandledrejection handler as safety net for failures outside the React error boundary tree - Fix Sentry beforeSend filter to match all browser error variants (was only matching Chrome's "Failed to fetch dynamically imported module") - Guard ErrorFallback auto-reset against chunk errors to prevent infinite retry loops Closes #8369 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Old chunk files persist on the CDN, so import failures are transient (network blips, CDN hiccups) rather than missing files. Instead of immediately reloading the page, retry the import up to 3 times with a 1-second delay between attempts. - Create lazy-with-retry utility as drop-in replacement for React.lazy - Update all 6 files that use lazy() to import from the retry utility (129 lazy call sites, only import lines change) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
After all retries are exhausted, if the error is a chunk load error, reload the page directly instead of throwing. This ensures the error never reaches Sentry.captureException via ErrorBoundary handlers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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.
Closes #8369
Summary
React.lazy) occasionally fail with transient errors (network blips, CDN hiccups). Old chunk files persist on the CDN, so these are transient failures rather than missing files.lazy-with-retryutility as a drop-in replacement forReact.lazythat retries failed imports up to 3 times with 1-second delays between attempts.lazy()to import from the retry utility (129 lazy call sites, only import lines change).chunk-load-error-handlerutility for detecting dynamic import errors across all browsers (Chrome, Firefox, Safari use different error messages) with asafeReloadForChunkError()last-resort fallback using sessionStorage-based cooldown to prevent infinite loops.ErrorBoundaryfallback and a globalunhandledrejectionlistener as safety nets.beforeSendfilter to match Firefox ("error loading dynamically imported module") and Safari ("Importing a module script failed.") in addition to Chrome.ErrorFallbackauto-reset inErrorBoundary.tsxagainst chunk load errors to prevent infinite retry loops.Test plan
yarn test— all 160 test suites pass (1550 tests)🤖 Generated with Claude Code