fix(前端路由): 添加 chunk 加载错误自动恢复机制
- 检测动态导入模块加载失败错误 - 自动刷新页面获取最新资源 - 使用 sessionStorage 防止无限刷新循环(10秒冷却) - 解决前端重新部署后用户缓存导致的加载失败问题 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -400,9 +400,33 @@ router.beforeEach((to, _from, next) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Navigation guard: Error handling
|
* Navigation guard: Error handling
|
||||||
|
* Handles dynamic import failures caused by deployment updates
|
||||||
*/
|
*/
|
||||||
router.onError((error) => {
|
router.onError((error) => {
|
||||||
console.error('Router error:', 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
|
export default router
|
||||||
|
|||||||
Reference in New Issue
Block a user