javascript 자바스크립트 던지기 - JavaScript 예외 처리




4 Answers

모든 이벤트 핸들러를 할당하기 위해 jQuery 와 같은 라이브러리를 사용하는 경우 window.onerror 와 jQuery 이벤트 핸들러 코드를 래핑하고 오류 처리 함수가있는 준비 함수에 사용할 수 있습니다 ( JavaScript 오류 추적 : 왜 window.onerror 충분하지 않다 ).

  • window.onerror : IE (및 Firefox의 대부분의 오류)에있는 모든 오류를 포착하지만 Safari 및 Opera에는 아무런 영향을주지 않습니다.
  • jQuery 이벤트 핸들러 : 모든 브라우저에서 jQuery 이벤트 오류를 ​​포착합니다.
  • jQuery 준비 함수 : 모든 브라우저에서 초기화 오류를 포착합니다.
에러 종류

JavaScript 내에서 던져지는 모든 예외를 포착하는 가장 좋은 방법은 무엇입니까?

분명히 최고의 기술은 try ... catch를 사용하는 것입니다. 그러나 비동기 콜백 등으로 인해 까다로워 질 수 있습니다.

나는 IE와 Gecko 브라우저가 window.onerror를 지원한다는 것을 알고 있지만 Opera와 Safari는 어떨까요?

여기에 대한 중심 예외 처리 솔루션을 가지고 싶습니다 테스트 케이스 잔뜩 있습니다 :

// ErrorHandler-Test1
var test = null;
test.arg = 5;
// ErrorHandler-Test2
throw (new Error("Hello"));
// ErrorHandler-Test3
throw "Hello again";
// ErrorHandler-Test4
throw {
    myMessage: "stuff",
    customProperty: 5,
    anArray: [1, 2, 3]
};
// ErrorHandler-Test5
try {
    var test2 = null;
    test2.arg = 5;
} catch(e) {
    ErrorHandler.handleError(e);
}
// ErrorHandler-Test6
try {
    throw (new Error("Goodbye"));
} catch(e) {
    ErrorHandler.handleError(e);
}
// ErrorHandler-Test7
try {
    throw "Goodbye again";
} catch(e) {
    ErrorHandler.handleError(e);
}
// ErrorHandler-Test8
try {
    throw {
        myMessage: "stuff",
        customProperty: 5,
        anArray: [1, 2, 3]
    };
} catch(e) {
    ErrorHandler.handleError(e);
}

다른 테스트 케이스에 대해 생각해보십시오. 이 중 몇 가지 경우에는 ErrorHandler.handleError 메서드가 있습니다. try ... catch를 사용할 때 권장되는 지침 일뿐입니다.




사실, jquery 접근 방식은 그렇게 나쁘지 않습니다. 만나다:

http://docs.jquery.com/Events/error#fn

과:

$(window).error(function(msg, url, line){
  $.post("js_error_log.php", { msg: msg, url: url, line: line });
});



try-catch 가 항상 최상의 솔루션은 아닙니다. 예를 들어, Chrome 7.0에서는 콘솔 창에서 멋진 스택 추적을 잃게됩니다. 예외를 되 돌리는 것은 도움이되지 않습니다. 스택 추적을 보존하고 예외 상황에 대처할 수있는 솔루션에 대해서는 잘 모릅니다.




현대의 브라우저에서 Ajax 오류에 대한 jQuery 이벤트 핸들러를 추가하면서 window.onerror에 오류가 발생하면 클라이언트 코드에 던져지는 모든 Error 객체를 잡아낼 수 있습니다. window.onerror에 대한 핸들러를 수동으로 설정하는 경우 최신 브라우저에서는 window.addEventListener('error', callback) 를 사용하지만 IE8 / 9에서는 window.attachEvent('onerror', callback) .

이러한 오류가 처리되는 환경과 그 이유를 고려해야합니다. stacktraces에서 가능한 많은 오류를 잡는 것이 한 가지이지만, 현대 F12 개발 도구의 출현은 로컬에서 구현 및 디버깅 할 때이 사용 사례를 해결합니다. 중단 점 등은 처리기에서 사용할 수있는 것보다 많은 데이터를 제공합니다. 특히 CORS 요청에서로드 된 타사 라이브러리에서 발생하는 오류의 경우 더욱 그렇습니다. 브라우저에이 데이터를 제공하도록 지시하려면 추가 단계를 수행해야합니다.

주요 문제는 사용자가 테스트 할 수있는 것보다 훨씬 광범위한 브라우저 및 버전을 실행할 수 있으므로이 데이터를 프로덕션에 제공하는 것이고 사이트 / 앱은 예기치 않은 방식으로 중단됩니다. 그것.

이를 처리하려면 코드를 사용하는 사용자의 브라우저에서 발생하는 모든 오류를 찾아내어 데이터를 볼 수있는 끝점으로 보내고 오류가 발생했을 때 버그를 수정하는 데 사용되는 오류 추적기가 필요합니다. . Raygun (면책 조항 : 저는 Raygun에서 일하고 있습니다) 우리는 순진한 구현이 그리워 할 것이라고 생각할 많은 함정과 쟁점이 있기 때문에 이것을 위해 훌륭한 경험을 제공하기 위해 많은 노력을 기울였습니다.

예를 들어, JS 자산을 번들 및 축소 할 가능성이 있습니다. 즉, 축소 된 코드에서 발생하는 오류에는 변경된 변수 이름이있는 스팸 스택 추적이 발생합니다. 이를 위해서는 소스 맵 (파이프 라인의이 부분에 대해 UglifyJS2 권장)을 생성하는 빌드 도구와 오류 트래커가이를 받아 들여 처리해야하므로 맹 글링 된 스택 트레이스를 사람이 읽을 수있는 스택 트레이스로 되돌릴 수 있습니다. Raygun은이 모든 작업을 수행하며 빌드 프로세스에서 생성 된 소스 맵을 받아들이는 API 엔드 포인트를 포함합니다. 이는 비공개로 유지해야 할 때 중요합니다. 그렇지 않으면 누구나 코드를 손상시켜 목적을 무효화 할 수 있습니다.

raygun4js 클라이언트 라이브러리에는 최신 브라우저와 레거시 브라우저 모두에서 window.onerror 가 함께 제공되며 jQuery는 즉시 사용할 수있는 훅 (hook)을 제공하므로이를 설정하려면 다음을 추가하면됩니다.

<script type="text/javascript" src="//cdn.raygun.io/raygun4js/raygun.min.js" </script> <script> Raygun.init('yourApiKey').attach(); </script>

오류 페이로드가 전송되기 전에이를 변경하고, 오류를 본 사용자에게 태그 및 사용자 정의 데이터, 메타 데이터를 추가하는 기능을 포함하여 많은 기능이 내장되어 있습니다. 또한 위에서 언급 한 써드 파티 CORS 스크립트에서 좋은 스택 추적을 얻는 데서 고통을 겪습니다.이 스크립트는 두려운 '스크립트 오류'(오류 메시지가없고 스택 추적이 없음)를 해결합니다.

더 중요한 문제는 웹에있는 많은 잠재 고객으로 인해 사이트에서 각 오류에 대해 수천 개의 중복 인스턴스가 생성된다는 것입니다. Raygun 과 같은 오류 추적 서비스는 이러한 오류를 오류 그룹으로 분류하여 눈물 을 흘리지 않도록하며, 실제 오류를 바로 잡을 준비가되었는지 확인할 수 있습니다.




Related