编程技术文章分享与教程

网站首页 > 技术文章 正文

前端项目线上出现紧急的bug怎么处理(抓紧收藏，能保命)

hmc789 2024-11-23 16:22:19 技术文章 2 ℃

前言

前端开发过程中总会遇到的重大bug情况，这是我这些年总结的希望对大家有所帮助，啊不对是一定要收藏这太关键了，关键时刻能保命

背景

在项目上线后出现严重的 bug,我们需要第一时间利用线上的环境,复现 bug,并且定位 bug的代码,在修复 bug后,做打包上线操作,并且最好尽快控制或者通知所有客户端更新程序

关键步骤

1.定位 bug

部署上线的代码,通常都是打包之后的代码,都是经过压缩处理过的,这样的代码如何进行调试定位 bug?通常有 2 种方式

  • 第 1 种,通过 source map 还原线上压缩之后的代码
  • 第 2 种,用本地的跟线上同版本的代码代理到线上的接口地址

方式 1-通过 source map

在vue-cli创建的项目当中,通过npm run build生成的文件夹dist当中,有一类文件以.map结尾,例如图

疑问-什么是 source map?

简而言之,Source map 就是一个信息文件，里面储存着压缩文件位置信息。也就是说，压缩的代码的每一个位置，所对应的压缩前的位置,具体的内容可以查看JavaScript Source Map 详解这篇文章

测试-通过source map调试代码

示例代码仓库

链接

步骤

  • 步骤 1-执行程序
  • 在仓库文件夹04_部署项目toutiao-m-server里面执行命令node app
  • 步骤 2-通过chrome浏览器,打断点调试代码

存在的问题

这种方式调试代码不推荐,因为通过打断点,在chrome浏览器中点击下一步,代码会莫名其妙跳转到不该去的地方,让调试无法正常进行

方式 2-通过服务器代理

可通过跟线上版本一样的开发环境的代码,通过服务器代理的方式,访问线上的接口的方式来定义出错的代码,这里需要多vue.config.js进行配置,例子:

module.exports = {
  devServer: {
    proxy: {
      // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
      '/api': {
        target: 'http://api-toutiao-web.itheima.net/app/', // 跨域请求线上的地址
        changeOrigin: true // 只有这个值为true的情况下 才表示开启跨域
      }
    }
  }
}

2.更新程序

定位到bug之后,除了修改完和打包好代码,并把代码部署线上,最好能主动通知客户端页面,刷新页面,这样能及时的堵上程序的漏洞,防止给公司带来损失

为了实现这种业务场景,需要在代码实现后端主动通知前端页面做刷新处理,具体的方式如下:

方式1-通过 websocket 刷新客户端

websocket是h5中新增的对象,它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应,具体的内容可以查看mdn上websocket的介绍

示例代码仓库

链接

前端客户端代码

在dist/index.html中,显示内容和通过websocket连接到服务端

// 创建对象和连接到服务器
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()
	}
}

前端管理端代码

在dist/admin.html中,点击按钮发送请求给服务器端,刷新所用在线客户端的页面

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>

<body>
    <button id="btn">刷新所有客户端</button>
</body>
<script>
    document.querySelector('#btn').onclick = function () {
        // 发请求,刷新所有客户端
        axios.get('http://localhost:3000/reload')
    }
</script>

服务器端代码

app.js 后端程序代码,负责部署前端程序和提供websocket的服务器端的支持

var express = require('express');
var path = require('path');
var app = express();
var expressWs = require('express-ws')(app);
// 指定静态文件托管
app.use(express.static(path.join(__dirname, './dist')))
// 对http协议请求做处理
// 处理刷新请求
app.get('/reload', function(req, res, next){
    // 得到所有的客户端
    let clients = expressWs.getWss().clients
    clients.forEach(t=>{
        let msg = JSON.stringify({reload: true})
        // 通知所有的客户端刷新页面
        t.send(msg)
    })
    res.send({status: 200, message: '刷新成功'});
});
// 对ws协议请求做处理
app.ws('/', function(ws, req) {
  ws.on('message', function(msg) {
    console.log('接收到客户端的消息', msg)
  });
  console.log('连接到客户端');
});

app.listen(3000);

方式2-通过socket.io刷新客户端

socket.io是第三方包对websocket的封装,方便websocket的使用,更多的内容查看socket.io的官网

示例代码仓库

连接

前端客户端代码

在dist/index.html中,显示内容和通过socket.io连接到服务端

<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.4.0/socket.io.min.js"></script>
<script>
    // 创建对象和连接到服务器
    const socket = io("ws://localhost:3000");
    socket.on("connect", () => {
        console.log('连接到服务器')
    });
    // 服务器通知客户端刷新页面
    socket.on("message", data => {
        console.log('接收到服务器的消息', event.data);
        if (data.reload) {
            // 刷新页面
            location.reload()
        }
    });
</script>

前端管理端代码

在dist/admin.html中,点击按钮发送请求给服务器端,刷新所用在线客户端的页面

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>

<body>
    <button id="btn">刷新所有客户端</button>
</body>
<script>
    document.querySelector('#btn').onclick = function () {
        // 发请求,刷新所有客户端
        axios.get('http://localhost:3000/reload')
    }
</script>

服务器端代码

app.js 后端程序代码,负责部署前端程序和提供websocket的服务器端的支持

var express = require("express");
var path = require('path')
var { createServer } = require("http");
var { Server } = require("socket.io");

var app = express();
var httpServer = createServer(app);
var io = new Server(httpServer, {
    // 跨域的配置
    cors: {
        origin: "*",
        methods: ["GET", "POST"]
    }
});
// 指定静态文件托管
app.use(express.static(path.join(__dirname, './dist')))
// 对http协议请求做处理
// 处理刷新请求
app.get('/reload', function(req, res, next){
    // 通知所有的客户端刷新页面
    io.emit('message', {reload: true});
    res.send({status: 200, message: '刷新成功'});
});
// 对ws协议请求做处理
io.on("connection", (socket) => {
    socket.on('message', function(msg) {
        console.log('接收到客户端的消息', msg)
    });
    console.log('连接到客户端');
});
// 监听3000端口,运行程序
httpServer.listen(3000);


Tags：

猜你喜欢

标签列表
最新留言