Skywalking官方说从8.2版本开始支持浏览器端监控，这个功能以前在付费的apm产品上体验过。现在开源产品也有了这个功能，真是大赞。

但是可能这个功能比较新，网上没查到谁写过这个步骤。所以只能自己吃螃蟹了。

版本要求

服务端必须是Skywalking8.2以上版本。我们现在是8.3版本。

代码：

浏览器端的监控其实也是在前端代码里插入一个js的agent。和后台代码的接入一样。

安装依赖

npm install skywalking-client-js --save

引入依赖

import ClientMonitor from 'skywalking-client-js';

我们目前都是单页面引用

在router里配置

router.afterEach(() => {
 ?  // skywalkin 前端检测额
 ?  ClientMonitor.setPerformance({
 ? ? ?  service: '你的应用名',
 ? ? ?  serviceVersion: '你的版本号',
 ? ? ?  pagePath: location.href,
 ? ? ?  useFmp: true,
 ? ? ?  vue:'Vue'
 ?  });
  })

配置代理

"/browser/": {
 ? ? ?  target:"Skywalking接收前端监控数据的ip:port",//这个要开放一个外网地址
 ? ? ?  changeOrigin: true
 ? ?  },

效果：

大坑：

这里必须提醒，Skywalking接收前端监控数据的端口是12800。

skywalking追踪信息收集器有两个，一个是 gRPC的用于后端服务，一个是Http 收集客户端浏览器的采集信息 ，

Http默认端口 12800，gRPC默认端口 11800。

刚开始没注意这点，死活没数据。。。