web monitoringダウンロード - web monitoringソースコードのダウンロード

web monitoring

ウェブサイトデータ

v1.0.0

ダウンロード

Webモニタリング

[機能リスト]

ユーザーが複数の監視サイトを作成できるようにします
さまざまな寸法からのユーザーアクセスの統計
カスタムクエリ時間
さまざまな図
カスタムレポート（JSエラー、APIリクエスト、パフォーマンス情報）をサポートします
ユーザーアクセスパストラッキング
カスタムしきい値（登録ユーザー）
自動アラーム機能、アラームメールリマインダー（登録ユーザー）の送信

[テクニカルサポート]

フロントエンド：Angular5+、Ant-Design
バックエンド：nodejs+express
データベース：Mongoose+Mongodb
Docker：Docker環境のワンクリック展開

フロントエンド監視プラットフォームは、Webエクスペリエンスデータの監視に焦点を当てています。 Webページの健康を監視する3つの側面：

ページの開口速度（速度測定）
ページの安定性（JSエラー）
外部サービス通話成功率（API）

次に、さまざまな緯度からユーザーエクスペリエンスを分析します。

ページにアクセスしてください
アクセス速度
APIリクエスト
地理
ターミナル

参照：

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

Alibabaクラウドフロントエンドモニタリング

ページの開口速度

前述のナビゲーションタイミングインターフェイスでは、ネットワーク時間のかかるデータを取得できます。同様に、リソースのタイミングは、ページ上のすべての静的リソースの時間のかかる負荷を取得できます。このインターフェイスを介して、DNS、TCP、First Byte、HTML送信、およびその他の時間がかかる時間を簡単に取得できます。ナビゲーションタイミングのインターフェイス図は次のとおりです。

ファイルリスト

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