web monitoring 다운로드 - web monitoring 소스 코드 다운로드

web monitoring

웹사이트 데이터

v1.0.0

다운로드

웹 모니터링

[기능 목록]

사용자가 여러 모니터링 사이트를 만들 수 있습니다
다른 차원에서 사용자 액세스 통계
사용자 정의 쿼리 시간
다양한 다이어그램
사용자 정의보고 (JS 오류, API 요청, 성능 정보)를 지원합니다.
사용자 액세스 경로 추적
사용자 정의 임계 값 (등록 된 사용자)
자동 경보 기능, 알람 이메일 알림 보내기 (등록 된 사용자)

[기술 지원]

프론트 엔드 : Angular5+, 개미 디자인
백엔드 : Nodejs+Express
데이터베이스 : Mongoose+Mongodb
Docker : Docker 환경의 원 클릭 배포

프론트 엔드 모니터링 플랫폼은 웹 경험 데이터 모니터링에 중점을 둡니다. 웹 페이지의 건강 모니터링의 세 가지 측면 :

페이지 오프닝 속도 (속도 측정)
페이지 안정성 (JS 오류)
외부 서비스 전화 성공률 (API)

그런 다음 다른 위도에서 사용자 경험을 분석하십시오.

페이지를 방문하십시오
액세스 속도
API 요청
지리학
단말기

참조 :

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

알리바바 클라우드 프론트 엔드 모니터링

페이지 오프닝 속도

앞서 언급 한 내비게이션 타이밍 인터페이스와 함께 네트워크 시간 소모 데이터를 얻을 수 있습니다. 마찬가지로 리소스 타이밍은 페이지에서 모든 정적 리소스의 시간이 소요되는로드를 얻을 수 있습니다. 이 인터페이스를 통해 DNS, TCP, First Byte, HTML 전송 및 기타 시간 소도를 쉽게 얻을 수 있습니다. 내비게이션 타이밍의 인터페이스 다이어그램은 다음과 같습니다.

파일 목록

API 요청

기본적으로 XMLHTTP는 사용자 요청을 가로 채는 데 사용되며 요청이 성공/실패한 후 시간을 계산하고 요청을보고합니다. 사용자는 ** __ ml.api (API, 성공, 시간, 코드, 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 ) ;