开源的前端监控系统-webfunny

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前端监控系统

实时大屏、运营数据分析、前端错误分析、页面性能分析、接口性能分析、用户细查、用户连线。

本地安装

  1. 克隆到本地:git clone https://github.com/a597873885/webfunny_monitor.git

  2. 安装依赖包:npm install && npm run bootstrap

  3. 安装pm2(已有,请忽略):npm install pm2 -g

  4. 运行程序:npm run prd

  5. 访问页面: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)连接

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、https均要支持哈;
 
注意:监控系统只是运行代码,是否支持https,需要运维同学在你们的服务器上配置https证书,配置好证书,就可以支持https了。(只有域名才可以支持https)
 
常见问题:很多同学配置好了https证书,但是上报接口用的还是http。webfunny的探针是根据监控项目的网址来判断的,你的项目地址用的是https,上报接口也会切换到https
http {

  map $http_upgrade $connection_upgrade {
    default upgrade;
     ''   close;
  }

  #用80端口代理80118010两个端口号(可支持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端口代理80118010两个端口号(可支持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 

https://github.com/a597873885/webfunny_monitor