前端性能監控平臺

web-monitoring

[功能列表]

• [x] 容許用戶建立多個監測站點
• [x] 從不一樣維度統計用戶訪問狀況
• [x] 自定義查詢時間
• [x] 多種圖表展現
• [x] 支持自定義上報（js錯誤，api請求）
• [ ] 自定義閾值
• [ ] 自動報警功能

---

[技術支持]

• [x] 前端：Angular5+,ant-design
• [x] 後端：Nodejs+Express
• [x] 數據庫：MondoDB

---

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

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

而後從不一樣緯度去分析用戶體驗。

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

參考：

http://fex.baidu.com/blog/201...

阿里雲前端監控

頁面打開速度

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

API請求

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

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）頁面。大功告成！

喜歡請點個讚唄

或者去https://github.com/kisslove/w... Star一下

或者打賞一下

再或者……

哈哈，想法有點多了。