From ddbb1ea75c35b42c5875b55744fdb35f043f0c98 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 6 May 2026 21:40:39 +0800 Subject: [PATCH] feat: add soft retry for chunk errors and update all locales Split the single retry button into two actions: - "Retry" (soft): clears failed chunk scripts and resets ErrorBoundary state for chunk load errors only - "Reload Page" (hard): full page refresh, available for all errors Update all 8 locale files with new app.error.reload key and change app.error.retry from "refresh/reload" to "retry" semantics. Co-Authored-By: Claude Opus 4.7 --- src/components/ErrorBoundary/index.tsx | 60 ++++++++++++++++++++------ src/locales/bn-BD/pwa.ts | 3 +- src/locales/en-US/pwa.ts | 9 ++-- src/locales/fa-IR/pwa.ts | 3 +- src/locales/id-ID/pwa.ts | 3 +- src/locales/ja-JP/pwa.ts | 3 +- src/locales/pt-BR/pwa.ts | 3 +- src/locales/zh-CN/pwa.ts | 7 +-- src/locales/zh-TW/pwa.ts | 3 +- 9 files changed, 68 insertions(+), 26 deletions(-) diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx index 38290288..11c47b87 100644 --- a/src/components/ErrorBoundary/index.tsx +++ b/src/components/ErrorBoundary/index.tsx @@ -17,15 +17,40 @@ function getSubTitleId(isChunkError: boolean, isOffline: boolean): string { : 'app.error.chunk.description.online'; } +/** + * Remove failed chunk script/link tags so the bundler runtime can retry loading. + * Utoopack caches failed chunks as rejected promises; removing the DOM elements + * and clearing its internal cache isn't possible via public API, but removing + * the script tags gives us a clean slate on the next retry. + */ +function removeFailedChunkScripts() { + const scripts = document.querySelectorAll( + 'script[src][data-failed], link[href][data-failed]', + ); + for (const el of scripts) el.remove(); +} + function renderErrorFallback( error: Error, isOnline: boolean, + onReload: () => void, onRetry: () => void, ) { const intl = getIntl(); const isOffline = !isOnline; const isChunkError = isChunkLoadError(error); + const subTitleId = getSubTitleId(isChunkError, isOffline); + + const retryButton = isChunkError ? ( + + ) : null; + return (
@@ -40,19 +65,24 @@ function renderErrorFallback( : 'Something went wrong', })} subTitle={intl.formatMessage({ - id: getSubTitleId(isChunkError, isOffline), + id: subTitleId, defaultMessage: isChunkError && isOffline - ? 'Your network connection has been lost. Please check your connection and refresh.' + ? 'Your network connection has been lost. Please check your connection and reload.' : isChunkError - ? 'Page resources failed to load. Please refresh and try again.' - : 'Sorry, an error occurred on this page. Please refresh or go back to the home page.', + ? 'Page resources failed to load. Please reload and try again.' + : 'Sorry, an error occurred on this page. Please reload or go back to the home page.', })} extra={[ - , , - ]} + ].filter(Boolean)} />
@@ -111,12 +141,15 @@ export default class ErrorBoundary extends React.Component< console.error('[ErrorBoundary]', error, info.componentStack); } + /** Soft retry: clear failed scripts, reset state, let React re-render. */ handleRetry = () => { - if (this.state.error && isChunkLoadError(this.state.error)) { - window.location.reload(); - } else { - this.setState({ hasError: false, error: null }); - } + removeFailedChunkScripts(); + this.setState({ hasError: false, error: null }); + }; + + /** Hard reload: full page refresh. */ + handleReload = () => { + window.location.reload(); }; render() { @@ -124,6 +157,7 @@ export default class ErrorBoundary extends React.Component< return renderErrorFallback( this.state.error, this.isOnline, + this.handleReload, this.handleRetry, ); } diff --git a/src/locales/bn-BD/pwa.ts b/src/locales/bn-BD/pwa.ts index 364e8bf7..b98f7c37 100644 --- a/src/locales/bn-BD/pwa.ts +++ b/src/locales/bn-BD/pwa.ts @@ -8,7 +8,8 @@ export default { 'app.error.render.title': 'কিছু ভুল হয়েছে', 'app.error.render.description': 'দুঃখিত, এই পৃষ্ঠায় একটি ত্রুটি ঘটেছে। দয়া করে রিফ্রেশ করুন বা হোম পৃষ্ঠায় ফিরে যান।', - 'app.error.retry': 'রিফ্রেশ', + 'app.error.retry': 'আবার চেষ্টা করুন', + 'app.error.reload': 'পৃষ্ঠা রিফ্রেশ করুন', 'app.error.home': 'হোমে ফিরে যান', 'app.request.offline': 'নেটওয়ার্ক অনুপলব্ধ। আপনার সংযোগ পরীক্ষা করুন এবং আবার চেষ্টা করুন।', diff --git a/src/locales/en-US/pwa.ts b/src/locales/en-US/pwa.ts index 998b06c8..9a0fd432 100644 --- a/src/locales/en-US/pwa.ts +++ b/src/locales/en-US/pwa.ts @@ -3,13 +3,14 @@ export default { 'You are currently offline. Some features may be unavailable.', 'app.error.chunk.title': 'Failed to load page', 'app.error.chunk.description.offline': - 'Your network connection has been lost. Please check your connection and refresh.', + 'Your network connection has been lost. Please check your connection and reload.', 'app.error.chunk.description.online': - 'Page resources failed to load. Please refresh and try again.', + 'Page resources failed to load. Please reload and try again.', 'app.error.render.title': 'Something went wrong', 'app.error.render.description': - 'Sorry, an error occurred on this page. Please refresh or go back to the home page.', - 'app.error.retry': 'Refresh', + 'Sorry, an error occurred on this page. Please reload or go back to the home page.', + 'app.error.retry': 'Retry', + 'app.error.reload': 'Reload Page', 'app.error.home': 'Back Home', 'app.request.offline': 'Network unavailable. Please check your connection and try again.', diff --git a/src/locales/fa-IR/pwa.ts b/src/locales/fa-IR/pwa.ts index 7c2473e1..4f9a8baa 100644 --- a/src/locales/fa-IR/pwa.ts +++ b/src/locales/fa-IR/pwa.ts @@ -9,7 +9,8 @@ export default { 'app.error.render.title': 'خطایی رخ داد', 'app.error.render.description': 'متأسفانه، در این صفحه خطایی رخ داد. لطفاً صفحه را بارگذاری مجدد کنید یا به صفحه اصلی بازگردید.', - 'app.error.retry': 'بارگذاری مجدد', + 'app.error.retry': 'تلاش مجدد', + 'app.error.reload': 'بارگذاری مجدد صفحه', 'app.error.home': 'بازگشت به صفحه اصلی', 'app.request.offline': 'شبکه در دسترس نیست. لطفاً اتصال خود را بررسی و دوباره تلاش کنید.', diff --git a/src/locales/id-ID/pwa.ts b/src/locales/id-ID/pwa.ts index 574aad56..4dbf0bf3 100644 --- a/src/locales/id-ID/pwa.ts +++ b/src/locales/id-ID/pwa.ts @@ -9,7 +9,8 @@ export default { 'app.error.render.title': 'Terjadi kesalahan', 'app.error.render.description': 'Maaf, terjadi kesalahan pada halaman ini. Muat ulang halaman atau kembali ke beranda.', - 'app.error.retry': 'Muat Ulang', + 'app.error.retry': 'Coba Lagi', + 'app.error.reload': 'Muat Ulang Halaman', 'app.error.home': 'Kembali ke Beranda', 'app.request.offline': 'Jaringan tidak tersedia. Periksa koneksi Anda dan coba lagi.', diff --git a/src/locales/ja-JP/pwa.ts b/src/locales/ja-JP/pwa.ts index 5d758bff..b683b0ac 100644 --- a/src/locales/ja-JP/pwa.ts +++ b/src/locales/ja-JP/pwa.ts @@ -9,7 +9,8 @@ export default { 'app.error.render.title': 'エラーが発生しました', 'app.error.render.description': '申し訳ありません、ページでエラーが発生しました。ページを再読み込みするか、ホームに戻ってください。', - 'app.error.retry': '再読み込み', + 'app.error.retry': '再試行', + 'app.error.reload': 'ページを再読み込み', 'app.error.home': 'ホームに戻る', 'app.request.offline': 'ネットワークに接続できません。接続を確認して再試行してください。', diff --git a/src/locales/pt-BR/pwa.ts b/src/locales/pt-BR/pwa.ts index c531c1c6..b93c100c 100644 --- a/src/locales/pt-BR/pwa.ts +++ b/src/locales/pt-BR/pwa.ts @@ -9,7 +9,8 @@ export default { 'app.error.render.title': 'Algo deu errado', 'app.error.render.description': 'Desculpe, ocorreu um erro nesta página. Atualize a página ou volte para a página inicial.', - 'app.error.retry': 'Atualizar', + 'app.error.retry': 'Tentar novamente', + 'app.error.reload': 'Atualizar página', 'app.error.home': 'Voltar ao Início', 'app.request.offline': 'Rede indisponível. Verifique sua conexão e tente novamente.', diff --git a/src/locales/zh-CN/pwa.ts b/src/locales/zh-CN/pwa.ts index 785da416..1ba7a323 100644 --- a/src/locales/zh-CN/pwa.ts +++ b/src/locales/zh-CN/pwa.ts @@ -2,12 +2,13 @@ export default { 'app.network.offline': '当前处于离线状态，部分功能可能不可用', 'app.error.chunk.title': '页面加载失败', 'app.error.chunk.description.offline': - '网络连接已断开，请检查网络后刷新页面。', - 'app.error.chunk.description.online': '页面资源加载失败，请刷新页面重试。', + '网络连接已断开，请检查网络后重新加载。', + 'app.error.chunk.description.online': '页面资源加载失败，请重新加载重试。', 'app.error.render.title': '页面出现错误', 'app.error.render.description': '抱歉，页面遇到了一些问题，请刷新页面或返回首页。', - 'app.error.retry': '刷新页面', + 'app.error.retry': '重新加载', + 'app.error.reload': '刷新页面', 'app.error.home': '返回首页', 'app.request.offline': '网络不可用，请检查网络连接后重试。', }; diff --git a/src/locales/zh-TW/pwa.ts b/src/locales/zh-TW/pwa.ts index a4265ea5..ce1296d0 100644 --- a/src/locales/zh-TW/pwa.ts +++ b/src/locales/zh-TW/pwa.ts @@ -8,7 +8,8 @@ export default { 'app.error.render.title': '頁面出現錯誤', 'app.error.render.description': '抱歉，頁面遇到了一些問題，請重新整理頁面或返回首頁。', - 'app.error.retry': '重新整理', + 'app.error.retry': '重試', + 'app.error.reload': '重新整理頁面', 'app.error.home': '返回首頁', 'app.request.offline': '網路不可用，請檢查網路連線後重試。', };