为什么需要监控
你进入了一家公司，开发了一个电商平台。
随着公司越做越大，用户越来越多，用户遇到bug投诉的也越来越多。
但是愿意bug上报的是少数，大部分遇到bug都懒得报，当有人打电话给你们投诉时，意味着更多人已经碰到过这个bug。
你想解决这些bug，但是你又没办法知道用户咋操作的。你自己操作又操作不出来
你就想啊，如果我能有办法还原用户当时是怎么操作的就就好了
JS回放技术
js回放技术就是把用户的操作路径展示出来。我们可以像看视频一样，回放用户的操作路径
这里我们借用到一个核心的第三方库--rrweb
Bug监控系统
系统设计
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优先级
- 用户操作回放和报错信息可以具体的查看问题, 定位问题原因