Skywalking接入前端监控
2023-06-13 09:14:29 时间
前言
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指标了,如下图服务跟版本及页面都有了代表客户端接入成功
相关文章
- 智慧工地设备监控系统
- ctk编译linux,CTK插件框架学习5-插件间通信(Netlink实现热拔插监控)[通俗易懂]
- Zabbix(4)-Zabbix使用snmp监控硬件
- Prometheus监控实战系列三:配置介绍
- 一款小巧好用的性能监控软件
- 动手体验 ES 8.4.x 实时监控 Java 应用运行状态
- 智慧养老院AI智能检测与视频监控联网方案设计
- Flutter 耗时监控 | 路由名为空原因分析
- 从WPS到百度网盘,我们真的“活在监控之下”?
- Spring Cloud Security监控示例-监控
- 浅析前端监控技术
- Linux基础:性能监控工具nmon安装及使用教程
- 监控JVM内存使用情况,剩余空间小于2M时报警详解编程语言
- Debian 9.3上安装和配置 Observium 监控平台
- 深入了解Redis:实时监控技术(redis实时监控)
- Zabbix监控(八):自动监控windows端口
- 深入探究Oracle性能监控指标优化的关键技巧(oracle性能监控指标)
- 监督SqlServer访问,提升系统安全(监控sqlserver)
- Redis数据库性能监控保障服务可靠性(数据库redis性能监控)