如果你是一位前端工程師，那你一定不止一次去解決一些頑固的線上問題，你也曾想方設法復現使用者的bug，結果可能都不太理想。 怎樣定位前端線上問題，一直以來，都是很頭疼的問題，因為它發生於使用者的一系列操作之後。錯誤的原因可能源於機型，網路環境，複雜的操作行為等等，在我們想要去解決的時候很難復現出來，自然也就無法解決。
身為一名前端工程師，我每天都要面臨很多線上的問題，一時間讓我焦頭爛額。公司其他的監控系統也有，但是每次解決問題都需要輾轉於各種監控系統之間，亦是疲憊不堪。所以，我便為自己（前端工程師）量身定做了這樣一款監控系統，歡迎點選了解和使用。
webfunny是一套完整的前端監控系統方案，只需要簡單幾步就可以將這套監控系統移植到你自己的伺服器上。
webfunny經壓力測試，可以支援千萬級別日pv量，能夠滿足更多使用者的場景需求。
webfunny是私有化部署，所有的日誌資料都存在使用者的資料庫中，沒有任何數量限制，也不會依賴我們的任何服務
webfunny提供了很多報警機制，使用者可以自己修改**，決定報警時機。
1. 專案總覽；監控系統支援多個專案，讓所有專案的狀態都一目了然。通過對線上專案的實時分析，讓我們可以對線上狀況有個非常直觀的了解。例如pv、uv資料變化趨勢，留存變化，頁面停留時間，線上報錯、異常等
2. 使用者細查；深入分析每乙個使用者，記錄下每個使用者的所有行為。由於線上使用者的操作行為十分複雜，有些問題可能隱藏在很多次操作之後，所以探針記錄了使用者的很多操作行為，一旦出現問題，復現bug也將變得非常簡單。 同時，可以使用多種檢索條件進行搜尋，提高查詢效率。
3. 自定義埋點；使用者可以自定義埋點，webfunny會將其記錄下來，並定時分析。同時可以對多個埋點步驟進行漏斗分析，可以清晰的看到步驟之間的轉化率，留存率等等。
4. 錯誤分析；精細化分析每乙個報錯問題，支援sourcemap原始碼定位。通過探針監控和上報線上環境的報錯，以及一些自定義異常。我們對這些日誌進行精確的分析，可以準確定位到**的問題所在。同時能夠看到每乙個報錯的變化趨勢，也能夠分析出使用者在哪一步操作中發生了問題。
5. 效能分析；分析頁面和介面效能，載入耗時，成功率。探針對頁面的載入效能進行分析，直觀反映在報表之上。也對介面的效能進行了分析，如：耗時、成功率等。
6. 無線除錯功能；強大的除錯功能，讓你從繁雜的除錯工具中解脫出來。無線除錯功能可以讓你隨時線上使用者，實時了解使用者的行為、控制台列印資訊、本地快取資訊等等。
請安裝nodejs，版本號：10.6.0及以上。
1.本地轉殖**
使用碼雲倉庫（github網路不穩定，可以使用碼雲位址）
2.在專案根目錄下執行初始化命令和安裝命令$：npm run init && npm install
3.確認是否安裝了pm2，如果沒有安裝pm2，請執行安裝命令$：npm install pm2 -g
1. 安裝 mysql 資料庫（mysql安裝教程）
2. 建立資料庫（webfunny_db）
建立資料庫：webfunny_db。
字符集設定：[default character set]：utf8、 [default collation]：utf8_bin
3. 資料庫連線配置
進入webfunny_monitor/bin/mysqlconfig.js檔案中
module.exports =}
第三步、本地部署執行
1. ip位址或者網域名稱配置（方式一）
進入webfunny_monitor/bin/domain.js檔案中（注意，對應的埠號要保持一致）
ip位址配置方式：
module.exports =
網域名稱配置方式：
module.exports =
配置完成後，瀏覽器訪問以下位址，確保能夠訪問成功。
module.exports =
正常情況下 createtable.sh, restart.sh 這兩個指令碼沒有執行許可權，需要使用者手動授權。
linux、mac系統，需要在專案根目錄下執行命令$：chmod 755 createtable.sh， chmod 755 restart.sh 進行授權。
其他作業系統，請自行搜尋授權方式
【注意】如果不授權，可能無法自動建立每天的資料庫表
很多情況下，我們是不想在請求的uri中包含埠號的，所以我們一般會用nginx**8011，8010兩個埠號。
1. 用80埠**8011，8010兩個埠號（可支援http），並且**socket
//http相關配置，server 在http內部
# webfunny_server 資料介面等反向**
location /server/
# **socket, 否則debug模式無法連通
location /socket/
}
2. 用443埠**8011，8010兩個埠號（可支援https）
server# 頁面服務**
location /webfunny/
}
前端md5加密 Ohbug 前端監控系統開源第二彈
依據資料的流向，我大概繪製了乙個架構圖 這裡解釋一下幾個核心模組的功能 首先看一眼 event 的資料結構 inte ce ohbugeventevent 通過 sdk 收集上來以後，通過 nginx 給 transfer。為了方便儲存，transfer 需要對不確定資料型別的字段預處理為字串，這裡...
numberprogressbar開源專案的介紹
開源位址為 android studio 新增 compile com.daimajia.numberprogressbar library 1.2 aar 就可以。使用也非常的簡單 如下 com.daimajia.numberprogressbar.numberprogressbar androi...
textLayoutBuilder開源專案簡介
android新的開源專案，build text layouts easily on android.看起來簡潔清晰 附圖1.初始化textlayoutbuilder 2.呼叫build 獲取布局 layout layout builder.build 3.使用layout 是不是很簡單 附加用法 ...