webfunny是一款国人开源的轻量级前端监控系统,同时支持性能监控,无埋点监控前端日志,实时分析前端健康状态。 基于Javascript编写,遵守Apache2.0开源协议。
功能特色:
数据概览: 实时掌握项目的健康状态,PV/UV、报错、用户分布等。可以自定义警报监测线上报错、异常。
错误分析:精细化分析每个报错问题,支持sourceMap源码定位。通过探针监控和上报线上环境的报错,以及一些自定义异常。可以看到每个报错的变化趋势,继而分析出用户在哪步操作中发生了问题。
用户连线:可以连接线上任意用户,实时查看行为和缓存数据变化。可了解用户的行为、控制台打印信息、本地缓存信息等。
性能分析:分析页面和接口性能,加载耗时,成功率。探针可对页面的加载性能进行分析,也同步对接口的性能进行分析,如:耗时、成功率等。
https://github.com/a597873885/webfunny_monitor
---------------------------------------------------------------
webfunny是一款轻量级的前端性能监控系统,也是一款埋点系统,私有化部署,简单易用。Webfunny is a lightweight front-end performance monitoring system and a burying point system, which is privatized and easy to use.
www.walkingfunny.com/webfunnyMonitor
Webfunny是一款集前端监控和埋点于一体的系统,非常轻量易用,纯私有化部署,只需要简单几步就可以搭建一套自己的监控埋点系统。
Webfunny前端监控系统
实时大屏、运营数据分析、前端错误分析、页面性能分析、接口性能分析、用户细查、用户连线。
本地安装
-
克隆到本地:
git clone https://github.com/a597873885/webfunny_monitor.git
-
安装依赖包:
npm install && npm run bootstrap
-
安装pm2(已有,请忽略):
npm install pm2 -g
-
运行程序:
npm run prd
-
访问页面:
http://localhost:8008/webfunny_center/main.html
服务器安装
https://www.webfunny.com/desMonitor?blogUrl=137&menuKey=menu1&blogKey=1-1
(线上部署
环境要求
安装NodeJS,版本要求:14.16.1及以上, 17.0以下。
安装pm2,版本目前无要求;
安装git,版本目前无要求;
配置要求、压力测试
最低配置要求:Linux服务器:1台,CentOs系统,2核4G;Mysql数据库:1台,2核4G。
压力测试:2核CPU(3.8GH), 4G内存,单点部署,最高峰支持2.8万/分钟的日志并发量。超过3万/分钟后,会出现日志丢失的情况(此压力值测试供参考)
第一步、下载(clone)最新部署包,初始化
1.本地克隆代码$:' git clone https://github.com/a597873885/webfunny_monitor.git '
使用码云仓库$:' git clone https://gitee.com/webfunnyMonitor/webfunny_monitor.git '(github网络不稳定,可以使用码云地址)
2.在项目根目录下执行初始化命令和安装命令$:
建议切换淘宝镜像:' npm config set registry http://registry.npm.taobao.org/ '
生成基础配置文件:' npm install && npm run bootstrap '
3.确认是否安装了pm2,如果没有安装pm2,请执行安装命令$:' npm install pm2 -g '
第二步、配置数据库(Mysql)连接
1. 安装 Mysql 数据库
2. 创建数据库
数据库名称:webfunny_db。
字符集设置:[Default Character set]:utf8、 [Default Collation]:utf8_bin
3. 数据库连接配置
分别进入
center/config_variable/config.json、
monitor/config_variable/config.json、
event/config_variable/config.json
三个文件中,配置对应的参数。三个文件可以使用同一个数据库(如果没有数据库,可以联系我,使用测试数据库哦)
write: {
ip: 'xxx.xxx.xxx.xxx', // 远程ip地址
port: '3306', // 端口号
dataBaseName: 'webfunny_db', // 数据库名
userName: 'root', // 用户名
password: '123456' // 密码
}
第三步、配置IP和端口号(使用域名,请看下一步)
分别进入以下三个配置文件中,配置对应的 IP + 端口号
应用中心:center/config_variable/config.json
"domain": {
"localServerDomain": "123.123.123.123:8009",
"localAssetsDomain": "123.123.123.123:8008",
"localServerPort": "8009",
"localAssetsPort": "8008",
"mainDomain": ""
},
"monitorDomain": {
"localServerDomain": "123.123.123.123:8011",
"localAssetsDomain": "123.123.123.123:8010"
},
"eventDomain": {
"localServerDomain": "123.123.123.123:8015",
"localAssetsDomain": "123.123.123.123:8014"
},
埋点系统:event/config_variable/config.json
"domain": {
"localServerDomain": "123.123.123.123:8015",
"localAssetsDomain": "123.123.123.123:8014",
"localServerPort": "8015",
"localAssetsPort": "8014",
"mainDomain": ""
},
"centerDomain": {
"localServerDomain": "123.123.123.123:8009",
"localAssetsDomain": "123.123.123.123:8008"
},
监控系统:monitor/config_variable/config.json
"domain": {
"localServerDomain": "123.123.123.123:8011",
"localAssetsDomain": "123.123.123.123:8010",
"localServerPort": "8011",
"localAssetsPort": "8010",
"mainDomain": ""
},
"centerDomain": {
"localServerDomain": "123.123.123.123:8009",
"localAssetsDomain": "123.123.123.123:8008"
},
第四步、配置代理、域名
如大家所见,虽然执行了一条命令(npm run prd),其实是启动了3个模块,6个端口号,结构图见文档末尾。分别是:应用中心(8009,8008)、埋点系统(8015,8014)、监控系统(8011,8010),记得提醒运维同学,将所这6个端口的对外授权打开哦。
生产环境中,我们不推荐使用 IP + 端口的形式; 端口复杂,且不方便支持https,所以推荐使用代理,代理配置请参考文档:nginx代理
使用代理后,就可以将所有的IP+端口 替换成域名了,配置如下:
应用中心:center/config_variable/config.json
"domain": {
"localServerDomain": "www.xxx.com",
"localAssetsDomain": "www.xxx.com",
"localServerPort": "8009",
"localAssetsPort": "8008",
"mainDomain": ""
},
"monitorDomain": {
"localServerDomain": "www.xxx.com",
"localAssetsDomain": "www.xxx.com"
},
"eventDomain": {
"localServerDomain": "www.xxx.com",
"localAssetsDomain": "www.xxx.com"
},
埋点系统:event/config_variable/config.json
"domain": {
"localServerDomain": "www.xxx.com",
"localAssetsDomain": "www.xxx.com",
"localServerPort": "8015",
"localAssetsPort": "8014",
"mainDomain": ""
},
"centerDomain": {
"localServerDomain": "www.xxx.com",
"localAssetsDomain": "www.xxx.com"
},
监控系统:monitor/config_variable/config.json
"domain": {
"localServerDomain": "www.xxx.com",
"localAssetsDomain": "www.xxx.com",
"localServerPort": "8011",
"localAssetsPort": "8010",
"mainDomain": ""
},
"centerDomain": {
"localServerDomain": "www.xxx.com",
"localAssetsDomain": "www.xxx.com"
},
第五步、尝试运行,访问
执行命令:npm run prd;如果已经启动过了,则执行重启命令:npm run restart;
命令行出现webfunny.cn的logo,则说明启动成功了。
此时,可以直接访问应用中心首页了,
应用中心首页: http://www.xxx.com/webfunny_center/main.html
注:如果访问不了,请跟运维确认下是否打开了6个端口号的对外授权。)
(Nginx代理的配置
http {
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
#用80端口代理8011,8010两个端口号(可支持http)
server {
listen 80;
server_name www.xxx.com;
root /home/jiang/webWorks/website;
index /home.html;
#### 应用中心(center)服务的反向代理 ####
location /wfManage/ {
proxy_pass http://123.123.123.123:8009/wfManage/;
proxy_connect_timeout 3000;
proxy_send_timeout 3000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /webfunny_center/ {
proxy_pass http://123.123.123.123:8008/webfunny_center/;
proxy_redirect default ;
}
#### 监控系统(monitor)服务的反向代理 ####
location /server/ {
proxy_pass http://123.123.123.123:8011/server/;
proxy_connect_timeout 3000;
proxy_send_timeout 3000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /webfunny/ {
proxy_pass http://123.123.123.123:8010/webfunny/;
proxy_redirect default ;
}
#### 埋点系统(event)服务的反向代理 ####
location /tracker/ {
proxy_pass http://123.123.123.123:8015/tracker/;
proxy_connect_timeout 3000;
proxy_send_timeout 3000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /webfunny_event/ {
proxy_pass http://123.123.123.123:8014/webfunny_event/;
proxy_redirect default ;
}
}
#用443端口代理8011,8010两个端口号(可支持https)
server {
listen 443 ssl;
server_name www.xxx.com; #网站域名,和80端口保持一致
root /home/jiang/webWorks;
index /index.html;
# ssl on;
ssl_certificate /etc/nginx/cert/3120409_www.xxx.com.pem; #证书公钥
ssl_certificate_key /etc/nginx/cert/3120409_www.xxx.com.key; #证书私钥
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDH:AESGCM:HIGH:!RC4:!DH:!MD5:!3DES:!aNULL:!eNULL;
ssl_prefer_server_ciphers on;
#### 应用中心(center)服务的反向代理 ####
location /wfManage/ {
proxy_pass http://123.123.123.123:8009/wfManage/;
proxy_connect_timeout 3000;
proxy_send_timeout 3000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /webfunny_center/ {
proxy_pass http://123.123.123.123:8008/webfunny_center/;
proxy_redirect default ;
}
#### 监控系统(monitor)服务的反向代理 ####
location /server/ {
proxy_pass http://123.123.123.123:8011/server/;
proxy_connect_timeout 3000;
proxy_send_timeout 3000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /webfunny/ {
proxy_pass http://123.123.123.123:8010/webfunny/;
proxy_redirect default ;
}
#### 埋点系统(event)服务的反向代理 ####
location /tracker/ {
proxy_pass http://123.123.123.123:8015/tracker/;
proxy_connect_timeout 3000;
proxy_send_timeout 3000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /webfunny_event/ {
proxy_pass http://123.123.123.123:8014/webfunny_event/;
proxy_redirect default ;
}
}
}
from
https://www.webfunny.com/desMonitor?blogUrl=53&menuKey=menu1&blogKey=1-7 )
Webfunny技术交流群:
官方客服微信
微信号:walkingfunny
from