' + '' + '

Loading app...

' + '

Please wait

' + '

'; if (!document.getElementById('hydration-spin-style')) { var style = document.createElement('style'); style.id = 'hydration-spin-style'; style.textContent = '@keyframes spin{to{transform:rotate(360deg)}}'; document.head.appendChild(style); } document.body.appendChild(overlay); }, 3000); // Phase 2: After 5 seconds without hydration, probe the // server before deciding which recovery overlay to show. // // History: a 30-min prod outage on 2026-05-28 (PR #1448 // tripped the stale-.next webpack-minify trip-wire + // mishandled npm install state) landed an App Store // reviewer mid-outage. The pre-probe overlay showed // "App is stuck — Reset & Sign In", which tries to clear // local data + reload; the reload also hits the dead // server, so reviewer was trapped in a loop and rejected // build 6. With the probe: a 5xx response from the server // produces a "Service temporarily unavailable" overlay // (Retry only — no destructive cleanup), so a future // reviewer hitting another outage sees a clear, non- // trapping message. // // IMPORTANT — the click handler is wired via addEventListener // AFTER appendChild, NOT via an inline onclick="" attribute. // The previous inline form over-escaped the apostrophes // around the recoverNuclear arguments (three backslashes // before each apostrophe in source → one backslash + one // apostrophe in the rendered HTML), and that backslash- // apostrophe pair is a JavaScript SyntaxError when the // browser parses the onclick attribute as JS — so the // button was completely dead. Users reported a black // screen + non-functional Reset; verified with // new Function(attrValue) throwing on the live response, // 2026-05-20. Keeping the handler off the attribute // removes the entire class of HTML-attribute-escape bugs. // src/app/layout-recovery-overlay.test.ts guards against // any inline onclick reappearing here. function showServiceUnavailableOverlay() { if (!window.__HYDRATION_PENDING__) return; removeAllOverlays(); var overlay = document.createElement('div'); overlay.id = 'service-unavailable-overlay'; overlay.setAttribute('role', 'alert'); overlay.setAttribute('aria-live', 'assertive'); overlay.setAttribute('aria-label', 'Service temporarily unavailable.'); overlay.style.cssText = 'position:fixed;inset:0;background:#0f172a;display:flex;align-items:center;justify-content:center;z-index:9999;font-family:system-ui,-apple-system,sans-serif;'; overlay.innerHTML = '

' + '' + '

Service Temporarily Unavailable

' + '

Our servers are not responding. This is usually temporary — please try again in a few minutes.

' + '' + '

Your offline work is safe and will sync when service returns.

' + '

'; document.body.appendChild(overlay); var btn = document.getElementById('service-unavailable-retry-btn'); if (btn) { btn.addEventListener('click', function() { // Soft reload — no IndexedDB clear. The server may // already be back by now; if not, the overlay will // re-fire after 5s and the user can try again. window.location.reload(); }); } } function showStuckOverlay() { if (!window.__HYDRATION_PENDING__) return; removeAllOverlays(); var overlay = document.createElement('div'); overlay.id = 'offline-fallback-overlay'; overlay.setAttribute('role', 'alert'); overlay.setAttribute('aria-live', 'assertive'); overlay.setAttribute('aria-label', 'Page not responding. Tap button to reload.'); overlay.style.cssText = 'position:fixed;inset:0;background:#0f172a;display:flex;align-items:center;justify-content:center;z-index:9999;font-family:system-ui,-apple-system,sans-serif;'; overlay.innerHTML = '

' + '' + '

App Loading...

' + '

The app is stuck. Tap below to clear cached data and return to sign-in.

' + '' + '

Any unsynced offline work will be lost. Connect to a network before tapping if you have pending visits.

' + '

'; document.body.appendChild(overlay); var btn = document.getElementById('hydration-overlay-reset-btn'); if (btn) { btn.addEventListener('click', function() { recoverNuclear('Blank screen — user tapped Reset', 'layout-hydration-overlay'); }); } } setTimeout(function() { if (!window.__HYDRATION_PENDING__) return; // Probe /api/build-id with a 2s timeout to distinguish // "server is 5xx" from "hydration stalled with server ok" // or "offline / network failure". var ctrl; try { ctrl = new AbortController(); } catch (e) { ctrl = null; } var probeTimeout = setTimeout(function() { if (ctrl) try { ctrl.abort(); } catch (e) {} }, 2000); fetch('/api/build-id', { signal: ctrl ? ctrl.signal : undefined, cache: 'no-store', credentials: 'same-origin', }).then(function(res) { clearTimeout(probeTimeout); if (!window.__HYDRATION_PENDING__) return; if (res.status >= 500 && res.status < 600) { showServiceUnavailableOverlay(); } else { showStuckOverlay(); } }).catch(function() { clearTimeout(probeTimeout); if (!window.__HYDRATION_PENDING__) return; // Network failure, abort, offline. Could also be nginx // refusing connection. Default to the existing "stuck" // recovery so the user has the Reset option. showStuckOverlay(); }); }, 5000); // Phase 3: Auto-redirect to /offline after 12s if stuck AND offline setTimeout(function() { if (window.__HYDRATION_PENDING__ && !navigator.onLine) { window.location.assign('/offline'); } }, 12000); })();