Skywalking接入前端监控

前言

Skywalking从8.2版本开始了支持浏览器端的监控，也就是在仪表盘中的Web Browser选项，但是应用的人好像并不多，我在搜索相关文章时对配置Skywalking前端监控的文章很少，所以只能在组合有限的资料中进行配置

版本

因为是从8.2开始的所以Skywalking的版本必须为8.2之上。 我的前一篇文章搭建的Skywalking为8.6版本的，如果有低版本的同学或者需要搭建的同学可以看一下，地址如下：

配置依赖

Skywaking的浏览器接入需要引入一个客户端的js包，然后再需要采集信息的地方使用包内的函数，并不能像java一样无侵入性的进行监控

安装依赖

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

npm install skywalking-client-js --save

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

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，不要配置错了，否则没有数据

配置完毕后重启访问一下各个页面，然后就可以查看skywalking的Web Browser指标了，如下图服务跟版本及页面都有了代表客户端接入成功