fix(前端路由): 添加 chunk 加载错误自动恢复机制

- 检测动态导入模块加载失败错误
- 自动刷新页面获取最新资源
- 使用 sessionStorage 防止无限刷新循环(10秒冷却)
- 解决前端重新部署后用户缓存导致的加载失败问题

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
yangjianbo
2026-01-16 16:20:10 +08:00
parent aeb987ceb1
commit c659788022

View File

@@ -400,9 +400,33 @@ router.beforeEach((to, _from, next) => {
/**
* Navigation guard: Error handling
* Handles dynamic import failures caused by deployment updates
*/
router.onError((error) => {
console.error('Router error:', error)
// Check if this is a dynamic import failure (chunk loading error)
const isChunkLoadError =
error.message?.includes('Failed to fetch dynamically imported module') ||
error.message?.includes('Loading chunk') ||
error.message?.includes('Loading CSS chunk') ||
error.name === 'ChunkLoadError'
if (isChunkLoadError) {
// Avoid infinite reload loop by checking sessionStorage
const reloadKey = 'chunk_reload_attempted'
const lastReload = sessionStorage.getItem(reloadKey)
const now = Date.now()
// Allow reload if never attempted or more than 10 seconds ago
if (!lastReload || now - parseInt(lastReload) > 10000) {
sessionStorage.setItem(reloadKey, now.toString())
console.warn('Chunk load error detected, reloading page to fetch latest version...')
window.location.reload()
} else {
console.error('Chunk load error persists after reload. Please clear browser cache.')
}
}
})
export default router