前端监控SDK开发分享 (4)

拿前面说到的WebSocket举例，因为node中不支持WebSocket，我们没有办法new WebSocket。那假如有完全模拟WebSocket的三方node库，我们就可以在node代码中，直接让执行环境支持WebSocket： const WebSocket = require('WebSocket')。这样我们就不需要在浏览器或者无头浏览器环境下运行了。

下面就具体拿我们的监控SDK中的fetch举例，是如何模拟流程测试的，总的来说要支持下面3个内容，

启动一个httpserver服务提供接口服务

引入三方库，让node支持fetch

node中手动模拟部分performance API

首先说明一下SDK中fetch的正常流程，当我们的SDK在业务项目中初始化了之后，SDK会重写fetch，于是业务项目中真正使用fetch做业务接口请求的时候，SDK就能通过之前重写的逻辑获取到http请求和响应信息，同时也会通过performance获取到fetch请求的性能信息，并进行上报。我们要写的测试代码，就是验证这个流程能够顺利完成。

（1）http server

因为是验证fetch完整流程，我们需要启动一个httpserver服务，提供接口来接收和响应这次fetch请求。

（2）mock fetch

node环境中支持fetch的话，我们可以直接使用三方库node-fetch，在执行环境的顶部，我们就可以提前定义fetch。

/** MockFetch.js */ import fetch from 'node-fetch'; window = {}; window.fetch = fetch; global.fetch = fetch; （3）mock performance

而performance就比较特殊一点，没有一个三方的库能够支持。对于fetch流程来说，我们如果要模拟performance，只需要模拟我们使用的PerformanceObserver，甚至一些入参和返回我们也可以只模拟我们需要的。下面的代码是PerformanceObserver的使用例子。在SDK中，我们主要也是使用这一段代码。

/** PerformanceObserver 使用实例 */ var observer = new PerformanceObserver(function(list, obj) { var entries = list.getEntriesByType('resource'); for (var i=0; i < entries.length; i++) { // Process "resource" events } }); observer.observe({entryTypes: ['resource']});

在浏览器内部performance底层会自动去监听资源请求，我们只是通过它提供PerformanceObserver去收集它的数据。本质上来说，主动收集的行为探针在performance内部实现。

下面我们模拟PerformanceObserver一部分功能，来支持我们需要的测试流程。定义window.PerformanceObserver为构造函数，把传入方法参数fn加入到数组中。mockPerformanceEntriesAdd 是我们需要手动调用的方法，当我们发起一次fetch，我们就手动调用一下此方法，把mock数据传入给注册的监听函数，这样就能使PerformanceObserver的实例接收到我们的mock数据，以此来模拟浏览器中performance内部的行为。

/** MockPerformance.js */ let observerCallbacks = []; //模拟PerformanceObserver对象，添加资源监听队列 window.PerformanceObserver = function (fn) { this.observe = function () {}; observerCallbacks.push(fn); }; //手动触发模拟performance资源队列 window.mockPerformanceEntriesAdd = (resource) => { observerCallbacks.forEach((cb) => { cb({ getEntriesByType() { return [resource]; }, }); }); };

通俗点举例来说，十号公司要给打工人银行卡发工资的，打工人的工资银行卡第二天就会被扣房贷。打工人最关心的保障正常扣房贷否则影响征信。本来打工人只需要关注银行是否成功完成扣款，但是打工人最近丢工作了公司不会打款到工资卡，所以只能拿积蓄卡给自己的扣贷银行卡转钱，让后续银行可以扣钱还房贷。公司就是浏览器performance底层，打工人给自己转钱就是mockPerformanceEntriesAdd，把公司发工资到银行卡替换为自己转钱进去，从被动接收变为主动执行。细品，你细品～

mockPerformanceEntriesAdd就是模拟浏览器的主动行为，入参是性能信息，我们可以直接写死（下方mockData）。
看看测试代码

/** test/fetch.js */ import 'MockFetch.js'; import 'MockPerformance.js'; import webReportSdk from '../dist/monitorSDK'; //初始化监控sdk，sdk内部会重写fetch const monitor = webReportSdk({ appId: 'appid_test', }); const mockData = { name: 'http://localhost:xx/api/getData', entryType: 'resource', startTime: 90427.23999964073, duration: 272.06500014290214, initiatorType: 'fetch', nextHopProtocol: 'h2', ... } test('web api: fetch', () => { //GET const requestAddress = mockData.name; fetch(requestAddress, { method: 'GET', }); //发送请求后，需要模拟浏览器performace数据监听 window.mockPerformanceEntriesAdd(mockData); })

当mockPerformanceEntriesAdd执行的时候，SDK内部的PerformanceObserver便能收集到mock的性能信息了。（ 这里注意，我们还需要启动一个httpserver的服务，服务提供:xx/api/getData接口 ）