这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

三、客户端SDK（探针）相关原理和API

所谓探针，是因为我们的 SDK 要依托于监控的前端项目的运行环境，在其运行环境的底层 API 中加入探针函数来收集信息，下面分享 WEB 和微信小程序 SDK 实现的主要原理和使用的 API 。

3.1 web

3.1.1 Performance

通过 performance.timing 可以拿到页面首次加载的性能数据， dns 、 tcp 、白屏时间等，而在最新的标准中 performance.timing 已经被废弃，因此我们也改造为使用 performance.getEntriesByType('navigation') 。这里的白屏时间可能和实际真正的用户感官的白屏时间是有差异的，仅供参考。

通过 new PerformanceObserver 监听器，我们可以监听所有资源（ css , script , img , ajax 等）加载的性能数据：加载时间，响应大小， http 协议版本（ http1.1 / http2 ）等。而后我们需要通过一个数组去管理资源性能数据，在完成数据上报后，清空数组。

3.1.2 fetch/xmlHttpRequest

由于浏览器并没有提供一个统一的 API 使我们能够收集到 ajax 请求和响应数据，并且不管我们是用 axois 还是使用其他的 http 请求库，他们都是基于 fetch 和 xmlHttpRequest 实现的。

因此只能通过重写 fetch 和 xmlHttpRequest ，并在对应的函数和逻辑中插入自定义代码，来达到收集的目的。

3.1.3 window.onerror | unhandledrejection | console.error | 以及框架自带的监听函数

最后这几个API都是收集js相关错误信息的。需要注意两个问题：

一是 onerror 会获取不到跨域的 script 错误，解决方案也很简单：为跨域的 script 标签设置 crossorigin 属性，并且需要静态服务器为当前资源设置 CORS 响应头。

二是代码压缩后的报错信息需要通过 sourceMap 文件解析出源代码对应的行列和错误信息， sourceMap 本身是一种数据结构，存储了源代码和压缩代码的关系数据，通过解析库能够很轻松转换它们。

但如何自动化管理和操作 sourceMap 文件才是前端监控系统核心需要解决的问题。这里就需要结合企业内部的静态资源发布系统和前端监控系统，来解决低效率的手动打包上传问题。

3.2 微信小程序

微信小程序底层使用 js 实现，有着它自己的一套生命周期，也提供了全局的 API 。通过重写它的部分全局函数和相关 API 我们能获取到：网络请求、错误信息、设备和版本信息等。由于微信小程序的加载流程是由微信 APP 控制的， js 等资源也被微信内部托管，因此和 web 不同，我们没有办法获取到 web 中 performance 能获取到的页面和资源加载信息。