cloudflare-next-intl 0.9.51 → 0.9.52

package/README.md

@@ -690,7 +690,7 @@ 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 once per build id (throttled to once per 15s so a later build-id marker can re-arm recovery instead of being blocked indefinitely). It also listens for `error` events during the capture phase to catch resource-load failures (a 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. 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.
 
 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/server/components/helper_script.js

@@ -17,6 +17,8 @@ export default function HelperScript() {
                 try {
                 var patterns = ${JSON.stringify(defaultStaleDeployPatterns)};
                 var key = 'stale-deploy-recovery-reloaded';
+                var timeKey = 'stale-deploy-recovery-time';
+                var throttleMs = 15000;
                 var attemptedThisLoad = false;
                 function isStale(msg) {
                     if (msg === undefined || msg === null) return true;
@@ -34,12 +36,16 @@ export default function HelperScript() {
                         if (!stale) return;
                         var buildId = localStorage.getItem('buildId') || 'unknown';
                         var marker = sessionStorage.getItem(key);
-                        if (marker === buildId) {
+                        var lastRaw = sessionStorage.getItem(timeKey);
+                        var last = lastRaw ? Number(lastRaw) : null;
+                        var throttled = last !== null && (Date.now() - last) < throttleMs;
+                        if (marker === buildId && throttled) {
                             console.warn('[StaleDeploy early-catch] Skipping reload, already attempted for buildId:', buildId);
                             return;
                         }
                         attemptedThisLoad = true;
                         sessionStorage.setItem(key, buildId);
+                        sessionStorage.setItem(timeKey, String(Date.now()));
                         try {
                             if (document.documentElement) {
                                 document.documentElement.style.backgroundColor = '#ffffff';
@@ -61,6 +67,21 @@ 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;
+                        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.52",
   "description": "Optimized Next Intl Package Special for App Router and Cloudflare",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",