2023-10-20
技术小刊
00

目录

原因分析
解决方案
方案优化

原因分析

通常vue在发版之后,由于局部文件的改动,对应组件的编译文件后缀会发生变更。
在不强制刷新客户端使用的浏览器的场景下,点击涉及到的组件模块内容,会发生文件路径不存在,发生点击无响应的情况

类似以下报错
Failed to fetch dor.83aa61 dynamically imported module

解决方案

监测分析错误场景

  1. 可以使用window对象上的unhandledrejection事件来监听未处理的Promise拒绝,从而捕获这个类型错误。

  2. 可以在事件处理函数中检查错误对象的message属性来确定这个特定异常。

js
window.addEventListener("unhandledrejection", function(event) { if(event.reason instanceof TypeError && event.reason.message.startsWith("Failed to fetch")) { // 在这里处理TypeError: Failed to fetch dor.83aa61 错误 console.error("捕获到 TypeError: Failed to fetch dor.83aa61 错误:", event.reason); } });

因此,在捕获之后进行重新强制加载相关资源即可

强制重新加载需要入参true

js
window.location.reload(true)

方案优化

通常一个稳定项目发版的情况大概率存在于一个周期一次。在设定强制加载的时候,可以判断一天内是否已经执行,来判别是否继续强制加载,以避免出现异常加载的问题

js
window.addEventListener("unhandledrejection", function(event) { if(event.reason instanceof TypeError && event.reason.message.startsWith("Failed to fetch")) { // 在这里处理TypeError: Failed to fetch dor.83aa61 错误 console.error("捕获到 TypeError: Failed to fetch dor.83aa61 错误:", event.reason); var today = new Date().toISOString().split('T')[0]; if (localStorage.isDayOneAjaxError) { if (localStorage.isDayOneAjaxError === ('task_executed_' + today)) { console.log('今日已执行, 忽略') } else { localStorage.isDayOneAjaxError = ('task_executed_' + today) window.location.reload(true) } } else { // 强制从服务器重新加载页面 localStorage.isDayOneAjaxError = ('task_executed_' + today) window.location.reload(true) } } });
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:seek

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!