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。
刚开始没注意这点,死活没数据。。。