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 ;
                      }
                  }