百度360必应搜狗淘宝本站头条
mybatis 使用python中+=代表什么java中switch盒子垂直居中httpservletrequest 获取参数
当前位置：网站首页 > 技术文章 > 正文

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

wxin55 2024-10-25 18:07 18 浏览 0 评论

前言

前端开发过程中总会遇到的重大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);


相关推荐

ES6中 Promise的使用场景?（es6promise用法例子）

一、介绍Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码doSomething(f...

JavaScript 对 Promise 并发的处理方法

Promise对象代表一个未来的值，它有三种状态：pending待定，这是Promise的初始状态，它可能成功，也可能失败，前途未卜fulfilled已完成，这是一种成功的状态，此时可以获取...

Promise的九大方法（promise的实例方法）

1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...

360前端一面~面试题解析（360前端开发面试题）

1.组件库按需加载怎么做的，具体打包配了什么-按需加载实现：借助打包工具（如Webpack的require.context或ES模块动态导入），在使用组件时才引入对应的代码。例如在V...

前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?

Promise的finally方法是一个非常有用的工具，它无论Promise是成功（fulfilled）还是失败（rejected）都会执行，且不改变Promise的最终结果。它的实现原...

最简单手写Promise，30行代码理解Promise核心原理和发布订阅模式

看了全网手写Promise的，大部分对于新手还是比较难理解的，其中几个比较难的点：状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态，这个叫Re...

前端分享-Promise可以中途取消啦（promise可以取消吗）

传统Promise就像一台需要手动组装的设备，每次使用都要重新接线。而Promise.withResolvers的出现，相当于给开发者发了一个智能遥控器，可以随时随地控制异步操作。它解决了三大...

手写 Promise（手写输入法 中文）

前言都2020年了，Promise大家肯定都在用了，但是估计很多人对其原理还是一知半解，今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...

什么是 Promise.allSettled()!新手老手都要会?

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的pr...

前端面试-关于Promise解析与高频面试题示范

Promise是啥，直接上图：Promise就是处理异步函数的API，它可以包裹一个异步函数，在异步函数完成时抛出完成状态，让代码结束远古时无限回掉的窘境。配合async/await语法糖，可...

宇宙厂:为什么前端离不开 Promise.withResolvers() ?

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...

Promise 新增了一个超实用的 API!

在JavaScript的世界里，Promise一直是处理异步操作的神器。而现在，随着ES2025的发布，Promise又迎来了一个超实用的新成员——Promise.try()！这个新方法简...

一次搞懂 Promise 异步处理（promise 异步顺序执行）

PromisePromise就像这个词的表面意识一样，表示一种承诺、许诺，会在后面给出一个结果，成功或者失败。现在已经成为了主流的异步编程的操作方式，写进了标准里面。状态Promise有且仅有...

Promise 核心机制详解（promise机制的实现原理）

一、Promise的核心状态机Promise本质上是一个状态机，其行为由内部状态严格管控。每个Promise实例在创建时处于Pending（等待）状态，此时异步操作尚未完成。当异步操作成功...

javascript——Promise（js实现promise）

1.PromiseES6开始支持，Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果值的表示。简单说就是处理异步请求的。之所以叫Promise，就是我承诺，如果成功则怎么处理，失败怎...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表