隔离!无聊周末的技术写文

370 阅读4分钟

前言

疫情期间在家快把人憋坏了!花个周末的时间写了一个集成性能监控和埋点的sdk功能。现在市面上已有很多的开源监控平台或是收费的监控平台,都是值得借鉴学习的。

如何设计sdk

首先,这个sdk可以用来做什么事情,它的价值在哪里?

  • 前端项目的错误信息收集
  • 前端项目的性能信息 & 用户设备 & 网络状态
  • 用来分析用户行为
  • 根据埋点分析业务信息 等等...

再则,SDK技术栈是使用rollup打包构建和typescript语法。

其实现SDK架构设计是通过订阅发布的思想:

image.png

初始化SDK时订阅事件,通过重写原生事件的方式来触发不同的事件,然后订阅中心负责调度不同的事件处理机制。这样设计的好处在于可以在调度中心处理不同的情况以便快速迭代,或者想添加一些hook之类。

聊聊实现各个监控部分

  • 错误信息通过监听errorunhandlerejection事件
  • 性能通过PerformanceObserver观察监测
  • 通过监听事件实现操作dom的监控
  • 重写路由hash或者history
    • hash路由通过重写hashChange事件
    • history路由通过重写onpopstate事件、pushStatereplaceState方法以及重写点击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

NameTypeDefaultDescription
dsnstring""(需要来个默认地址)dsn服务地址,上报接口的地址,post方法
disabledbooleantrue默认是开启状态,为true时,会将sdk禁用
apikeystring""每个项目对应一个apikey,用于存放错误集的唯一标识
silentXhrbooleanfalse默认会监控xhr,为true时,将不再监控
silentFetchbooleanfalse默认会监控fetch,为true时,将不再监控
silentDombooleanfalse默认会监听click事件,当用户点击的标签不是body时就会被放入breadcrumb,为true,将不在监听
silentHistorybooleanfalse默认会监控popstate、pushState、replaceState,为true时,将不再监控
silentErrorbooleanfalse默认会监控error,为true时,将不在监控
silentUnhandledrejectionbooleanfalse默认会监控unhandledrejection,为true时,将不在监控
silentHashchangebooleanfalse默认会监控hashchange,为true时,将不在监控

聊聊后续做什么:

SDK todo:

  • 集成vue2.6的两个报错函数
  • 集成PV数据上报
  • 集成SDK迭代版本号,以便后续监控平台的设计(比如根据SDK版本号去过滤数据之类)
  • 集成自定义业务信息上报

其他 可todo:

image.png

还有一点值得提的是:B端系统到后面还可支持集成自动埋点这样的能力,这样子SDK上报数据的方式也需要去支持。

代码已上传github,也可根据公司的需求进行二次开发。代码结构设计很清晰,侵入式修改代码也很方便,可供参考:monitor-sdk.me

前段时间花周末的时间,利用koa搭建自己的博客,系统搭建的心得和数据库表设计之类的想法,有时间再分享吧!

最后

此文写的比较粗糙,如有新的想法,一起学习交流。

最后,期待我们早日拥有自由的灵魂! 但愿,疫情早日结束,大家加油!