download：高级前端进阶必修：自主打造高扩展的业务组件库天文列宿在
skywalking-client-js 前端配置与源码解析
序文
skywalking是目前最炙手可热的散布式应用性能监控系统，且 Skywalking 从 8.2版本开端支持阅读器端的监控，完成的方式便是引入skywalking-client-js库，这是一个 skywalking 官方出品的一个前端埋点上报插件。轻量化，配置简单，提供了性能追踪，错误追踪，网络恳求追踪三大功用。
本篇将基于其配置函数从源码层面来解说skywalking-client-js的工作流程，协助学习如何运用的同时，了解前端监控埋点上报的一些思想。
skywalking-client-js 目前曾经发布到 v0.9.0 版本，本文也基于此版本解说，官方 GitHub 地址请点击这里，整体源码并不大，入口文件在 src/monitor.ts 下，鼓舞大家能够阅读一下
根本运用
skywalking-client-js定义了一个ClientMonitor对象，并将其挂载到了window全局对象上，该对象很重要，由于我们一切的配置操作都基于此对象的办法，我们能够在项目中恣意页面引入该对象随时停止配置：
import ClientMonitor from ‘skywalking-client-js’;
ClientMonitor.register({
// 根底配置
collector: ‘http://127.0.0.1:12800’,
service: ‘FE_instance’,
serviceVersion: ‘1.0.0’,
pagePath: window.location.href,
})
复制代码
ClientMonitor内部定义了以下八种办法，我们将其辨别为配置办法和内部办法，汇总如下：
配置办法：
register
catchErrors
setPerformance
reportFrameErrors
setCustomTags
performance
内部办法：
validateTags
validateOptions
配置办法即由我们调用来停止配置的办法，内部办法我们固然能够停止调用，但没有什么实践作用，在这里的两个内部办法都是由其它配置办法调用，辅助停止参数校验。
通用配置项
大局部配置办法都需求传入一个通用的配置对象CustomReportOptions（假如该配置办法运用了全局配置，且之前你曾经停止过全局配置了则不需求），其定义了我们接入 OAP 数据上报效劳器的一些细致信息：
collector (string)：上报的的 OAP 效劳器地址（普通固定 12800 端口）
service (string)：自定义的客户端效劳名
serviceVersion (string)：自定义的效劳端实例版本
pagePath (string)：自定义的效劳端端点，常指页面路由
skywalking-client-js中会存在一个全局的通用配置被一切功用模块运用，有些配置办法会改动它，而有些办法仅会改动本人模块的配置，后续引见的时分会阐明。此外还存在继承了CustomReportOptions的更全面的配置对象CustomOptionsType，能够停止更细致的配置。
接下来我们从错误追踪，性能追踪，网络追踪三个方面来停止解说
错误追踪
skywalking 在阅读器端定义了 6 种错误类型，每种错误类型的完成方式都十分巧妙，是前端埋点中常用的错误追踪方式，他们分别是：
错误名类别完成方式JSErrorsJS 执行错误运用 window.onerror 监听 JS 执行错误并上报PromiseErrorsPromise Reject 错误运用 unhandledrejection 事情监听未处置 reject 并上报VueErrorsVue 内部错误运用 Vue.config.errorHandler 监听错误AjaxErrorsAjax 网络恳求错误XHR 恳求类型运用 xhrReadyStateChange 事情拦截并判别能否发作错误；fetch 恳求则是重写 fetch 办法拦截响应 response，依据 response.status 判别能否发作错误ResourceErrors资源加载错误在 window 上设置 error 监听，并判别 error 事情能否来源于HTMLScriptElement，HTMLLinkElement，HTMLImageElement；假如是，则判别未资源加载错误FrameErrors框架错误非全局自动监听，需求本人手动传入 error 对象
错误追踪功用会在发作以上错误时，搜集error信息，并以 1min 的固定频率停止上报，目前我们暂时还无法改动上报频率。在这些错误类型中，前 5 种由catchErrors停止全局配置，而最后一种由reportFrameErrors停止捕获
catchErrors 配置办法
该配置办法需求传入通用配置和监听的错误类型配置，且其根底配置不会改动全局通用配置，仅作用于错误追踪模块：
ClientMonitor.catchErrors({
// 根底配置（错误上报的地址）
collector: ‘http://127.0.0.1:12800’,
service: ‘FE_instance’,
serviceVersion: ‘1.0.0’,
pagePath: window.location.href,
// 错误监听
jsErrors: true, // 启用JSErrors，PromiseErrors错误的监听
apiErrors: true, // 启用AjaxErrors错误的监听
resourceErrors: true, // 启用ResourceErrors错误的监听
vue: true, // 启用VueErrors错误的监听
})
复制代码
reportFrameErrors
该配置办法用于标志框架产生的错误，skywalking自身只支持了Vue的错误捕获，其他框架可能的错误，需求我们手动调用该办法停止上报，并传入产生的error对象，同样不会改动全局通用配置:
ClientMonitor.reportFrameErrors({
// 根底配置
collector: 'http://127.0.0.1:12800',
service: 'vue-demo',
pagePath: '/app',
serviceVersion: 'v1.0.0',
}, error);
复制代码
性能追踪
skywalking的性能追踪采取的是window.performance原生计划，这也是大多数性能埋点的计划，其配置由setPerformance和performance办法完成，追踪页面初次加载中的各项性能参数。
performance
该配置办法做的事情很简单，他会判别调用时页面能否加载终了，假如已加载完成会立刻调用内部的tracePerf.getPerf办法，传入配置项并立刻停止性能数据的搜集和上报，假如还未加载完成会添加window.onLoad监听，等到加载完成后再执行上述操作。
performance才是完成性能追踪的主要办法，其配置项直接作用于性能追踪模块，不会改动全局配置，配置如下：
ClientMonitor.performance({
// 根底配置
collector: ‘http://127.0.0.1:12800’,
service: ‘FE_instance’,
serviceVersion: ‘1.0.0’,
pagePath: window.location.href,
// 性能追踪
autoTracePerf: true,
useFmp: true,
enableSPA: false,
})
复制代码
仅有简单的三个配置项，他们的作用于tracePerf.getPerf办法，运用如下：
字段功用autoTracePerf能否开启自动追踪，开启后才会去 window.performance 拿取性能数据，否则上报的内容中仅有通用配置的数据useFmp能否搜集 FMP 初次有效绘制性能指标，需求 autoTracePerf 开启才有用，会向上报数据添加一个 fmpTime 字段enableSPA能否开启单页应用形式，开启后会在每次 window.onhashchange 事情中均发作性能数据
setPerformance
该办法会调用performance来配置错误追踪，但他做了更多的工作，首先其会改动全局通用配置（假如你没有设置 useFmp，该办法会将其置为 false），并对我们传入的配置参数停止校验，随后会调用 performance 办法，最后还会依据全局配置重新设置一遍错误追踪（不包括框架错误追踪）。
也就是说 setPerformance 能够同时配置错误追踪和性能追踪，且会改动全局配置：
ClientMonitor.register({
// 根底配置
collector: ‘http://127.0.0.1:12800’,
service: ‘FE_instance’,
serviceVersion: ‘1.0.0’,
pagePath: window.location.href,
// 错误追踪
jsErrors: true,
apiErrors: true,
resourceErrors: true,
vue: true,
// 性能追踪
autoTracePerf: true,
useFmp: true,
enableSPA: true,
})
复制代码
网络追踪
skywalking-client-js中的网络恳求追踪，会记载你的网络恳求状况并上报，该项功用只能由register配置项完成，其也是最综合的配置项，三个功用模块均能配置，贴一段源码了解其做了什么：
register(configs: CustomOptionsType) {
// 改动全局配置
this.customOptions = {
...this.customOptions,
...configs,
};
// 校验参数
this.validateOptions();
// 启用错误追踪
this.catchErrors(this.customOptions);
if (!this.customOptions.enableSPA) {
// 假如没有开启enableSPA，启用性能追踪
this.performance(this.customOptions);
}
// 启用网络追踪
traceSegment(this.customOptions);
}
复制代码
其配置功用全面，错误追踪和性能追踪我们前面曾经引见了，配置项是一样的，独一值得留意的是假如你开启了enableSPA，并不会开启性能追踪，需求你额外调用performance来开启，我并不晓得作者在这里的企图是什么，或许有其它思索。最后是由traceSegment开启的网络追踪办法。
traceSegment
从该办法的名字，片段追踪，我们引出skywalking世界中存在的span概念，这并不是我们的前端标签 span，而是指一个用来追踪的完好调用过程，从客户端到效劳端的网络恳求就是一个Exit类型的 span 过程（还有其它的类型的 span，前端不用理解）。一个时间片段以内可能会发作屡次恳求，skywalking 会将多个 span 封装到 segments 中停止上报。
traceSegment是如何晓得一段时间内你发送了网络恳求并记载上报的呢？其实是采用了拦截重视写fetch办法和xhr办法完成的。首先会在顶层定义一个segments队列，随后会生成xhrInterceptor和windowFetch拦截器，以后者 fetch 恳求为例，其伪代码如下：
windowFetch(option，segments){
// 复制原生fetch恳求办法
const originFetch = window.fetch;
// 重写
window.fetch = async (args) => {
// 运用copy办法拿取恳求
const response = await originFetch(...args);
const segment = {
// 用response和option结构上报数据
}
// 将该次恳求数据添加到队列
segments.push(segment);
}
}
复制代码
如此一来你的一切xhr和fetch恳求都会被记载并上报。但也提供了你扫除一些恳求，不停止追踪的方式，在拦截器内部会有个hasTrace标志，其判别逻辑为：
const hasTrace = !noTraceOrigins || (isSDKInternal && customConfig.traceSDKInternal);
复制代码
前者表示能否在扫除列表中，后者表示非常追踪本人的上报恳求。traceSegment 还会设置一个循环定时器，定时轮询 segments 中能否有数据，存在的话就停止上报并清空，同时也有beforeunload事情监听在页面关闭的时分停止最后的上报。
总结以上功用，有如下的配置项：
traceSDKInternal：能否追踪本人的上报恳求
detailMode：设置能否开启细致形式，开启后会在 span 中添加更多细致信息的 tag
noTraceOrigins (array)：扫除追踪的恳求列表
traceTimeInterval：设置循环定时器轮询的时间，默许 1min，单位 ms
register
最后我们经过一个完好的配置示例来阐明register的运用，除了根底配置外均运用默许配置：
ClientMonitor.register({
// 根底配置
collector: ‘http://127.0.0.1:12800’,
service: ‘FE_instance’,
serviceVersion: ‘1.0.0’,
pagePath: window.location.href,
// 错误追踪
jsErrors: true,
apiErrors: true,
resourceErrors: true,
vue: true,
// 性能追踪
autoTracePerf: true,
useFmp: true,
enableSPA: true,
// 网络追踪
traceSDKInternal:false,
detailMode:false,
noTraceOrigins:[],
traceTimeInterval:60000
})
复制代码
值得留意的是 register 办法全局只能调用一次，由于 traceSegment 的网络追踪是重写全局 fetch 和 xhr 办法完成的，屡次调用会屡次重写发作错误
setCustomTags
此配置办法是最新版的 v0.9.0 新增的，还记得网络追踪的detailMode配置项能够像 span 中添加细致信息的 tag 吗，假如开启后会默许添加http.method和url两个 tag。如今我们能够用setCustomTags配置办法在 span 中参加一些我们本人的 tag：
ClientMonitor.setCustomTags([
{ key: 'key1', value: 'value1' },
{ key: 'key2', value: 'value2' },
]);
复制代码
总结
假如你打算采用 skywalking 作为你的散布式系统的应用程序性能监视工具，那么skywalking-client-js能够协助你非常轻松地将阅读器 web 端接入其中，经过简单的十余项配置就能完成强大的埋点功用，疾速展示在 skywalking UI 上。
他非常轻量化，埋点代码侵入量小，中心代码量在千行左右，均采用原生 API 完成，且控制上报频率后不会有太大的性能影响，是性价比很高的埋点计划。
但目前的上报信息我们能够控制的局部比拟少，都是固定的，且不便当对不同类型效劳的恳求做辨别，在添加setCustomTags办法后有所改善，如今 skywalking 照旧在开展壮大，将来可期。