前言
疫情期间在家快把人憋坏了!花个周末的时间写了一个集成性能监控和埋点的sdk功能。现在市面上已有很多的开源监控平台或是收费的监控平台,都是值得借鉴学习的。
如何设计sdk
首先,这个sdk可以用来做什么事情,它的价值在哪里?
- 前端项目的错误信息收集
- 前端项目的性能信息 & 用户设备 & 网络状态
- 用来分析用户行为
- 根据埋点分析业务信息 等等...
再则,SDK技术栈是使用rollup
打包构建和typescript
语法。
其实现SDK架构设计是通过订阅发布的思想:
初始化SDK时订阅事件,通过重写原生事件的方式来触发不同的事件,然后订阅中心负责调度不同的事件处理机制。这样设计的好处在于可以在调度中心处理不同的情况以便快速迭代,或者想添加一些hook
之类。
聊聊实现各个监控部分
- 错误信息通过监听
error
和unhandlerejection
事件 - 性能通过
PerformanceObserver
观察监测 - 通过监听事件实现操作dom的监控
- 重写路由
hash
或者history
hash
路由通过重写hashChange
事件history
路由通过重写onpopstate
事件、pushState
和replaceState
方法以及重写点击a标签事件。
来细聊一下如何实现通用的重写函数
const replaceFn = (source:{[key:string]:any},name:string,cb:(...args:any[])=>any)=>{
if (!(name in source)) return;
const original = source[name];
const wapper = cb(original);
if (typeof wapper === 'function') {
source[name] = wapper;
}
}
除了以上的监控,SDK也实现自定义埋点数据上报。
如何上报数据
上报数据的方式总结下来有三种:
-
Image的形式发送请求
- 没有跨域问题、发GET请求不需要处理和获取数据、服务器也不需要发送数据、不会携带当前域名cookie,不会阻塞页面加载,影响用户的体验,只需要new Image对象、相比BPM/PNG体积最小可以节约网络资源。
-
xhr上报数据
- 通过xhr上报,如果是异步,当用户跳转页面或者关闭页面时就会丢失当前请求,设置同步则会造成卡顿。
-
Navigator.sendBeacon
发送数据- 异步请求并且是POST请求,发出来的请求是放到浏览器任务队列执行的,只能判断是否放入浏览器队列,不会判断是否发送成功。不会阻塞当前页的卸载和后面页面的加载,用户体验好。兼容性不是很友好。
都有各自的优缺点,我使用第二种方式,并且实现放进队列做缓存的方式上报数据。
如何使用
引入SDk,实例化对象,即可使用。SDK的默认配置是开启所以的监控功能,当你想静默个别功能,可将配置设置为true
,也支持配置xhr和一些hook。
options
Name | Type | Default | Description |
---|---|---|---|
dsn | string | "" (需要来个默认地址) | dsn服务地址,上报接口的地址,post方法 |
disabled | boolean | true | 默认是开启状态,为true时,会将sdk禁用 |
apikey | string | "" | 每个项目对应一个apikey,用于存放错误集的唯一标识 |
silentXhr | boolean | false | 默认会监控xhr,为true时,将不再监控 |
silentFetch | boolean | false | 默认会监控fetch,为true时,将不再监控 |
silentDom | boolean | false | 默认会监听click事件,当用户点击的标签不是body时就会被放入breadcrumb,为true,将不在监听 |
silentHistory | boolean | false | 默认会监控popstate、pushState、replaceState,为true时,将不再监控 |
silentError | boolean | false | 默认会监控error,为true时,将不在监控 |
silentUnhandledrejection | boolean | false | 默认会监控unhandledrejection,为true时,将不在监控 |
silentHashchange | boolean | false | 默认会监控hashchange,为true时,将不在监控 |
聊聊后续做什么:
SDK todo:
- 集成
vue2.6
的两个报错函数 - 集成PV数据上报
- 集成SDK迭代版本号,以便后续监控平台的设计(比如根据SDK版本号去过滤数据之类)
- 集成自定义业务信息上报
其他 可todo:
还有一点值得提的是:B端系统到后面还可支持集成自动埋点这样的能力,这样子SDK上报数据的方式也需要去支持。
代码已上传github,也可根据公司的需求进行二次开发。代码结构设计很清晰,侵入式修改代码也很方便,可供参考:monitor-sdk.me
前段时间花周末的时间,利用koa
搭建自己的博客,系统搭建的心得和数据库表设计之类的想法,有时间再分享吧!
最后
此文写的比较粗糙,如有新的想法,一起学习交流。
最后,期待我们早日拥有自由的灵魂! 但愿,疫情早日结束,大家加油!