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

MonnieHuang
389 阅读4分钟

前言

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

如何设计sdk

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

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

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

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

image.png

初始化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

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搭建自己的博客，系统搭建的心得和数据库表设计之类的想法，有时间再分享吧！

最后

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

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

avatar
文章
阅读
粉丝