前端监控Skywalking

监控指标

性能指标

skywalking-client-js 使用 window.performance 来收集性能数据。

异常指标

在 skywalking-client-js 中可以捕捉到五种错误：

1. window.addeventlistener ('error ', callback, true) 捕捉资源加载错误。
2. window.onerror 抓取 JS 执行错误。
3. window.addEventListener ('unhandledrejection', callback) 用来捕捉 Promise 错误。
4. Vue 错误由 Vue.config.errorHandler 捕获。
5. Ajax 错误由 addEventListener ('error'，callback);addEventListener ('abort'，callback);addEventListener ('timeout'，callback); 在 send callback 中捕获。

用户指标

SkyWalking 浏览器监控还提供了访客使用被监控网站的指标，如 PV（页面浏览量）、UV（独立访客）、前 N 名 PV（页面浏览量）等。

在 SPA（单页应用）中，页面只会被刷新一次。传统方法只在页面加载后报告一次 PV，但无法统计每个子页面的 PV，也无法使其他类型的日志按子页面进行汇总。

SkyWalking 浏览器监控针对 SPA 页面提供了两种处理方式。

1. 启用 SPA 自动解析。该方法适用于大多数以 URL 哈希为路由的单页应用场景。在初始化配置项中，将 enableSPA 设置为 true，将开启页面的哈希变化事件监听器（触发重报 PV），在其他数据报送中使用 URL 哈希作为页面字段。
2. 手动上报。如果第一种方法无法使用，该方法可以用于所有单页应用场景。下面的例子提供了一个设置页面的方法，当数据上报时，可以手动更新页面名称。调用此方法时，页面 PV 将被默认重新上报

vue配置方法

安装依赖

执行以下命令安装客户端依赖

npm install skywalking-client-js --save

安装完成后会在node_modules里出现skywalking-client-js的包

main.js配置

// Vue
Vue.config.errorHandler = (error) => {
  ClientMonitor.reportFrameErrors({
    // 基础配置 
    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,
  }, error);
}

Router配置

router配置是配置监控触发位置，在router的配置内容中先引入ClientMonitor

import ClientMonitor from 'skywalking-client-js'

并在afterEach里增加以下代码

ClientMonitor.setPerformance({ 
  service: 'test', 
  serviceVersion: '8.9', 
  pagePath: location.href, 
  useFmp: true, 
  vue: 'Vue' 
})

代理配置

代理配置需要在vue.config.js里进行配置，需要添加以下代理内容

      '/browser': {
        target: 'http://skywalking地址:12800',
        changeOrigin: true
      }

浏览器的数据采集的端口是12800，不要配置错了，否则没有数据