웹 전단 오류 모니터링

프로젝트 개발 이 완 료 된 후에 모니터링 시스템 이 하나 도 없 었 다. 우 리 는 발 표 된 코드 가 사용자 기기 에서 정확 한 지 알 기 어렵 기 때문에 전단 코드 성능 과 관련 된 모니터링 시스템 을 구축 해 야 한다.
그래서 우 리 는 다음 과 같은 모듈 을 만들어 야 한다.
1. 스 크 립 트 수집 오류

function error(msg,url,line){
   var REPORT_URL = "xxxx/cgi"; //          
   var m =[msg, url, line, navigator.userAgent, +new Date];//       ，             ，      ，  
   var url = REPORT_URL + m.join('||');//           URL
   var img = new Image;
   img.onload = img.onerror = function(){
      img = null;
   };
   img.src = url;//        cgi
}
//       
window.onerror = function(msg,url,line){
   error(msg,url,line);
}

백 스테이지 시스템 을 관리 함으로써 우 리 는 페이지 의 매번 잘못된 정 보 를 볼 수 있 고 이런 정 보 를 통 해 우 리 는 신속하게 위 치 를 정 하고 문 제 를 해결 할 수 있다.
 
html 5 performance 정보 수집
performance 는 실행 이 완 료 된 전체 수명 주기 에 페이지 를 불 러 오 는 서로 다른 실행 절차 의 실행 시간 을 포함 합 니 다.performance 관련 글 은 다음 을 클릭 합 니 다: performance API 를 사용 하여 페이지 성능 을 모니터링 합 니 다.
navigationStart 에 비해 단계별 시간 차 를 계산 하면 해당 배경 CGI 를 통 해 수집 할 수 있다.

function _performance(){
   var REPORT_URL = "xxxx/cgi?perf=";
   var perf = (window.webkitPerformance ? window.webkitPerformance : window.msPerformance ),
      points = ['navigationStart','unloadEventStart','unloadEventEnd','redirectStart','redirectEnd','fetchStart','domainLookupStart','connectStart','requestStart','responseStart','responseEnd','domLoading','domInteractive','domContentLoadedEventEnd','domComplete','loadEventStart','loadEventEnd'];
   var timing = pref.timing;
   perf = perf  ? perf : window.performance;
   if( perf  && timing ) {
      var arr = [];
      var navigationStart = timing[points[0]];
      for(var i=0,l=points.length;i

배경 인터페이스 수집 과 통 계 를 통 해 우 리 는 페이지 의 실행 성능 에 대해 상세 하 게 알 수 있다.
3. 각 페이지 의 JS 와 CSS 로 딩 시간 통계
JS 나 CSS 를 불 러 오기 전에 타임 스탬프 를 찍 고 불 러 온 후에 타임 스탬프 를 찍 고 데 이 터 를 백 엔 드 에 보고 합 니 다.불 러 오 는 시간 은 페이지 의 흰색 화면 을 반영 하고 조작 가능 한 대기 시간 입 니 다.

var cssLoadStart = +new Date




   var cssLoadTime = (+new Date) - cssLoadStart;
   var jsLoadStart = +new Date;





   var jsLoadTime = (+new Date) - jsLoadStart;
   var REPORT_URL = 'xxx/cgi?data='
   var img = new Image;
   img.onload = img.onerror = function(){
      img = null;
   };
   img.src = REPORT_URL + cssLoadTime + '-' + jsLoadTime;

참고 자료:
 
html5 performance en
html5 performance cn
javascript onerror api