ดาวน์โหลด web monitoring - ดาวน์โหลดซอร์สโค้ด web monitoring

web monitoring

ข้อมูลเว็บไซต์

v1.0.0

ดาวน์โหลด

การตรวจสอบเว็บ

[รายการฟังก์ชั่น]

อนุญาตให้ผู้ใช้สร้างเว็บไซต์ตรวจสอบหลายแห่ง
สถิติการเข้าถึงผู้ใช้จากมิติที่แตกต่างกัน
เวลาสอบถามที่กำหนดเอง
ไดอะแกรมต่างๆ
รองรับการรายงานที่กำหนดเอง (ข้อผิดพลาด JS, คำขอ API, ข้อมูลประสิทธิภาพ)
การติดตามเส้นทางการเข้าถึงผู้ใช้
เกณฑ์ที่กำหนดเอง (ผู้ใช้ที่ลงทะเบียน)
ฟังก์ชั่นการเตือนภัยอัตโนมัติส่งการแจ้งเตือนอีเมลเตือนภัย (ผู้ใช้ที่ลงทะเบียน)

[การสนับสนุนทางเทคนิค]

front-end: Angular5+, ant-design
แบ็กเอนด์: NodeJS+Express
ฐานข้อมูล: Mongoose+MongoDB
Docker: การปรับใช้สภาพแวดล้อม Docker เพียงคลิกเดียว

แพลตฟอร์มการตรวจสอบส่วนหน้ามุ่งเน้นไปที่การตรวจสอบข้อมูลประสบการณ์เว็บ สามด้านของการตรวจสอบสุขภาพของหน้าเว็บ:

ความเร็วในการเปิดหน้า (การวัดความเร็ว)
ความเสถียรของหน้า (ข้อผิดพลาด JS)
อัตราการโทรภายนอกบริการ (API)

จากนั้นวิเคราะห์ประสบการณ์ผู้ใช้จากละติจูดที่แตกต่างกัน

เยี่ยมชมหน้า
ความเร็วในการเข้าถึง
คำขอ API
ภูมิศาสตร์
เทอร์มินัล

อ้างถึง:

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

การตรวจสอบส่วนหน้าของ Alibaba Cloud

ความเร็วในการเปิดหน้า

ข้อมูลที่ใช้เวลาในเครือข่ายสามารถรับได้ด้วยอินเทอร์เฟซเวลาการนำทางดังกล่าว ในทำนองเดียวกันเวลาของทรัพยากรสามารถรับการโหลดเวลาที่ใช้เวลานานของทรัพยากรคงที่ทั้งหมดในหน้า ผ่านอินเทอร์เฟซนี้คุณสามารถรับ DNS, TCP, BYTE First, HTML ได้อย่างง่ายดายและใช้เวลานาน ไดอะแกรมอินเทอร์เฟซของช่วงเวลาการนำทางมีดังนี้:

รายชื่อไฟล์

คำขอ API

โดยค่าเริ่มต้น XMLHTTP จะใช้เพื่อสกัดกั้นคำขอของผู้ใช้และหลังจากคำขอสำเร็จ/ล้มเหลวให้นับเวลาและรายงานคำขอ ผู้ใช้สามารถรายงานด้วยตนเองโดยใช้ ** __ ml.api (API, ความสำเร็จ, เวลา, รหัส, ผงชูรส) **

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