Window.onerror를 사용하여 JavaScript 오류를 캡처하고보고합니다-JS 튜토리얼-php.cn

Capture and Report JavaScript Errors with window.onerror

코어 포인트

는 ucted JavaScript 오류가 발생했을 때 트리거되는 브라우저 이벤트입니다. 클라이언트 오류를 쉽게 로그어 서버에보고하는 방법을 제공합니다. 모든 최신 브라우저는이 이벤트를 지원하지만 구현 세부 사항은 다양합니다.

window.onerror
오류를 포착 한 후 마지막 단계는 오류 메시지를 서버로 전송하는 것입니다. 이를 위해서는 HTTP를 통해 오류 데이터를 수신하고 파일에 로그인하거나 데이터베이스에 저장하는 보고서 웹 서비스를 설정해야합니다. 서비스가 다른 도메인에있는 경우 CORS (Cross-Domain Resource Sharing)를 지원해야합니다. window.onerror
는 끊임없는 JavaScript 오류가 발생할 때마다 트리거되는 특수 브라우저 이벤트입니다. 클라이언트 오류를 기록하여 서버에보고하는 가장 쉬운 방법 중 하나입니다. 이것은 또한 Sentry의 클라이언트 JavaScript 통합 (RAVEN-JS)의 주요 메커니즘 중 하나입니다. window.onerror

오류가 발생하면 다음 매개 변수가 함수로 전달됩니다.

- "uncught referenceError : foo가 정의되지 않은"오류와 관련된 메시지 " "/dist/app.js"와 같은 오류와 관련된 스크립트 또는 문서의 URL - 줄 번호 (사용 가능한 경우) - 열 번호 (사용 가능한 경우) -이 오류와 관련된 오류 객체 (사용 가능한 경우)

처음 네 매개 변수는 어떤 스크립트, 행 및 열이 발생하는지 알려줍니다. 마지막 매개 변수 인 오류 객체는 아마도 가장 가치가있을 것입니다. 이유를 이해합시다. window.onerror

오류 객체 및 오류 언뜻보기에 오류 객체는 특별하지 않습니다. 메시지, 파일 이름 및 LineNumber의 3 가지 정규화 된 속성이 포함되어 있습니다. 이러한 중복 값은 를 통해 제공되었습니다.

귀중한 부분은

비 표준 속성 : 입니다. 이 스택 속성은 오류가 발생할 때 각 프로그램 프레임의 소스 위치를 알려줍니다. 오류 스택 추적은 디버깅의 핵심 부분이 될 수 있습니다. 비표준이지만이 속성은 모든 최신 브라우저에서 제공됩니다. 다음은 Chrome 46의 오류 객체에 대한 스택 속성의 예입니다. Error.prototype.stack 읽기가 어렵습니다. 스택 속성은 실제로 형식화되지 않은 문자열입니다.

다음은 서식 후 모양입니다.

포맷 후 스택 속성이 디버그 오류를 돕는 데 어떻게 중요한지 쉽게 알 수 있습니다.

단 하나의 문제 만 있습니다. 스택 속성은 비표준이며 다른 브라우저에서의 구현도 다릅니다. 예를 들어, 다음은 Internet Explorer 11의 동일한 스택 트레이스입니다.

window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}

로그인 후 복사

각 프레임의 형식은 다를뿐만 아니라 세부 사항이 적습니다. 예를 들어, Chrome은 새로운 키워드가 사용되었으며 Eval Call에 대한 더 깊은 이해가 있음을 인식합니다. 이는 IE 11과 Chrome의 비교 일뿐입니다. 다른 브라우저에는 다른 형식과 세부 사항도 비슷합니다.

운 좋게도 스택 속성을 정규화하여 브라우저에서 일관되게 할 수있는 도구가 있습니다. 예를 들어, Raven-JS는 TraceKit을 사용하여 오류 문자열을 정상화합니다. stacktrace.js와 다른 프로젝트가 있습니다.

<<> 브라우저 호환성

<code>"Error: foobar\n    at new bar (<anonymous>:241:11)\n    at foo (<anonymous>:245:5)\n    at <anonymous>:250:5\n    at <anonymous>:251:3\n    at <anonymous>:267:4\n    at callFunction (<anonymous>:229:33)\n    at <anonymous>:239:23\n    at <anonymous>:240:3\n    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)\n    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)"
</anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></code>

로그인 후 복사

<<>는 브라우저에서 잠시 동안 주변에있었습니다. IE6 및 Firefox 2와 같은 오래된 브라우저에서 찾을 수 있습니다.

문제는 각 브라우저가 다른 방식으로, 특히 oneRror 리스너에게 전송 된 매개 변수의 수와 이러한 매개 변수의 구조에 대해

를 구현한다는 것입니다.

다음은 대부분의 브라우저에서 OnError로 전달되는 매개 변수 테이블입니다.

<code>Error: foobar
    at new bar (<anonymous>:241:11)
    at foo (<anonymous>:245:5)
    at callFunction (<anonymous>:229:33)
    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
</anonymous></anonymous></anonymous></anonymous></anonymous></code>

로그인 후 복사

인터넷 익스플로러 8, 9 및 10에서

에 대한 제한된 지원은 놀라운 일이 아닐 수 있습니다. 그러나 Safari가 Safari 10 (2016 년에 발표)까지 오류 객체에 대한 지원을 추가하지 않았다는 사실에 놀랄 것입니다. 또한 여전히 스톡 Android 브라우저 (현재 Chrome Mobile으로 대체)를 사용하는 레거시 모바일 장치는 여전히 존재하며 오류 객체가 전달되지 않습니다. onerror 오류 객체가 없으면 스택 추적 속성이 없습니다. 이는 이러한 브라우저가 <🎜 🎜>에 의해 캡처 된 오류에서 귀중한 스택 정보를 검색 할 수 없음을 의미합니다.

<🎜 🎜> <<> 창에 폴리 필을 제공하려면 시도/캐치를 사용하십시오 그러나 해결 방법이 있습니다. 응용 프로그램의 코드를 시도/캐치 블록으로 랩핑하고 오류를 직접 잡을 수 있습니다. 이 오류 객체에는 모든 최신 브라우저에서 꿈꾸는 스택 속성이 포함됩니다.

일련의 매개 변수를 사용하여 객체의 함수를 호출하는 다음 도우미 방법을 고려하십시오. onerror 다음은 다시 호출됩니다.

물론 어디서나 수동 으로이 작업을 수행하는 것은 매우 성가신 일입니다. 일반적인 래퍼 유틸리티 기능을 만들어 단순화 할 수 있습니다.

JavaScript는 단일 스레드이기 때문에 모든 곳에서 래퍼를 사용할 필요가 없습니다. 각 새 스택부터 시작하십시오. 이것은 함수 선언을 랩핑해야한다는 것을 의미합니다. 응용 프로그램 시작시 (예 : jQuery를 사용하는 경우 <🎜 🎜>) <🎜 🎜> 이벤트 핸들러 (예 : <🎜 🎜> 또는

) <🎜 🎜 <🎜 <🎜 <🎜 타이머 기반 콜백 (예 : <🎜 🎜> 또는 <🎜 🎜 <🎜) <🎜 🎜>

예 : <🎜 🎜>

이것이 많은 작업처럼 보이면 걱정하지 마십시오! 대부분의 버그보고 라이브러리에는 <🎜 🎜> 및 <🎜 🎜>와 같은 내장 기능을 향상시키는 메커니즘이 있으므로 매번 직접 래퍼 유틸리티를 호출 할 필요가 없습니다. 예, Raven-JS도 똑같이합니다. invoke

<<> 서버로의 전송 오류 <🎜

window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ... 处理错误 ...

  return false;
}

로그인 후 복사

<🎜 🎜> Ok, 당신은 당신의 작업을 수행했습니다 - 당신은

를 삽입했으며, 또한 시도/캐치 블록으로 함수를 래과하여 가능한 한 많은 오류 정보를 캡처했습니다. invoke 마지막 단계 중 하나만 남아 있습니다. 오류 메시지를 서버로 전송하십시오. 이 작업을 수행하려면 HTTP를 통해 오류 데이터를 수신 할 수있는 일종의보고 웹 서비스를 설정하고 파일에 로그인하거나 데이터베이스에 저장해야합니다.

이 웹 서비스가 웹 애플리케이션과 동일한 도메인에 있으면 xmlhttprequest 만 사용하십시오. 다음 예에서는 JQuery의 Ajax 기능을 사용하여 서버로 데이터를 전송합니다.

<code>"Error: foobar\n    at new bar (<anonymous>:241:11)\n    at foo (<anonymous>:245:5)\n    at <anonymous>:250:5\n    at <anonymous>:251:3\n    at <anonymous>:267:4\n    at callFunction (<anonymous>:229:33)\n    at <anonymous>:239:23\n    at <anonymous>:240:3\n    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)\n    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)"
</anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></anonymous></code>

로그인 후 복사

다른 소스에서 오류를 전송 해야하는 경우보고 엔드 포인트는 크로스 도메인 리소스 공유 (CORS)를 지원해야합니다.

<🎜 🎜> <<> 요약

<code>Error: foobar
    at new bar (<anonymous>:241:11)
    at foo (<anonymous>:245:5)
    at callFunction (<anonymous>:229:33)
    at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
</anonymous></anonymous></anonymous></anonymous></anonymous></code>

로그인 후 복사

이 작업을 수행 한 경우 이제 자신의 기본 오류보고 라이브러리를 스크롤하여 응용 프로그램과 통합하는 데 필요한 모든 도구가 있습니다.

어떻게

캡처를 위해 시도/캐치를 사용하는 방법 window.onerror 누락 된 스택 트레이스

오류 데이터를 서버로 전송합니다

물론,이 모든 것을 귀찮게하고 싶지 않다면, 고객을 위해 모든 클라이언트보고를 할 수있는 많은 상업용 및 오픈 소스 도구가 있습니다. (SHH : JavaScript를 디버그하기 위해 Sentry를 사용해 보시고 싶을 수도 있습니다.) window.onerror 그게 다야! 행복한 오류 모니터링.

window를 사용하여 FAQS (FAQ)를 사용하여 JavaScript 오류를 캡처하고보고하기 위해 Onerror

기능은 JavaScript에서 어떻게 작동합니까?

JavaScript의 이벤트는 JavaScript 코드를 실행할 때 오류가 발생할 때 트리거되는 글로벌 이벤트 핸들러입니다. 강력한 디버깅 및 오류 처리 도구는 예외 또는 런타임 오류를 잡고보고 할 수 있으므로 강력한 디버깅 및 오류 처리 도구입니다. 오류가 발생하면 오류 메시지, 오류가 발생한 경우 URL, 줄 번호, 열 번호 및 오류 개체의 5 가지 매개 변수로 함수가 호출됩니다.

JavaScript에서

와 Try-Catch의 차이점은 무엇입니까?

및 Try-Catch는 모두 JavaScript의 오류 처리에 사용되지만 다르게 작동합니다. Try-Catch 문을 사용하면 시도 블록에 오류를 던질 수있는 코드를 포장 한 다음 캐치 블록의 오류에 응답하여 오류를 직접 처리 할 수 있습니다. 반면에 는 런타임 오류가 발생할 때 트리거되는 글로벌 이벤트 핸들러입니다. Try-Catch 블록에서 미끄러지는 오류를 포착하는보다 일반적인 오류 처리 메커니즘입니다.

JavaScript 오류를 잡으려면

를 사용하는 방법은 무엇입니까? 를 사용하려면

를 사용하려면 오류가 발생할 때 호출 될 함수를 정의해야합니다. 이 함수는 오류 메시지, 오류가 발생한 URL, 줄 번호, 열 번호 및 오류 객체의 5 가지 매개 변수를 가져와야합니다. 이 기능 내에서 필요에 따라 오류를 처리 할 수 있습니다. 예를 들어, 콘솔에 오류를 기록하거나 서버에 보고서를 보내거나 사용자에게 메시지를 표시 할 수 있습니다.

`window.onerror` 모든 유형의 JavaScript 오류가 잡힐 수 있습니까?

window.onerror는 강력한 오류 처리 도구이지만 몇 가지 제한 사항이 있습니다. 가장 끊임없는 런타임 오류를 포착 할 수는 있지만, 트리 캐치 블록에 던져지고 잡힌 예외를 포착 할 수는 없습니다. 또한 네트워크 오류 또는 CORS 오류와 같은 특정 유형의 오류가 이벤트를 트리거하지 않을 수 있습니다. window.onerror 에서 오류 객체를 사용하는 방법?

오류 객체는 함수로 전달 된 다섯 번째 매개 변수입니다. 오류 메시지, 오류 이름 및 스택 추적을 포함하여 오류에 대한 정보가 포함되어 있습니다. 이 객체를 사용하여 오류에 대한 자세한 정보를 얻을 수 있으며, 이는 디버깅 또는 오류보고에 매우 유용합니다. `window.onerror` JavaScript의 스택 추적은 무엇입니까?

스택 추적은 오류가 발생할 때 프로그램 실행 경로에 대한 정보를 제공하는 보고서입니다. 오류를 일으키는 기능 호출 순서가 표시되므로 디버깅에 매우 유용합니다. JavaScript에서는 오류 객체에서 스택 추적을 얻을 수 있습니다.

JavaScript에서 스택 추적을 얻는 방법은 무엇입니까? window.onerror JavaScript에서는 오류 객체에서 스택 추적을 얻을 수 있습니다. 오류가 발생하면 오류 객체가 생성되어

함수로 전달됩니다. 이 객체에는 스택 트레이스가 포함 된 스택이라는 속성이 있습니다. 이 속성에 액세스하여 스택 추적을 얻을 수 있습니다.

를 사용하여 오류를 서버에보고 할 수 있습니까?

예,

를 사용하여 서버에 오류를보고 할 수 있습니다. 함수 내에서 오류 메시지로 서버에 요청을 보낼 수 있습니다. 이는 실시간으로 사용자의 오류 데이터를 수집하고 분석 할 수 있으므로 모니터링 및 디버깅에 매우 유용합니다.

CORS 오류를 처리하기 위해

를 사용하는 방법은 무엇입니까?

CORS 오류 또는 크로스 도메인 리소스 공유 오류는 웹 애플리케이션이 다른 도메인에서 리소스에 액세스하려고 할 때 발생합니다. 이러한 오류는 보안 관련이며 보안상의 이유로 window.onerror 이벤트 핸들러에 세부 사항이 제공되지 않습니다. 그러나 CORS 오류가 발생할 수있는 특정 네트워크 요청에 오류 처리기를 추가하여 이러한 오류를 처리 할 수 있습니다.

를 사용하기위한 모범 사례는 무엇입니까?