在线监控sdkphp技巧_前端监控 SDK 开拓分享

文章目录 [+]

随着前真个发展和被重视，逐步的行业内对付前端监控系统的重视程度也在增加。
这里不对为什么须要监控再做阐明。
那我们先直接说说需求。

对付中小型公司来说，可以直策应用三方的监控，比如自己搭建一套免费的 sentry 就可以捕获非常和上报事宜，或者利用阿里云的 ARMS ，功能比较全面也并不会太贵。
类似的开源系统或者付费系统还很多，都能知足我们一定的需求。

在线监控sdkphp技巧_前端监控 SDK 开拓分享

如果这个公司逐渐发展，已经成为一个中大型的公司，用户量、业务做事、公司整体架构全部都在升级，这样三方的监控系统可能就逐步的涌现一些不能知足需求的问题。

（图片来自网络侵删）

比如企业内部各种系统之间的关系太独立和分散，不能利用内部的统一上岸、不能相互跳转，想要增加一些字段网络并不能很快得到支持等等。
这些问题都会导致效率上不能知足企业发展哀求。
一个内部可控并且能高速相应企业需求的前端监控系统就显得很有必要。

我们在内部的前端监控系统上已经投入了一定的精力和韶光，本日禀享一下前端监控 SDK 部分的内容，紧张三个方面：

网络哪些数据客户端SDK(探针)及事理编写测试用例二、网络哪些数据

前端监控系统最核心的紧张是网络客户真个干系数据，我们现在支持的客户端探针有： web 、微信小程序、 andriod 和 ios 。
它们紧张网络如图以下信息：

2.1 性能

网络页面加载、静态资源、 ajax 接口等性能信息，指标有加载韶光、 http 协议版本、相应体大小等，这是为业务整体质量提升供应数据支撑，办理慢查讯问题等。

2.2 缺点

网络 js 报错、静态资源加载缺点、 ajax 接口加载缺点，这些常规缺点网络都很好理解。
下面紧张解释一下"业务接口缺点(bussiness)":

客户端发送 ajax 要求后端业务接口，接口都会返回 json 数据构造，而个中一样平常都会有 errorcode 和 message 两个字段， errorcode 为业务接口内部定义的状态码。
正常的业务相应内部都会约定比如 errorcode==0 等，那如果不为 0 可能是一些非常问题或者可预见的非常问题，这种缺点数据便是须要网络的。

由于不同团队或者接口可能约定都不一样，以是我们只会供应一个预设方法，预设方法会在 ajax 要求相应后调用，业务方自己根据约定和相应的 json 数据，在预设的方法中编写判断逻辑掌握是否上报。
像是下面这样：

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">`errcodeReport(res) { if (Object.prototype.toString.call(res) === '[object Object]' && res.hasOwnProperty('errcode') && res.errcode !== 0) { return { isReport: true, errMsg: res.errmsg,code: res.errcode }; } return { isReport: false };}` </pre>2.3 赞助信息

除了上面两类硬指标数据，我们还须要很多其它的信息，比如：用户的访问轨迹、用户点击行为、用户ID、设备版本、设备型号、UV/UA标识、 traceId 等等。
很多时候我们要办理的问题并不是那么大略直接就能排查出来，乃至我们须要前端监控和其它系统在某些情形下能够关联上，以是这些软指标信息同样很主要。

在这里专门阐明一下 traceId :

现在的后端做事都会利用 APM （运用性能管理）系统， APM 工具会在一次完全要求调用之初天生唯一的 id ，常日叫做 traceId ，它会记录全体要求过程做事真个链路细节。
如果前端能够获取到它，就能通过它去后端 APM 系统中查询某次要求的日志信息。

只要后端做好干系的配置，后端接口在相应客户端 http 要求时，可以把 traceId 返回给客户端，SDK便可以去网络 ajax 要求的 traceId ，这样前后端监控就能够关联上了。

2.4 小结

网络以上的信息并开拓一套管理台，能够达到监控前端性能和非常缺点的目的。
想象一个场景，当我们收到监控系统的告警或者干系同事的问题反馈时，我们能打开管理台，首先查看到实时的缺点，如果创造是 js 的代码导致的问题，我们能很快找到前端代码缺点的地方。

如果不是前真个缺点，我们通过网络的业务接口缺点创造是后端接口的问题，我们也能及时的关照后端同事，在什么韶光哪个接口报出 errorcode 为xx的缺点，并且我们还能通过 traceId 直接查到这次 ajax 要求的后端链路监控数据。

如果实在不是明显就能排查到的问题，我们还能通过网络到的用户轨迹、设备信息和网络要求等数据，多方面的剖析还原用户当时的场景，来赞助我们排查代码中的难以复现的 bug 或者兼容问题。

在以上这个场景中，我们能够提高前端排查问题的能力，乃至能赞助后端同学。
在大部分时候，涌现 bug ，很可能第一韶光首先是找到前端做反馈，前端是排查问题的先头部队。
当我们有这样的前端监控系统之后，不至于每次碰着问题手足无措，办理问题的韶光也会快许多。

【详细字段一览】

确定好了要网络哪些信息，接下来就须要去实现客户端 SDK ，它能够在业务项目中自动网络数据上报给做事端。

三、客户端SDK（探针）干系事理和API

所谓探针，是由于我们的 SDK 要依托于监控的前端项目的运行环境，在其运行环境的底层 API 中加入探针函数来网络信息，下面分享 WEB 和微信小程序 SDK 实现的紧张事理和利用的 API 。

3.1 WEB

下图是 SDK 紧张利用的 Web API ，通过这几个 API 我们就能分别获取到：页面性能信息、资源性能信息、 ajax 信息、缺点信息。

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 ，并在对应的函数和逻辑中插入自定义代码，来达到网络的目的。
干系的文章很多，这里就不再细说了。

<pre class="prettyprint hljs coffeescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">`let _fetch = fetch;window.fetch = function () { // custom code return _fetch .apply(this, arguments) .then((res) => { // custom code return res; })};` </pre>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 能获取到的页面和资源加载信息。
下图是 SDK 紧张利用的 API

3.2.1 App和Component

通过重写全局的 App 函数，绑定 onError 方法监听缺点，重写它的 onShow 方法实行小程序启动时 SDK 须要的逻辑。
通过重写 Component 的 onShow 方法，可以在页面组件切换时实行我们的路径网络和实行上报等逻辑。

<pre class="prettyprint hljs lua" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">`// SDK初始化函数init(){ this.appMethod = App; this.componentMethod = Component; const ctx = this; //重写微信小程序Component Component = (opts) => { overrideComponent(opts, ctx); ctx.componentMethod(opts); }; //重写微信小程序App App = (app) => { overrideApp(app, ctx); ctx.appMethod(app); };} //把稳ctx是sdk的thisoverrideComponent(opts, ctx) => { const compOnShow = opts.methods.onShow; opts.methods.onShow = function(){ // do something //把稳这里的this是实际调用方 compOnShow.apply(this, arguments) }})overrideApp(app, ctx) => { const _onError = app.onError || function () {}; const _onShow = app.onShow || function () {}; app.onError = function (err) { reportError(err, ctx); return _onError.apply(this, arguments); }; app.onShow = function () { //do something return _onShow.apply(this, arguments); };})` </pre>3.2.2 重写wx.request

这里也是由于和 fetch/xmlHttpRequest 一样，并没有一个全局的 API 能让我们捕获到要求信息，因此只能通过重写 wx.request 来达到监听网络的功能。

当我们已经实现了 SDK 之后或者说在实现的过程中，就须要编写测试代码了，下面说说编写测试用例。

四、编写测试用例

SDK 属于一个须要长期掩护和更新的独立库，它被利用在很多业务项目中，哀求更加稳定，当涌现问题的时候，它的更新本钱很高。
须要经历：更新代码->发布新版本->业务方更新依赖版本，等流程，而如果在这个流程中，如果 SDK 又改出其它问题，那将会再启上述循环，业务同事肯定会被麻烦去世。

随着接入监控的系统增多，在迭代过程中改动任何的代码已经让人开始发慌，由于存在很多流程性的关联逻辑，害怕改出问题。
在一次代码的重构和优化过程中，决心完善单元测试和流程测试。

4.1 单元测试

单元测试紧张是对一些有明显输入输出的通用方法，比如 SDK 的 utils 中的常用方法， SDK 的参数配置方法等。
而对付监控 SDK 来说，更多的测试代码紧张集中在流程测试，对付单元测试这里就不详细解释了。

4.2 流程测试

监控 SDK 在业务项目中初始化之后，紧张是通过加入探针监听业务项目的运行状态而网络信息并进行上传的，它在大部分情形下并不是业务方调用什么就实行什么。
比如我们页面初次加载， SDK 在得当的机遇会实行首次加载干系信息的网络并上传，那我们须要通过测试代码来仿照这个流程，保障上报的数据是预期的。

我们的 SDK 运行在浏览器环境中，在 node 环境下是不支持 Web 干系 API 的。
因此我们须要让我们的测试代码在浏览器中运行，或者供应干系 API 的支持。
下面我们将会先容两种不同的办法，来支持我们的测试代码正常运行。

4.2.1 供应Web环境的办法

如果我们利用 mocha 或者 jest 作为测试框架，可以通过 mocha 自带的 mocha.run 方法在 html 中编写和实行我们的测试代码，并在浏览器中打开运行； jest-lite 也可以支持让 jest 运行在浏览器中。

但有时候我们不想让它打开浏览器，希望在终端中就能完成测试代码运行，可以利用无头浏览器，在 node 中加载浏览器环境，比如 phontomjs 或者 puppeteer 。
他们供应了干系的工具，比如 mocha-phantomjs 就能直接在终端中运行 html 实行测试流程。

基于写好的 html 测试文件，再利用 mocha-phantomjs 和 phantomjs ，以下是 package.json 的命令配置。

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">`scripts:{ test: mocha-phantomjs -p ./node_modules/.bin/phantomjs /test/unit/index.html}` </pre>

phontomjs 已经被废弃了，不被推举利用。
推举 puppeteer ，干系的功能和类似工具都有支持。

举例解释：

以前有在 WebSocket 的代码库中利用过这种办法。
由于依赖Web Api: WebSocket 。
须要通过 new WebSocket() ，来完成测试流程，而 node 环境下没有此 API 。
于是利用 mocha 在 html 中写测试用例，如果希望全程利用终端跑测试，还可以合营利用 mocha-phantomjs 让测试的 html 文件可以在终端中实行而不用打开本地的网页运行。

当然实在完备可以直接在浏览器中打开 html 查看测试运行结果，而且 phantomjs 干系的依赖包非常大、安装也比较慢。
但当时我们利用了持续继续做事travis，当我们的代码更新到远程仓库往后， travis 将会启动多个独立容器并在终端中实行我们的测试文件，如果不该用 mocha-phantomjs 在终端中跑测试没有办法在 travis 中成功通过。

4.2.2 Mock Web API的办法

在这次完善监控 SDK 测试的过程中，考试测验了另一种办法，全程利用 Mock 的办法。

上面的 Web 环境运行办法须要供应浏览器或者无头浏览器。
但实际我们须要测试的代码并不是 Web API ，我们只是利用了它们。
我们假定它们是稳定的，我们只须要在乎它的输入输出，如果它们内部出 bug 了，我们也是不能掌握的，那是浏览器开拓商的事情。
因此我要做的事情仅仅是在 node 环境中仿照干系的 Web API 。

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

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

启动一个httpserver做事供应接口做事引入三方库，让node支持fetchnode中手动仿照部分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 。

而 performance 就比较分外一点，没有一个三方的库能够支持。
对付 fetch 流程来说，我们如果要仿照 performance ，只须要仿照我们利用的 PerformanceObserver ，乃至一些入参和返回我们也可以只仿照我们须要的。
下面的代码是 PerformanceObserver 的利用例子。
在 SDK 中，我们紧张也是利用这一段代码。

<pre class="prettyprint hljs php" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">`/ 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']});` </pre>

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

下面我们仿照 PerformanceObserver 一部分功能，来支持我们须要的测试流程。
定义 window.PerformanceObserver 为布局函数，把传入方法参数 fn 加入到数组中。

mockPerformanceEntriesAdd 是我们须要手动调用的方法，当我们发起一次 fetch ，我们就手动调用一下此方法，把 mock 数据传入给注册的监听函数，这样就能使 PerformanceObserver 的实例吸收到我们的 mock 数据，以此来仿照浏览器中 performance 内部的行为。

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">`/ 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]; }, }); });};` </pre>

普通点举例来说，十号公司要给打工人银行卡发人为的，打工人的人为银行卡第二天就会被扣房贷。
打工人最关心的保障正常扣房贷否则影响征信。
本来打工人只须要关注银行是否成功完成扣款，但是打工人最近丢事情了公司不会打款到人为卡，以是只能拿积蓄卡给自己的扣贷银行卡转钱，让后续银行可以扣钱还房贷。

公司便是浏览器 performance 底层，打工人给自己转钱便是 mockPerformanceEntriesAdd ，把公司发人为到银行卡更换为自己转钱进去，从被动吸收变为主动实行。
细品，你细品～

mockPerformanceEntriesAdd 便是仿照浏览器的主动行为，入参是性能信息，我们可以直接写去世（下方 mockData ）。
看看测试代码

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">`/ test/fetch.js /import 'MockFetch.js';import 'MockPerformance.js';import webReportSdk from '../dist/monitorSDK';//初始化监控sdk，sdk内部会重写fetchconst 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);})` </pre>

当 mockPerformanceEntriesAdd 实行的时候， SDK 内部的 PerformanceObserver 便能网络到mock的性能信息了。
（这里把稳，我们还须要启动一个 httpserver 的做事，做事供应 http://localhost:xx/api/getData 接口）

当上面的测试代码运行的时候， SDK 能够获取地址为 http://localhost:xx/api/getData 的 fetch 的要求、相应和性能信息，并且 SDK 也会发送一次 fetch 要求把网络的数据上报给后端做事。
我们可以再次重写 window.fetch ，来拦截 SDK 的上报要求，就可以获取到要求内容，用要求内容来做预期测试判断

<pre class="prettyprint hljs haskell" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">`//再次重写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);` </pre>

合并后的测试代码

<pre class="prettyprint hljs livescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">`/ test/fetch.js /import 'MockFetch.js';import 'MockPerformance.js';import webReportSdk from '../dist/monitorSDK';//初始化监控sdk，sdk内部会重写fetchconst 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)})` </pre>

如上图所示，我们紧张因此这样的模式进行 SDK 的流程测试和代码编写。
有了测试代码后，能够在很大程度上保障代码掩护迭代过程中的稳定性可控性，也能省去很多后期测试本钱。

五、结语

以上分享是我们在做监控 SDK 时比较核心的这三个方面，还有很多其它的细节和实现，比如：如何节流、上报机遇、数据合并、初始化配置等。

开拓迭代过程中，要避免客户端 SDK 或者后端做事由于迭代造成的兼容性问题。
还比较主要的是要考虑后期数据库查询和存储方面的需求，网络、存储和查询才能完全的构成这套前端监控系统。

以为本文对你有帮助？请分享给更多人