在项目上线后出现严重的 bug,我们需要第一时间利用线上的环境,复现 bug,并且定位 bug的代码,在修复 bug后,做打包上线操作,并且最好尽快控制或者通知所有客户端更新程序
代码层面解决方式
解决步骤
定位bug
- 第一种：通过source map还原线上压缩之后的代码（不推荐）【通过打断点，浏览器点击下一步，代码会跳到其他地方，不方便正常运行】
- 第二种：用本地的跟线上同版本的代码代理线上的接口地址
【通过服务器代理】
module.exports = {
devServer: {
proxy: {
// 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
'/api': {
target: 'http://api-toutiao-web.itheima.net/app/', // 跨域请求线上的地址
changeOrigin: true // 只有这个值为true的情况下 才表示开启跨域
}
}
}
}
- 第三种：sentry系统，可以追踪bug信息 sentry.io/
解决问题后，重新部署，更新程序
- 第一种：通过websocket刷新客户端（
需要后端配合） 原理：前端部署后向服务器发送一个状态变更通知，服务器接收后主动向前端push，前端通过心跳检测，接收到相关更新时弹出提示，让用户确认更新。
// 创建对象和连接到服务器
const socket = new WebSocket('ws://localhost:3000')
socket.onopen = function (event) {
console.log('连接到服务器')
}
// 服务器通知客户端刷新页面
socket.onmessage = function (event) {
console.log('接收到服务器的消息', event.data);
let data = JSON.parse(event.data)
if (data.reload) {
// 刷新页面
location.reload()
}
}
- 第二种：通过socket.io刷新客户端
- 第三种：存前端方案juejin.cn/post/720774…
- build时，node生成一个文件如_version.js
- 将_version.js写入到最终打包生成的index.html文件中
- 本地可以在入口文件main.js中通过window.version读取本地的版本时间戳，定时器轮询获取远程的j s文件中的version，比较，不同，则更新
gitlab分支的处理方式
使用分支stash临时切换的方式
- 先将dev开发分支上的进度提交到本地仓库：git add . / git commit -m '新功能'
- git stash 暂时提取分支上所有的改动并存储
- git checkout 临时转向其他分支工作
- 基于有bug的master分支的基础上，新建一个bug分支，修复完成后，合并到master分支，再将bug分支删除
- 切换回dev开发分支，git stash pop 将剪切板上保存的改动恢复回来，继续开发
