欢迎大家来到IT世界,在知识的湖畔探索吧!
Skywalking官方说从8.2版本开始支持浏览器端监控，这个功能以前在付费的apm产品上体验过。现在开源产品也有了这个功能，真是大赞。
但是可能这个功能比较新，网上没查到谁写过这个步骤。所以只能自己吃螃蟹了。
版本要求
服务端必须是Skywalking8.2以上版本。我们现在是8.3版本。
代码：
浏览器端的监控其实也是在前端代码里插入一个js的agent。和后台代码的接入一样。
安装依赖
npm install skywalking-client-js --save欢迎大家来到IT世界,在知识的湖畔探索吧!
引入依赖
欢迎大家来到IT世界,在知识的湖畔探索吧!import ClientMonitor from 'skywalking-client-js';
我们目前都是单页面引用
在router里配置
router.afterEach(() => { // skywalkin 前端检测额 ClientMonitor.setPerformance({ service: '你的应用名', serviceVersion: '你的版本号', pagePath: location.href, useFmp: true, vue:'Vue' }); })配置代理
欢迎大家来到IT世界,在知识的湖畔探索吧!"/browser/": { target:"Skywalking接收前端监控数据的ip:port",//这个要开放一个外网地址 changeOrigin: true },
效果：
欢迎大家来到IT世界,在知识的湖畔探索吧!
大坑：
这里必须提醒，Skywalking接收前端监控数据的端口是12800。
skywalking追踪信息收集器有两个，一个是 gRPC的用于后端服务，一个是Http 收集客户端浏览器的采集信息 ，
Http默认端口 12800，gRPC默认端口 11800。
刚开始没注意这点，死活没数据。。。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/130136.html
