JS 오류 모니터링 총괄

머리말
오류 감 시 를 잘 하고 사용자 가 사용 할 때의 오류 로 그 를 보고 하면 우리 가 몇 가지 문 제 를 더욱 빨리 해결 하 는 데 도움 을 줄 수 있다.현재 오픈 소스 가 비교적 좋 은 전단 모니터링 은

https://docs.sentry.io/

그럼 전단 모니터링 은 어떻게 이 루어 졌 나 요?이것 을 알 고 싶다 면 전단 오류 가 어떤 것 으로 나 뉘 는 지, 어떻게 포획 처리 하 는 지 알 아야 한다.
전단 오 류 는 JS 가 실 행 될 때 오류, 자원 로드 오류, 인터페이스 오류 세 가지 로 나 뉜 다.
JS 실행 중 오류
JS 가 실 행 될 때 오 류 는 일반적으로 window. onerror 로 캡 처 되 지만, promise 가 reject 되 고 오류 정보 가 처리 되 지 않 았 을 때 던 지 는 오류 가 있 습 니 다.
1.1 일반적인 JS 실행 중 오류
window. onerror 와 window. addEventListener (error) 를 사용 하여 캡 처 합 니 다.

window.onerror = function (msg, url, lineNo, columnNo, error) 
    { 
       //   error  
    } 
 
    window.addEventListener('error', event =>  
    {  
       console.log('addEventListener error:' + event.target); 
    }, true); 
    // true         ，false         。  true false   

예:
https://jsbin.com/lujahin/edit?html,console,output button 을 누 르 면 오류 가 발생 했 습 니 다. 각각 window. oneror 와 window. addEventListener ('error') 에 의 해 캡 처 되 었 습 니 다.
1.2 Uncaught (in promise)
promise 가 reject 되 고 오류 정보 가 처리 되 지 않 았 을 때 unhandled rejection 을 던 집 니 다. 또한 이 오 류 는 window. onerror 와 window. addEvent Listener (error) 에 의 해 포착 되 지 않 습 니 다. 전문 적 인 window. addEvent Listener ('unhandled rejection') 로 캡 처 처리 해 야 합 니 다.

window.addEventListener('unhandledrejection', event => 
    { 
       console.log('unhandledrejection:' + event.reason); //         
    });

https://developer.mozilla.org...
예:
https://jsbin.com/jofomob/edit?html,console,output button 을 누 르 면 unhandled rejection 오 류 를 던 지고 이 오 류 는 window. addEventListener ('unhandled rejection') 에 의 해 만 캡 처 될 수 있 습 니 다.
1.3 console.error
일부 특수 한 상황 에서 console. error 를 캡 처 해 야 합 니 다. 캡 처 방식 은 window. console. error 를 다시 쓰 는 것 입 니 다.

var consoleError = window.console.error; 
window.console.error = function () { 
    alert(JSON.stringify(arguments)); //      
    consoleError && consoleError.apply(window, arguments); 
};

예:
https://jsbin.com/pemigew/edit?html,console,output
1.4 특별 설명 크로스 로그
크로스 스 크 립 트 error 가 무엇 입 니까?
https://developer.mozilla.org...
서로 다른 도 메 인 스 크 립 트 에서 문법 오류 가 발생 했 을 때 정보 유출 을 피하 기 위해 (bug 363897 참조) 문법 오류 의 세부 사항 은 보고 하지 않 고 간단 한 'Script error' 를 대신 합 니 다.일부 브 라 우 저 에 서 는 crossorigin 속성 을 사용 하고 서버 에 적절 한 CORS HTTP 응답 헤드 를 보 내 도록 요구 하면 이 동작 을 덮어 쓸 수 있 습 니 다.하나의 변경 방안 은 "Script error" 를 단독으로 처리 하 는 것 입 니 다. 오류 에 대한 자세 한 정 보 는 브 라 우 저 콘 솔 을 통 해서 만 볼 수 있 고 자 바스 크 립 트 를 통 해 접근 할 수 없습니다.
<p>예: & lt;a href="http://sandbox.runjs.cn/show/cmol0mjo">http://sandbox.runjs.cn/show/...</a> 페이지 를 열 고 콘 솔 을 열 어 주세요.이 페이지 는 각각 두 개의 서로 다른 도 메 인 js 스 크 립 트 를 불 러 왔 습 니 다. crossorigin 의 window. onerror 를 설정 하면 자세 한 오 류 를 보고 할 수 있 습 니 다. crossorigin 을 설정 하지 않 으 면 'script error' 만 보고 할 수 있 고 오류 정보 & lt 가 없습니다. /p>
</blockquote>
<h4>1.5 특별 설명 sourceMap & lt; /h4>
<p>온라인 상에 서 JS 는 일반적으로 압축 되 거나 포장 (webpack) 된 적 이 있 기 때문에 포장 한 파일 이 한 줄 밖 에 없 기 때문에 오 류 를 보고 하면 첫 줄 5000 열 에 JS 오류 가 발생 하여 조사 에 어려움 을 가 져 올 수 있 습 니 다.sourceMap 은 포 장 된 JS 파일 과 포 장 된 JS 파일 사이 의 매 핑 관 계 를 저장 하고 포 장 된 위치 에 따라 원본 파일 의 위 치 를 신속하게 분석 할 수 있 습 니 다.lt;/p>
<p>그러나 안전성 을 고려 하여 온라인 에 sourceMap 을 설정 하면 안전 하지 않 은 문제 가 존재 할 수 있 습 니 다. 사이트 사용자 들 이 사이트 소스 코드 를 쉽게 볼 수 있 기 때문에 이때. map 파일 은 회사 내 네트워크 방문 을 통 해 위험 & lt 를 낮 출 수 있 습 니 다.p>
<blockquote>
sourceMap 설정 devtool: 'inline - source - map'
<br>uglifyjs - webpack - plugin 을 사용 하면 sourceMap 을 true 로 설정 해 야 합 니 다.
<br>
<a href="https://doc.webpack-china.org/guides/development/#%E4%BD%BF%E7%94%A8-source-map">https://doc.webpack-china.org...</a>
</blockquote>
<h4>1.6 기타 & lt; /h4>
<p>1.6.1 sentry 는 모든 반전 함 수 를 try catch 로 한 층 & lt 를 패키지 합 니 다.br><a href="https://github.com/getsentry/raven-js/blob/master/src/raven.js">https://github.com/getsentry/raven-js/blob/master/src/raven.js</a></p>
<p>1.6.2 vue errorHandler<br><a href="https://vuejs.org/v2/api/#errorHandler">https://vuejs.org/v2/api/#errorHandler</a><br>그 원리 도 try catch 를 사용 하여 nextTick, $emit, watch, data 등 & lt 를 봉 인 했 습 니 다.br><a href="https://github.com/vuejs/vue/blob/dev/dist/vue.runtime.js">https://github.com/vuejs/vue/blob/dev/dist/vue.runtime.js</a></p>
<h3>2. 자원 로드 오류 & lt; /h3>
<p>window. addEventListener ('error') 를 사용 하여 캡 처 합 니 다. window. onerror 는 자원 로드 오류 & lt 를 캡 처 하지 못 합 니 다. /p>
<blockquote>
<a href="https://jsbin.com/rigasek/edit?html,console">https://jsbin.com/rigasek/edit?html,console</a> 그림 자원 불 러 오 는 중 오류 가 발생 했 습 니 다.이 때 는 window. addEventListener ('error') 만 캡 처 할 수 있 습 니 다.
<p>window. oneror 와 window. addEventListener (error) 의 공통점: 같은 점 은 window 의 js 가 실 행 될 때 오 류 를 포착 할 수 있 습 니 다.차이 점 은 1. 캡 처 된 오류 매개 변 수 는 2. window. addEventListener ('error') 와 달리 자원 로드 오 류 를 캡 처 할 수 있 지만 window. onerror 는 자원 로드 오류 & lt 를 캡 처 할 수 없습니다. /p>
<p>window. addEventListener ('error') 에서 캡 처 한 오류 입 니 다. target 을 통 해?..src || target?.href 는 자원 로드 오류 인지 js 가 실 행 될 때 오류 & lt 인지 구분 합 니 다. /p>
</blockquote>
<h3>3. 인터페이스 오류 & lt; /h3>
<p>모든 http 요청 은 xmlHttpRequest 나 fetch 를 기반 으로 합 니 다.따라서 전역 인터페이스 오 류 를 포착 하려 면 xml HttpRequest 나 fetch & lt 를 패키지 하 는 것 이 방법 입 니 다. /p>
<h4>3.1 패키지 xmlHttpRequest & lt; /h4>
<pre><code>if(!window.XMLHttpRequest) return;
var xmlhttp = window.XMLHttpRequest;
var _oldSend = xmlhttp.prototype.send;
var _handleEvent = function (event) {
if (event && event.currentTarget && event.currentTarget.status !== 200) {
/ / 사용자 정의 오류 보고}
}
xmlhttp.prototype.send = function () {
if (this['addEventListener']) {
this['addEventListener']('error', _handleEvent);
this['addEventListener']('load', _handleEvent);
this['addEventListener']('abort', _handleEvent);
} else {
var _oldStateChange = this['onreadystatechange'];
this['onreadystatechange'] = function (event) {
if (this.readyState === 4) {
_handleEvent(event);
}
_oldStateChange && _oldStateChange.apply(this, arguments);
};
}
return _oldSend.apply(this, arguments);
}</code></pre>
<h4>3.2 패키지 fetch & lt; /h4>
<pre><code>if(!window.fetch) return;
let _oldFetch = window.fetch;
window.fetch = function () {
return _oldFetch.apply(this, arguments)
.then(res => {
if (!res.ok) { // True if status is HTTP 2xx
/ / 오류 신고
}
return res;
})
.catch(error => {
/ / 오류 신고
throw error;
})
}</code></pre>
<h3>결론 & lt; /h3>
<ol>
<li>windows. onerror 를 사용 하여 JS 가 실 행 될 때 오류 & lt; /li>
<li>window. addEventListener ('unhandled rejection') 를 사용 하여 처리 되 지 않 은 promise reject 오류 & lt 를 캡 처 합 니 다. /li>
<li>다시 쓰기 console. error 캡 처 console. error 오류 & lt; /li>
<li>크로스 도 메 인 스 크 립 트 에 crossorigin = "anonymous" 를 설정 하여 크로스 도 메 인 스 크 립 트 오류 & lt 를 캡 처 합 니 다. /li>
<li>window. addEventListener ('error') 에서 자원 불 러 오 는 중 오류 가 발생 했 습 니 다.js 가 실 행 될 때 오 류 를 포착 할 수 있 기 때문에 js 가 실 행 될 때 오 류 를 반복 적 으로 보고 하지 않도록 이벤트. srcElement inatanceof HTML ScriptElement 또는 HTML LinkElement 또는 HTML ImageElement 만 보고 & lt; /li>
<li>window. XML HttpRequest 와 window. fetch 캡 처 요청 오류 & lt; / 다시 쓰기li>
</ol>
<p>상기 원 리 를 이용 하여 JS 모니터링 을 간단하게 작 성 했 고 JS 오류 만 처 리 했 으 며 성능 과 관련 된 모니터링 & lt 를 하지 않 았 습 니 다.br><a href="https://github.com/Lie8466/better-js">https://github.com/Lie8466/better-js</a></p>
<p>문장 에 오류 가 있 는 것 을 발견 하면 지적 을 환영 합 니 다.lt;/p>
</article>
</div>
</div>
</div>
<!--PC 와 WAP 자체 적응 버 전 -- & lt;
<div id="SOHUCS" sid="1356164395071254528"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">