webfunny前端监控开源项目

前言介绍(项目地址

如果你是一位前端工程师,那你一定不止一次去解决一些顽固的线上问题,你也曾想方设法复现用户的bug,结果可能都不太理想。 怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决。
身为一名前端工程师,我每天都要面临很多线上的问题,一时间让我焦头烂额。公司其他的监控系统也有,但是每次解决问题都需要辗转于各种监控系统之间,亦是疲惫不堪。所以,我便为自己(前端工程师)量身定做了这样一款监控系统,欢迎点击了解和使用。

系统特点

Webfunny是一套完整的前端监控系统方案,只需要简单几步就可以将这套监控系统移植到你自己的服务器上。
Webfunny经压力测试,可以支持千万级别日PV量,能够满足更多用户的场景需求。
Webfunny是私有化部署,所有的日志数据都存在使用者的数据库中,没有任何数量限制,也不会依赖我们的任何服务
Webfunny提供了很多报警机制,使用者可以自己修改代码,决定报警时机。

功能列表

1. 项目总览;监控系统支持多个项目,让所有项目的状态都一目了然。通过对线上项目的实时分析,让我们可以对线上状况有个非常直观的了解。例如PV、UV数据变化趋势,留存变化,页面停留时间,线上报错、异常等
2. 用户细查;深入分析每一个用户,记录下每个用户的所有行为。由于线上用户的操作行为十分复杂,有些问题可能隐藏在很多次操作之后,所以探针记录了用户的很多操作行为,一旦出现问题,复现BUG也将变得非常简单。 同时,可以使用多种检索条件进行搜索,提高查找效率。
3. 自定义埋点;用户可以自定义埋点,webfunny会将其记录下来,并定时分析。同时可以对多个埋点步骤进行漏斗分析,可以清晰的看到步骤之间的转化率,留存率等等。
4. 错误分析;精细化分析每一个报错问题,支持sourceMap源码定位。通过探针监控和上报线上环境的报错,以及一些自定义异常。我们对这些日志进行精确的分析,可以准确定位到代码的问题所在。同时能够看到每一个报错的变化趋势,也能够分析出用户在哪一步操作中发生了问题。
5. 性能分析;分析页面和接口性能,加载耗时,成功率。探针对页面的加载性能进行分析,直观反映在报表之上。也对接口的性能进行了分析,如:耗时、成功率等。
6. 无线调试功能;强大的调试功能,让你从繁杂的调试工具中解脱出来。无线调试功能可以让你随时线上用户,实时了解用户的行为、控制台打印信息、本地缓存信息等等。

环境要求

请安装NodeJS,版本号:10.6.0及以上。

第一步、下载(clone)最新部署包,初始化

1.本地克隆代码
git clone https://github.com/a597873885/webfunny_monitor.git 
使用码云仓库(github网络不稳定,可以使用码云地址)
git clone https://gitee.com/webfunnyMonitor/webfunny_monitor.git

2.在项目根目录下执行初始化命令和安装命令$:npm run init && npm install 


3.确认是否安装了pm2,如果没有安装pm2,请执行安装命令$:npm install pm2 -g 

第二步、配置数据库(Mysql)连接

1. 安装 Mysql 数据库(Mysql安装教程) 

2. 创建数据库(webfunny_db) 
创建数据库:webfunny_db。 
字符集设置:[Default Character set]:utf8、 [Default Collation]:utf8_bin

3. 数据库连接配置
进入webfunny_monitor/bin/mysqlConfig.js文件中
module.exports = {
      write: {
           ip: 'xxx.xxx.xxx.xxx',         // 远程ip地址
           port: '3306',                  // 端口号
           dataBaseName: 'webfunny_db',   // 数据库名
           userName: 'root',              // 用户名
           password: '123456'             // 密码
       }
}

第三步、本地部署运行

1) 此时此刻,本地配置已经完成了,尝试运行命令$: npm run prd

2) 打开浏览器,访问地址:http://localhost:8010/webfunny/register.html?type=1 (初始化管理员账号,并登录)

3) 创建新项目后,可以看到探针部署教程,完成部署。

第四步、生产环境部署(域名配置方式2选1)

1. IP地址或者域名配置(方式一)
进入webfunny_monitor/bin/domain.js文件中(注意,对应的端口号要保持一致)

IP地址配置方式:
module.exports = {
                    localServerDomain: 'xxx.xxx.xxx.xxx:8011',    // 日志上报域名
                    localAssetsDomain: 'xxx.xxx.xxx.xxx:8010',    // 前端页面域名
                    localServerPort: '8011',                      // 日志上报端口号
                    localAssetsPort: '8010',                      // 前端页面端口号
                  }

 

域名配置方式:

 

module.exports = {
                    localServerDomain: 'www.baidu.com:8011',      // 日志上报域名
                    localAssetsDomain: 'www.baidu.com:8010',      // 前端页面域名
                    localServerPort: '8011',                      // 日志上报端口号
                    localAssetsPort: '8010',                      // 前端页面端口号
                  }

 

 配置完成后,浏览器访问以下地址,确保能够访问成功。


1) 项目列表地址:http://xxx.xxx.xxx.xxx:8011/server/webMonitorIdList 或 http://www.baidu.com:8011/server/webMonitorIdList
2) 数据展示地址:http://xxx.xxx.xxx.xxx:8010/webfunny/overview.html 或 http://www.baidu.com:8010/webfunny/overview.html

2. 代理域名配置(方式二)
使用代理域名的用户,请一定要理解清楚Nginx代理的方法

代理域名配置方式(端口号还是需要配置的):
module.exports = {
                    localServerDomain: 'www.baidu.com',      // 日志上报域名
                    localAssetsDomain: 'www.baidu.com',      // 前端页面域名
                    localServerPort: '8011',                 // 日志上报端口号
                    localAssetsPort: '8010',                 // 前端页面端口号
                  }

 

配置完成后,浏览器访问以下地址,确保能够访问成功。

1) 项目列表地址:http://www.baidu.com/server/webMonitorIdList
2)数据展示地址:http://www.baidu.com/webfunny/overview.html

第五步、添加执行权限

正常情况下 createTable.sh, restart.sh 这两个脚本没有执行权限,需要用户手动授权。
linux、mac系统,需要在项目根目录下执行命令$:chmod 755 createTable.sh, chmod 755 restart.sh 进行授权。
其他操作系统,请自行搜索授权方式
【注意】如果不授权,可能无法自动创建每天的数据库表

1. Nginx代理配置

很多情况下,我们是不想在请求的URI中包含端口号的,所以我们一般会用nginx代理8011,8010两个端口号。
1. 用80端口代理8011,8010两个端口号(可支持http),并且代理socket

                  // http相关配置,server 在http内部
                  http {
                    ...
                    map $http_upgrade $connection_upgrade {
                      default upgrade;
                       ''   close;
                    }
                    server {
                      ...
                    }
                  }

                  server {
                    listen 80;
                    server_name www.baidu.com;
                    root /home/jiangyingwei/webWorks/website;
                    index /home.html;
                  
                    location /webfunny/ {
                      proxy_pass http://www.baidu.com:8010/webfunny/;
                      proxy_redirect default ;
                    }
                    # webfunny_server 数据接口等反向代理
                    location /server/ {
                        proxy_pass http://www.baidu.com: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;
                    }
                    # 代理socket, 否则debug模式无法连通
                    location /socket/ {
                        proxy_pass http://www.baidu.com:8011/socket/;
                        proxy_connect_timeout 3000;
                        proxy_send_timeout 3000;
                        proxy_set_header Host $http_host;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_http_version 1.1;
                        proxy_set_header Upgrade $http_upgrade;
                        proxy_set_header Connection $connection_upgrade;
                    }
                  }
                  

 

2. 用443端口代理8011,8010两个端口号(可支持https)

server {
                      listen         443 ssl;
                      server_name  www.baidu.com;  #网站域名,和80端口保持一致
                      root /home/jiang/webWorks;
                      index /index.html;
                      #          ssl             on;
                      ssl_certificate /etc/nginx/cert/3120409_www.baidu.com.pem;       #证书公钥
                      ssl_certificate_key  /etc/nginx/cert/3120409_www.baidu.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;
                  
                      # 数据接口等代理
                      location /server/ {
                          proxy_pass http://www.baidu.com: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://www.baidu.com:8010/webfunny/;
                          proxy_redirect default ;
                      }
                  }
                  

 

posted @ 2020-10-13 11:22  believe66  阅读(1365)  评论(0编辑  收藏  举报