cloudflare-next-intl 0.9.51 → 0.9.53

package/README.md

@@ -690,7 +690,9 @@ through `@intl-config`.
 
 When a new version of your application is deployed to Cloudflare Workers, users on older client sessions may encounter `ChunkLoadError` or failed dynamic imports when requesting outdated chunks.
 
-`IntlHelperScript` renders an early-catch `<script>` (production only, id `stale-deploy-early-catch`) that runs before hydration and listens for `window.error`/`unhandledrejection` events matching the same patterns as `isStaleDeployError` (inlined as JSON, so it stays in sync with `staleDeployPatterns` config), then force-reloads once per build id. This covers the case a React-level recovery (`useStaleDeployRecovery` below) cannot: when the chunk that failed to load is part of your own error boundary/global-error bundle, React never gets a chance to render the recovery UI. Both layers share the same `sessionStorage['stale-deploy-recovery-reloaded']` marker keyed by build id, so they can't double-reload each other. No setup beyond rendering `<IntlHelperScript />` is required.
+`IntlHelperScript` renders an early-catch `<script>` (production only, id `stale-deploy-early-catch`) that runs before hydration and listens for `window.error`/`unhandledrejection` events matching the same patterns as `isStaleDeployError` (inlined as JSON, so it stays in sync with `staleDeployPatterns` config), then force-reloads (throttled to once per 15s, capped at 2 attempts per build id — a 3rd stale-deploy error for the same build id falls through instead of reloading again; the count resets once a new build id is seen). It also listens for `error` events during the capture phase to catch resource-load failures (a same-origin chunk `<script>`/`<link>` 404ing or served with a disallowed MIME type), which fire a non-bubbling, message-less `error` event on the element itself rather than surfacing as a catchable message; a failed third-party resource (analytics, reCAPTCHA, etc.) is ignored, since only the app's own build output can break its module graph. This covers the case a React-level recovery (`useStaleDeployRecovery` below) cannot: when the chunk that failed to load is part of your own error boundary/global-error bundle, React never gets a chance to render the recovery UI. Both layers share the same `sessionStorage['stale-deploy-recovery-reloaded']` marker keyed by build id, so they can't double-reload each other. No setup beyond rendering `<IntlHelperScript />` is required.
+
+`installGlobalErrorOverride` (used internally by error reporting setup) also reports these same-tree resource-load failures — a failed `script`/`link` load is reported via `reportError` instead of being silently dropped, since the browser gives it no bubbling event or message to catch any other way.
 
 For errors that don't crash the module graph itself (a normal thrown error reaching an error boundary), use `isStaleDeployError` and `clearClientCache` in error boundaries or global error handlers to automatically recover:
 

package/dist/src/error_handling/install_global_error_override.js

@@ -16,6 +16,22 @@ export default function installGlobalErrorOverride(config) {
             isClient: true,
         });
     });
+    window.addEventListener('error', (event) => {
+        const el = event.target;
+        if (!el || el === window)
+            return;
+        const tag = el.tagName?.toLowerCase();
+        if (tag !== 'script' && tag !== 'link')
+            return;
+        const src = el.src || el.href;
+        if (!src)
+            return;
+        void reportError(config, {
+            error: `Failed to load ${tag} resource: ${src}`,
+            classOrMethodName: 'Global Resource Error Handler',
+            isClient: true,
+        });
+    }, true);
     window.addEventListener('unhandledrejection', (event) => {
         void reportError(config, {
             error: event.reason,

package/dist/src/error_handling/use_stale_deploy_recovery.d.ts

@@ -1,4 +1,4 @@
 export declare function isRecentBuild(setAt: number | null, now: number, windowMs?: number): boolean;
-export declare function shouldRecoverFromStaleDeploy(error: unknown, buildId: string, marker: string | null, recentBuild?: boolean, reloadTime?: number | null, now?: number, throttleMs?: number): boolean;
+export declare function shouldRecoverFromStaleDeploy(error: unknown, buildId: string, marker: string | null, recentBuild?: boolean, reloadTime?: number | null, now?: number, throttleMs?: number, attempts?: number, maxAttempts?: number): boolean;
 export declare function performCacheBustReload(): void;
 export default function useStaleDeployRecovery(error: unknown, onRecover?: () => Promise<unknown>, delayMs?: number): boolean;

package/dist/src/error_handling/use_stale_deploy_recovery.js

@@ -4,6 +4,8 @@ import isStaleDeployError from './is_stale_deploy_error.js';
 import clearClientCache from './clear_client_cache.js';
 const RECOVERY_RELOAD_KEY = 'stale-deploy-recovery-reloaded';
 const RECOVERY_TIME_KEY = 'stale-deploy-recovery-time';
+const RECOVERY_COUNT_KEY = 'stale-deploy-recovery-count';
+const MAX_RECOVERY_ATTEMPTS = 2;
 const BUILD_ID_KEY = 'buildId';
 const BUILD_ID_SET_AT_KEY = 'buildIdSetAt';
 const RECENT_BUILD_WINDOW_MS = 60000;
@@ -28,16 +30,33 @@ function buildIdSetAt() {
 export function isRecentBuild(setAt, now, windowMs = RECENT_BUILD_WINDOW_MS) {
     return setAt !== null && now - setAt < windowMs;
 }
-export function shouldRecoverFromStaleDeploy(error, buildId, marker, recentBuild = false, reloadTime = null, now = Date.now(), throttleMs = RELOAD_THROTTLE_MS) {
+export function shouldRecoverFromStaleDeploy(error, buildId, marker, recentBuild = false, reloadTime = null, now = Date.now(), throttleMs = RELOAD_THROTTLE_MS, attempts = 0, maxAttempts = MAX_RECOVERY_ATTEMPTS) {
     if (!isStaleDeployError(error))
         return false;
     const isRecentlyReloaded = reloadTime !== null && now - reloadTime < throttleMs;
     const isSameBuildMarker = marker !== null && marker !== '' && (buildId === 'unknown' || marker === buildId);
+    if (isSameBuildMarker && attempts >= maxAttempts) {
+        return false;
+    }
     if (isSameBuildMarker && isRecentlyReloaded && !recentBuild) {
         return false;
     }
     return true;
 }
+function currentAttempts(buildId, marker) {
+    if (marker === null || marker === '')
+        return 0;
+    if (buildId !== 'unknown' && marker !== buildId)
+        return 0;
+    try {
+        const raw = sessionStorage.getItem(RECOVERY_COUNT_KEY);
+        const parsed = raw ? Number(raw) : 0;
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+    }
+    catch {
+        return 0;
+    }
+}
 function canRecover(error) {
     if (typeof window === 'undefined')
         return false;
@@ -48,7 +67,8 @@ function canRecover(error) {
         const marker = sessionStorage.getItem(RECOVERY_RELOAD_KEY);
         const isRecent = isRecentBuild(buildIdSetAt(), Date.now());
         const isStale = isStaleDeployError(error);
-        const result = shouldRecoverFromStaleDeploy(error, bId, marker, isRecent, reloadTime, Date.now());
+        const attempts = currentAttempts(bId, marker);
+        const result = shouldRecoverFromStaleDeploy(error, bId, marker, isRecent, reloadTime, Date.now(), RELOAD_THROTTLE_MS, attempts);
         console.warn('[useStaleDeployRecovery]', {
             error,
             isStale,
@@ -56,6 +76,7 @@ function canRecover(error) {
             marker,
             isRecent,
             reloadTime,
+            attempts,
             result,
         });
         return result;
@@ -89,7 +110,10 @@ export default function useStaleDeployRecovery(error, onRecover, delayMs = 1000)
             Promise.all([initialOnRecover?.().catch(() => undefined), clearClientCache().catch(() => undefined)])
                 .finally(() => {
                 try {
+                    const marker = sessionStorage.getItem(RECOVERY_RELOAD_KEY);
+                    const spent = currentAttempts(buildId, marker);
                     sessionStorage.setItem(RECOVERY_RELOAD_KEY, buildId);
+                    sessionStorage.setItem(RECOVERY_COUNT_KEY, String(spent + 1));
                     sessionStorage.setItem(RECOVERY_TIME_KEY, String(Date.now()));
                 }
                 catch { }

package/dist/src/server/components/helper_script.js

@@ -17,6 +17,10 @@ export default function HelperScript() {
                 try {
                 var patterns = ${JSON.stringify(defaultStaleDeployPatterns)};
                 var key = 'stale-deploy-recovery-reloaded';
+                var timeKey = 'stale-deploy-recovery-time';
+                var countKey = 'stale-deploy-recovery-count';
+                var maxAttempts = 2;
+                var throttleMs = 15000;
                 var attemptedThisLoad = false;
                 function isStale(msg) {
                     if (msg === undefined || msg === null) return true;
@@ -34,12 +38,31 @@ export default function HelperScript() {
                         if (!stale) return;
                         var buildId = localStorage.getItem('buildId') || 'unknown';
                         var marker = sessionStorage.getItem(key);
-                        if (marker === buildId) {
-                            console.warn('[StaleDeploy early-catch] Skipping reload, already attempted for buildId:', buildId);
+                        var lastRaw = sessionStorage.getItem(timeKey);
+                        var last = lastRaw ? Number(lastRaw) : null;
+                        var throttled = last !== null && (Date.now() - last) < throttleMs;
+                        // Attempts are counted per build id: the 1st and 2nd
+                        // page load may each recover, the 3rd falls through to
+                        // the error UI. A new deploy resets the count.
+                        var sameBuild = marker === buildId;
+                        var attempts = 0;
+                        if (sameBuild) {
+                            var rawCount = sessionStorage.getItem(countKey);
+                            attempts = rawCount ? Number(rawCount) : 0;
+                            if (!(attempts >= 0)) attempts = 0;
+                        }
+                        if (sameBuild && attempts >= maxAttempts) {
+                            console.warn('[StaleDeploy early-catch] Skipping reload, attempts exhausted for buildId:', buildId, attempts);
+                            return;
+                        }
+                        if (sameBuild && throttled) {
+                            console.warn('[StaleDeploy early-catch] Skipping reload, throttled for buildId:', buildId);
                             return;
                         }
                         attemptedThisLoad = true;
                         sessionStorage.setItem(key, buildId);
+                        sessionStorage.setItem(countKey, String(attempts + 1));
+                        sessionStorage.setItem(timeKey, String(Date.now()));
                         try {
                             if (document.documentElement) {
                                 document.documentElement.style.backgroundColor = '#ffffff';
@@ -61,6 +84,27 @@ export default function HelperScript() {
                     }
                 }
                 window.addEventListener('error', function(e) { recover(e.message, 'error-event'); });
+                // Resource-load failures (a chunk 404ing or served with a
+                // disallowed MIME type) fire a non-bubbling 'error' event on the
+                // element itself, so they only reach window during capture, and
+                // they carry no message. Treat a failed script/link as stale.
+                window.addEventListener('error', function(e) {
+                    try {
+                        var el = e.target;
+                        if (!el || el === window) return;
+                        var tag = (el.tagName || '').toLowerCase();
+                        if (tag !== 'script' && tag !== 'link') return;
+                        var src = el.src || el.href || '';
+                        if (!src) return;
+                        // Only our own build output can break the React module
+                        // graph. A failed third-party script (analytics,
+                        // reCAPTCHA) must never trigger a reload.
+                        var sameOrigin = false;
+                        try { sameOrigin = new URL(src, window.location.href).origin === window.location.origin; } catch (err2) { return; }
+                        if (!sameOrigin) return;
+                        recover('chunk resource failed to load: ' + src, 'resource-error');
+                    } catch (err) {}
+                }, true);
                 window.addEventListener('unhandledrejection', function(e) {
                     recover(e.reason && (e.reason.message || e.reason), 'unhandledrejection');
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare-next-intl",
-  "version": "0.9.51",
+  "version": "0.9.53",
   "description": "Optimized Next Intl Package Special for App Router and Cloudflare",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",