前端报错如何在服务器中显示,详解Vue项目中出现Loading chunk {n} failed问题的解决方法...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug。在github、stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论:Loading chunk {n} failed #742,虽然最后还是不了了之,但是大家可以参考一下。
这个问题出现概率比较小但是一旦出现就会导致页面崩溃,所以还是得解决,下面就贴出我的解决方案:
我的思路是既然找不到报错的原因那么尝试去捕获这个错误并做容错处理,有两种实现,一是在服务端捕获这个错误,一个是在前端捕获。
服务端实现
报错的原因是某些js bundle没有被找到,所以在服务端接收到获取该js文件的请求时先判断该js文件是否存在,如果存在直接返回js文件,如果不存在则返回一个提示信息给前端,让前端处理。假设服务端用express作为静态文件服务器,代码如下:
app.all(/\.js$/, (req, res) => {
const fileName = req.path.slice(req.path.lastIndexOf('/') + 1);
const filePath = path.resolve(__dirname, './public/static/js/' + fileName);
if (fs.existsSync(filePath)) {
fs.sendFile(filePath);
} else {
res.setHeader('Content-Type', 'application/javascript; charset=UTF-8')
res.setHeader('Accept-Ranges', 'bytes')
res.setHeader('Vary', 'Accept-Encoding')
res.setHeader('Transfer-Encoding', 'chunked')
res.setHeader('Last-Modified', new Date().toUTCString())
res.setHeader('Cache-Control', 'no-cache')
res.send('window.serverRebuildHook && window.serverRebuildHook();')
}
});
当js文件未找到时,通过res.send('window.serverRebuildHook && window.serverRebuildHook();')向前端返回一条消息,并执行前端定义的serverRebuildHook方法。
接着我们在前端实现serverRebuildHook方法:
window.serverRebuildHook = function () {
alert('服务器版本已更新,正在刷新本地缓存,请稍后...');
location.replace(location.href);
}
方法很简单,提示一下用户服务端更新然后重新刷新当前页面。
这种实现是参考github上的回答, 相对比较繁琐,而且用户体验并不好,只能刷新当前页面,不能跳转到目标页。
前端实现
由于项目里面用到了vue-router,vue-router的错误处理函数 onError是不是能够捕获该错误呢?我们来看一下官方文档的说明:
当在渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。 完全符合我们场景,所以在onError方法中我们实现如下代码:
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if (isChunkLoadFailed) {
router.replace(targetPath);
}
});
当捕获到Loading chunk {n} failed的错误时我们重新渲染目标页面,这种实现明显更简单和友好。
后续如果发现了导致Loading chunk {n} failed的本质原因会再更新本文,欢迎关注!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
前端报错如何在服务器中显示,详解Vue项目中出现Loading chunk {n} failed问题的解决方法...相关推荐
- C#操作FTP报错,远程服务器返回错误:(550)文件不可用(例如,未找到文件,无法访问文件)的解决方法
C#操作FTP报错,远程服务器返回错误:(550)文件不可用(例如,未找到文件,无法访问文件)的解决方法 参考文章: (1)C#操作FTP报错,远程服务器返回错误:(550)文件不可用(例如,未找到文 ...
- Vue项目中出现Loading chunk {n} failed问题的解决方法
由于项目里面用到了vue-router,vue-router的错误处理函数 onError 是不是能够捕获该错误呢?我们来看一下官方文档的说明: 当在渲染一个路由的过程中,需要尝试解析一个异步组件时发 ...
- vant部署_详解VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示 ...
- vue输入框输入触发事件_详解.vue文件中监听input输入事件(oninput)
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
- java调用项目中的文件_详解eclipse项目中.classpath文件的使用
1 前言 在使用eclipse或者myeclipse进行java项目开发的时候,每个project(工程)下面都会有一个.classpath文件,那么这个文件究竟有什么作用? 2 作用 .classp ...
- 前端实际开发中常见坑(vue项目中各种运行编译报错)
1.当拉取一个项目下来,npm install报错. 可能原因:npm install的路径不对,切记要检查好是在拉取的项目下安装依赖,而不是在自己新建的项目下(也就是真正仓库项目的上级)进行操作. ...
- python3中urlopen_详解python3 urllib中urlopen报错的解决方法
这篇文章主要介绍了关于解决python3 urllib中urlopen报错问题的相关资料,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧. 前言 最近更新了Python ...
- mysql 创建游标报错,MySQL游标概念与用法详解
本文实例讲述了mysql游标概念与用法.分享给大家供大家参考,具体如下: 1.游标的概念(cursor) 一条sql,对应n条资源,取出资源的接口,就是游标,沿着游标,可以一次取出1行.如果开发过安卓 ...
- manjaro软件源报错 不停看到错误 “PackageName: signature from “User <email@archlinux.org>“ is invalid“ 的几种解决方法
manjaro软件源报错 不停看到错误 "PackageName: signature from "User " is invalid" 的几种解决方法 参考文 ...
最新文章
- 静态链接和动态链接优缺点
- 阿里巴巴大数据之路——数据模型篇
- Java读写大文本文件(2GB以上)
- 从数据库表中随机获取N条记录的SQL语句
- MySQL_管理与维护
- 怎么给没链接的flash加超链接
- Adobe全系软件下载安装工具 CCMaker 1.3.6
- 【渝粤题库】陕西师范大学292111 社会学概论 作业
- 真人节目《通灵之战》的观后感
- 10行代码带你入门Windows编程
- 西南科技大学OJ题 A+B Problem 1156
- ExpandableListView说明及其用法
- java ppt转图片 失真_Apache POI将PPT转换成图片实例代码
- Simon游戏代码(C语言)
- 建立两个磁盘文件f1.text和f2.text,编程实现以下工作
- html给用户自定义页面,个人门户增加自定义html模块(重要!)
- 【硬件通信协议】4. 详细解析CAN总线通信协议
- [CTFSHOW]中期测评WP(差512和514)
- 具有检查点的恢复技术
- 插件中的chalk的用法