当上面的测试代码运行的时候，SDK能够获取地址为:xx/api/getData的fetch的请求、响应和性能信息，并且SDK也会发送一次fetch请求把收集的数据上报给后端服务。我们可以再次重写window.fetch，来拦截SDK的上报请求，就可以获取到请求内容，用请求内容来做预期测试判断
//再次重写fetch，拦截请求并跳过上报 const monitorFetch = window.fetch; let reportData; window.fetch = function () { //sdk上报的数据我们会做一个type标记，避免SDK收集它自己发出的请求信息 if (arguments[1] && arguments[1].type === 'report-data') { //获取请求内容 reportData = JSON.parse(arguments[1].body); return Promise.resolve(); } return monitorFetch.apply(this, arguments); }; //省略中间代码 expect(reportData.resourceList[0].name).toEqual(mockData.name);合并后的测试代码
/** test/fetch.js */ import 'MockFetch.js'; import 'MockPerformance.js'; import webReportSdk from '../dist/monitorSDK'; //初始化监控sdk，sdk内部会重写fetch const monitor = webReportSdk({ appId: 'appid_test', }); //再次重写fetch，拦截请求并跳过上报 const monitorFetch = window.fetch; let reportData; window.fetch = function () { //sdk上报的数据我们会做一个type标记，避免SDK收集它自己发出的请求信息 if (arguments[1] && arguments[1].type === 'report-data') { //获取请求内容 reportData = JSON.parse(arguments[1].body); return Promise.resolve(); } return monitorFetch.apply(this, arguments); }; const mockData = { name: 'xxx.com/api/getData', entryType: 'resource', startTime: 90427.23999964073, duration: 272.06500014290214, initiatorType: 'fetch', nextHopProtocol: 'h2', ... } test('web api: fetch', (done) => { //GET const requestAddress = mockData.name; fetch(requestAddress, { method: 'GET', }); //发送请求后，需要模拟浏览器performace数据监听 window.mockPerformanceEntriesAdd(mockData); //需要一定延迟 setTimeout(()=>{ expect(reportData.resourceList[0].name).toEqual(mockData.name); //more expect... done() },3000) })如上图所示，我们主要是以这样的模式进行SDK的流程测试和代码编写。有了测试代码后，能够在很大程度上保障代码维护迭代过程中的稳定性可控性，也能省去很多后期测试成本。
五、结语以上分享是我们在做监控SDK时比较核心的这三个方面，还有很多其它的细节和实现，比如：如何节流、上报时机、数据合并、初始化配置等。开发迭代过程中，要避免客户端SDK或者后端服务因为迭代造成的兼容性问题。还比较重要的是要考虑后期数据库查询和存储方面的需求，收集、存储和查询才能完整的构成这套前端监控系统。