一、为什么要行为监控

用异常监控,我们已经能定位到错误了,那么为什么我们还要进行行为收集呢?来看下面截图
前端监控之行为监控 - 图1
通过上面截图,我们可以清晰的认识到 ‘nick’ of undefined 这个错误发生的链路。先从浏览器发送请求行为,再到用户点击行为,再到控制台打印行为,最后到这个错误的展示。我们可以完整复现一个错误的由来。这就是我们为什么要进行!

二、行为收集的分类

我们简单将行为分类为:用户行为、浏览器行为、控制台打印行为。
前端监控之行为监控 - 图2

1. 用户行为采集

使用 addEventListener 全局监听点击事件,将用户行为(click、input)和 dom 元素名字收集。当错误发生将错误和行为一起上报。

.2. 浏览器行为采集

发起请求

监听 XMLHttpRequest 对象的 onreadystatechange 回调函数,在回调函数执行时收集数据。
不管使用的 axios 还是 fetch,底层其实都是走得 XMLHttpRequest,所以不同担心你使用的请求行为捕捉不到。

页面跳转

监听 window.onpopstate,页面跳转的时会触发此方法,将信息收集。
另外,由于 history.pushState、history.replaceState 不会触发 onpopState,需要重写这两个方法。

3. 控制台打印行为

改写 console 对象的 log、info、warn、error 方法,在 console 执行时将信息收集

参考资料

《来,跟我一起 ,自研多端错误监控平台(完整版)》