为什么需要监控你进入了一家公司开发了一个电商平台。随着公司越做越大用户越来越多用户遇到bug投诉的也越来越多。但是愿意bug上报的是少数大部分遇到bug都懒得报当有人打电话给你们投诉时意味着更多人已经碰到过这个bug。你想解决这些bug但是你又没办法知道用户咋操作的。你自己操作又操作不出来你就想啊如果我能有办法还原用户当时是怎么操作的就就好了JS回放技术js回放技术就是把用户的操作路径展示出来。我们可以像看视频一样回放用户的操作路径这里我们借用到一个核心的第三方库--rrwebBug监控系统系统设计bug上报核心库记录用户操作: 程序初始化完成后开始录制(监控页面变化和用户事件触发), 然后记录数据到数组触发日志上报: 当用户操作异常(JS报错)或者请求异常(axios报错), 把错误信息和用户操作进行上报bug回放页面结构:核心库核心逻辑先获取日志列表, 点击[回放]按钮后, 执行具体的回放日志服务提供接口 (日志列表/日志详情/日志上报)数据结构events: 记录用用户操作error: 记录具体错误信息type: 3 (鼠标移动) positions: 移动位置简单原理原理核心思想很简单把页面上状态都变成json数据然后拿着这个json数据再去转化为页面体系完善rrweb的问题在于我们只是记录了用户的界面操作我们无法监控到具体出了啥问题因为他无法录制js里的代码。我们还要建立起一个日志上报体系。用来记录用户的操作路径。示例:2025-12-12 12:00:00 张三登录2025-12-12 12:01:00 张三访问购物车2025-12-12 12:03:00 张三支付2025-12-12 12:04:00 张三支付失败, 失败原因: xxxx线上监控体系用户回放操作日志就可以组成一个比较完整的线上监控体系, 帮助程序员快速定位问题操作日志可以快速查看用户的关键操作, 定位问题范围和bug优先级用户操作回放和报错信息可以具体的查看问题, 定位问题原因