최신 웹 앱에 고급 오류 추적 및 실제 사용자 모니터링을 제공하는 Atatus 를 사용해보십시오 .
https://www.atatus.com/
모든 브라우저에서 합리적으로 완전한 스택 추적을 얻는 방법을 설명하겠습니다.
JavaScript에서 오류 처리
최신 Chrome 및 Opera는 ErrorEvent 및에 대한 HTML 5 초안 사양을 완벽하게 지원합니다 window.onerror. 이 두 브라우저에서 모두를 사용 window.onerror하거나 '오류'이벤트에 올바르게 바인딩 할 수 있습니다 .
// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
console.log(message, "from", error.stack);
// You can send data to your server
// sendError(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (e) {
console.log(e.error.message, "from", e.error.stack);
// You can send data to your server
// sendError(data);
})
불행히도 Firefox, Safari 및 IE는 여전히 사용 중이며 우리도이를 지원해야합니다. 스택 트레이스를 사용할 수 없으므로window.onerror 없으므로 조금 더 많은 작업을 수행해야합니다.
오류로부터 스택 트레이스를 얻기 위해 할 수있는 유일한 방법은 모든 코드를 try{ }catch(e){ }블록 으로 감싸고 를 보는 것 e.stack입니다. 우리는 wrap이라는 함수를 사용하여 프로세스를 좀 더 쉽게 만들 수 있습니다.이 함수는 함수를 취하고 오류 처리 기능이 좋은 새 함수를 반환합니다.
function wrap(func) {
// Ensure we only wrap the function once.
if (!func._wrapped) {
func._wrapped = function () {
try{
func.apply(this, arguments);
} catch(e) {
console.log(e.message, "from", e.stack);
// You can send data to your server
// sendError(data);
throw e;
}
}
}
return func._wrapped;
};
작동합니다. 수동으로 포장하는 모든 기능에는 오류 처리 기능이 우수하지만 대부분의 경우 실제로 자동으로 수행 할 수 있습니다.
addEventListener콜백을 자동으로 감싸도록 전역 정의를 변경하면 try{ }catch(e){ }대부분의 코드 주위에 자동으로 삽입 할 수 있습니다 . 이를 통해 기존 코드는 계속 작동하지만 고품질 예외 추적이 추가됩니다.
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
또한 removeEventListener계속 작동 하는지 확인해야 합니다. 현재에 대한 인수 addEventListener가 변경 되지 않았기 때문 입니다. 다시 우리는이 문제를 해결해야합니다prototype 객체에서 :
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
오류 데이터를 백엔드로 전송
다음과 같이 이미지 태그를 사용하여 오류 데이터를 보낼 수 있습니다
function sendError(data) {
var img = newImage(),
src = 'http://yourserver.com/jserror&data=' + encodeURIComponent(JSON.stringify(data));
img.crossOrigin = 'anonymous';
img.onload = function success() {
console.log('success', data);
};
img.onerror = img.onabort = function failure() {
console.error('failure', data);
};
img.src = src;
}
면책 조항 : 저는 https://www.atatus.com/ 의 웹 개발자 입니다.
