web monitoring

web-monitoring

[功能列表]

• 允許用戶創建多個監測站點
• 從不同維度統計用戶訪問情況
• 自定義查詢時間
• 多種圖表展示
• 支持自定義上報（js錯誤，api請求，性能信息）
• 用戶訪問路徑追踪
• 自定義閾值(註冊用戶)
• 自動報警功能，發送報警郵件提醒(註冊用戶)

---

[技術支持]

• 前端：Angular5+,ant-design
• 後端：Nodejs+Express
• 數據庫：Mongoose+MongoDB
• Docker：一鍵部署Docker環境

---

前端監控平台專注於Web 端體驗數據監控。監測Web 頁面的健康度的三個方面：

• 頁面打開速度（測速）
• 頁面穩定性（JS Error）
• 外部服務調用成功率（API）

然後從不同緯度去分析用戶體驗。

• 訪問頁面
• 訪問速度
• API請求
• 地理
• 終端

參考：

http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days

阿里雲前端監控

頁面打開速度

網絡耗時數據可以藉助前面提到Navigation Timing 接口獲取，與之類似的還有Resource Timing,可以獲取頁面所有靜態資源的加載耗時。通過此接口可以輕鬆獲取DNS、TCP、首字節、html 傳輸等耗時，Navigation Timing 的接口示意圖如下所示：

API請求

默認情況下，使用XMLHTTP攔截用戶請求，在請求成功/失敗後，統計時間，上報請求。 用戶可使用**__ml.api(api,success, time, code, msg)**手動上報。

 api:请求接口
 success:上传是否成功( true / false )
 time:耗时( ms )
 code:返回码
 msg:消息( string / object )

JS錯誤

默認情況下，使用window.onError去監聽用戶錯誤腳本，自動上報。 用戶使用的有些前端框架會捕獲js錯誤，錯誤信息不會拋至window.onError,這種情況需用戶手動調用。 例如在Angular2+，在你的框架全局捕獲錯誤的地方調用**__ml.error(errorObj)**

  export class MyErrorHandler implements ErrorHandler {
      handleError ( error ) {
        console . error ( error ) ;
        window . __ml && window . __ml . error && window . __ml . error ( error . stack ||     error ) ;
      }
    }
    @ NgModule ( {
      declarations : [ ] ,
      imports : [ ] ,
      providers : [ { provide : ErrorHandler , useClass : MyErrorHandler } ] ,
      bootstrap : [ ]
    } )
    export class AppModule { }

在Vue:

 import Vue from 'vue'
const errorHandler = ( error , vm ) => {
 console . error ( error ) ;
 window . __ml && window . __ml . error && window . __ml . error ( error ) ;
}
Vue . config . errorHandler = errorHandler ;
Vue . prototype . $throw = ( error ) => errorHandler ( error , this ) ;

如何使用(easy!!!)

網頁地址：WEB-MONITOR

第一步：在監控站點中創建一個站點。

第二步：複製應用配置中的探針到你需要監控的站點（index.html）頁面。大功告成！

貢獻者支持

您的支持，是我們最大的前進動力。

支付寶：

微信：