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)连接

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端口代理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 ;
    }
  }
}