(function() { // PHASE-296 Thomas: Use same keys as ChunkErrorBoundary and error.tsx to prevent triple-reload var hasReloaded = sessionStorage.getItem('feed_chunk_reload_attempted'); var reloadTimestamp = sessionStorage.getItem('feed_chunk_reload_timestamp'); var chunkErrorCount = 0; var maxChunkErrorsBeforeUI = 3; // PHASE-256 Emily: Show error UI when server has stale build (chunks don't exist) function showChunkErrorUI() { // Only show UI once if (document.getElementById('feed-chunk-error-ui')) return; var container = document.createElement('div'); container.id = 'feed-chunk-error-ui'; container.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#0a0a0a 0%,#1a1a2e 50%,#0a0a0a 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:99999;padding:20px;text-align:center;'; container.innerHTML = '

Site Update in Progress

We\'re deploying an update. Please wait a moment and try again.

Error: Webpack chunks not found on server. A fresh deployment is needed.

'; document.body.appendChild(container); } window.addEventListener('error', function(event) { // Check if this is a script load error (ChunkLoadError) var isChunkError = ( (event.target && event.target.tagName === 'SCRIPT') || (event.message && ( event.message.indexOf('Loading chunk') !== -1 || event.message.indexOf('ChunkLoadError') !== -1 || event.message.indexOf('Failed to fetch dynamically imported module') !== -1 || event.message.indexOf('Failed to fetch RSC payload') !== -1 || event.message.indexOf('React Server Component') !== -1 || event.message.indexOf('application/rsc') !== -1 )) ); if (isChunkError) { chunkErrorCount++; // PHASE-256 Emily: If we already reloaded and chunks still fail, show error UI if (hasReloaded) { console.error('[FEED] Chunk load error persists after reload - server may have stale build'); if (chunkErrorCount >= maxChunkErrorsBeforeUI) { showChunkErrorUI(); } return; } console.error('[FEED] Chunk load error detected, reloading...'); // PHASE-296 Thomas: Use same keys as ChunkErrorBoundary and error.tsx sessionStorage.setItem('feed_chunk_reload_attempted', 'true'); sessionStorage.setItem('feed_chunk_reload_timestamp', Date.now().toString()); // Clear caches if available if ('caches' in window) { caches.keys().then(function(names) { names.forEach(function(name) { caches.delete(name); }); }).catch(function() {}); } // Reload after small delay setTimeout(function() { location.reload(); }, 100); } }, true); // PHASE-296 Thomas: DON'T clear flag immediately on 'load' event! // The 'load' event fires when browser thinks page is loaded, but React may still // be hydrating. If a chunk error occurs during React hydration, we'd clear the // flag prematurely, causing an infinite reload loop on /admin/users. // Instead, wait 5 seconds after load to give React time to mount and catch errors. // The React error boundaries (ChunkErrorBoundary, error.tsx) will properly clear // the flag after their 30-second cooldown anyway. window.addEventListener('load', function() { setTimeout(function() { // Only clear if we haven't had any new chunk errors during the delay if (chunkErrorCount === 0) { sessionStorage.removeItem('feed_chunk_reload_attempted'); sessionStorage.removeItem('feed_chunk_reload_timestamp'); } }, 5000); }); // PHASE-256 Emily: Clear stale reload flag after 60 seconds to allow retry // PHASE-296 Thomas: Use same keys as ChunkErrorBoundary and error.tsx if (hasReloaded && reloadTimestamp) { var elapsed = Date.now() - parseInt(reloadTimestamp, 10); if (elapsed > 60000) { sessionStorage.removeItem('feed_chunk_reload_attempted'); sessionStorage.removeItem('feed_chunk_reload_timestamp'); } } })();

Caleb — Process Engineer

Frequently Asked Questions