这是我参与「第五届青训营」笔记创作活动的第二十四天
静态资源错误监控
-
监听我们静态资源错误和监听JS错误是用同一套方案进行监听的,所以两种错误要注意进行区分
-
注意这里是如何区分
静态资源错误和js error的 -
前端监控很关注的一点的是兼容性,所以这里
e.srcElement虽然已经是deprecated,但为了支持老浏览器,所以也把它写上了 -
静态资源只能在捕获阶段对它进行一个捕获,所以我们需要把
addEventListener的第二个参数置为true,默认为false,为冒泡阶段捕获
请求异常监控
-
前置知识: hook函数(钩子函数) => 我们往一段程序里注入我们自己的逻辑,也就是给它挂个钩子,用hook的原因是我们想在它原有的逻辑上去注入我们自己的逻辑,去实现监听、注入等能力,所以注入是很常见的 (做逆向分析的同学可能会很熟悉)
-
这里hook函数的三个参数解释 :第一个参数 => 想要hook的对象; 第二个参数 => 想要hook的对象的参数; 第三个参数 => 我们想要注入的自己的逻辑
-
注入的时候需要考虑清除,是否需要破坏原有的逻辑
渐入佳境:封装一个通用的SDK
目前我们编写的monitor是相互孤立的,monitor之间没有任何的联系,不能串成什么东西,我们现在想要它们产生联系,想要它们产生一个统一的管控,那我们就需要一个统一的容器,统一的载体,所以我们需要封装一个通用的SDK
前端监控流程概述
临门一脚:数据上报
按需加载监控能力
- 这里我们是使用函数式的方式来创建SDK,当然有些同学比较喜欢使用Class的方式来实现,是更接近OOP的一个思想,但是由于JS原生并不支持OOP,是通过原型链的方式实现的,在我们打包成代码的时候,会有一些为了实现Class这个关键字而作的一些
Polyfill,为了减少我们SDK的体积,在我们实践过程中不会用Class,而是会用fn函数式的思想来封装SDK,会使我们SDK的体积更加精简
课后探索:怎么让你的SDK更加健壮
-
用户行为监控对我们复现一个异常复现的发生一个过程也是非常重要的,也是不可缺少的一环
-
清洗存储 => 一般是大数据相关的知识
-
数据消费 => 一般是接口写的多一点