web monitoring

monitor web

[Daftar Fungsi]

• Izinkan pengguna untuk membuat beberapa situs pemantauan
• Statistik akses pengguna dari dimensi yang berbeda
• Waktu kueri khusus
• Berbagai diagram
• Mendukung Pelaporan Kustom (Kesalahan JS, Permintaan API, Informasi Kinerja)
• Pelacakan jalur akses pengguna
• Ambang Kustom (Pengguna Terdaftar)
• Fungsi Alarm Otomatis, Kirim Pengingat Email Alarm (Pengguna Terdaftar)

---

[Dukungan Teknis]

• Front-end: Angular5+, Ant-Design
• Backend: Nodejs+Express
• Database: Mongoose+MongoDB
• Docker: Penyebaran satu klik lingkungan Docker

---

Platform pemantauan front-end berfokus pada pemantauan data pengalaman web. Tiga aspek pemantauan kesehatan halaman web:

• Kecepatan pembukaan halaman (pengukuran kecepatan)
• Stabilitas halaman (kesalahan JS)
• Tingkat Keberhasilan Panggilan Layanan Eksternal (API)

Kemudian analisis pengalaman pengguna dari lintang yang berbeda.

• Kunjungi halaman
• Kecepatan akses
• Permintaan API
• geografi
• terminal

Lihat:

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

Pemantauan Front-End Alibaba Cloud

Kecepatan pembukaan halaman

Data yang memakan waktu jaringan dapat diperoleh dengan antarmuka waktu navigasi yang disebutkan di atas. Demikian pula, waktu sumber daya dapat memperoleh pemuatan semua sumber daya statis yang memakan waktu pada halaman. Melalui antarmuka ini, Anda dapat dengan mudah mendapatkan DNS, TCP, byte pertama, transmisi HTML dan yang memakan waktu lainnya. Diagram antarmuka waktu navigasi adalah sebagai berikut:

Permintaan API

Secara default, XMLHTTP digunakan untuk mencegat permintaan pengguna, dan setelah permintaan berhasil/gagal, menghitung waktu dan melaporkan permintaan tersebut. Pengguna dapat melaporkan secara manual menggunakan ** __ ML.API (API, Sukses, Waktu, Kode, MSG) **.

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

Kesalahan JS

Secara default, Window.onError digunakan untuk mendengarkan skrip kesalahan pengguna dan secara otomatis melaporkannya. Beberapa kerangka kerja front-end yang digunakan oleh pengguna akan menangkap kesalahan JS, dan pesan kesalahan tidak akan dilemparkan ke window.onerror. Situasi ini mengharuskan pengguna untuk memanggilnya secara manual. Misalnya di Angular2+, hubungi ** __ ml.error (errorobj) ** Di mana kerangka kerja Anda secara global menangkap kesalahan

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

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

Cara menggunakan (mudah !!!)

Alamat halaman web: monitor web

Langkah 1: Buat situs di situs pemantauan.

Langkah 2: Salin probe di konfigurasi aplikasi ke halaman Situs (Index.html) yang perlu Anda pantau. Misi selesai!

Dukungan Kontributor

Dukungan Anda adalah motivasi terbesar kami untuk bergerak maju.

Alipay:

Wechat wechat: