모든 JavaScript 오류를 잡아서 서버로 전송

전 세계적으로 JavaScript 오류를 처리 한 경험이 있는지 클라이언트 브라우저에서 서버로 보내는 지 궁금합니다.

내 요점이 분명하다고 생각합니다. 클라이언트 측에서 발생하는 모든 예외, 오류, 컴파일 오류 등을 알고 서버로 보내보고합니다.

나는 주로 head.js서버 측에 MooTools와 (JS 측) 및 Django를 사용하고 있습니다.

최근 Sentry 를 프로덕션에서 테스트 했으며 정상적으로 작동합니다 (JS 및 PHP와 같은 다른 언어)

1-오픈 소스입니다 (자신의 서버에 설치할 수 있습니다) 2- 무료 플랜을 사용할 수 있습니다 (100 보고서 / 일)

또는 서버에 설치하십시오 : github.com/getsentry

window.onerror를 확인했습니다.

예:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

true를 반환하면 기본 처리기가 실행되지 않으며 false를 반환하면 기본 처리기가 실행됩니다.

귀하의 웹 사이트에서 Google 웹 로그 분석을 사용하는 경우 내가하는 일을 할 수 있습니다.

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

위의 코드에 대한 몇 가지 의견 :

• 최신 브라우저의 경우 전체 스택 추적이 기록됩니다.
• 스택 추적을 캡처하지 않는 이전 브라우저의 경우 오류 메시지가 대신 기록됩니다. (제 경험에 따르면 초기 iOS 버전).
• 사용자의 브라우저 버전도 기록되므로 어떤 OS / 브라우저 버전에서 어떤 오류가 발생하는지 확인할 수 있습니다. 이는 버그 우선 순위 지정 및 테스트를 단순화합니다.
• 당신은, "analytics.js를"로 Google 웹 로그 분석을 사용하는 경우이 코드는 작동 이 같은 . 당신이 "gtag.js"를 사용하는 경우 대신, 다음과 같이 , 당신은 함수의 마지막 줄을 조정할 필요가있다. 자세한 내용은 여기를 참조하십시오 .

코드가 작성되면 사용자의 Javascript 오류를 보는 방법입니다.

1. Google 웹 로그 분석에서 Behavior섹션을 클릭 한 다음 Top Events보고서 를 클릭하십시오 .
2. 이벤트 카테고리 목록이 나타납니다. window.onerror목록을 클릭하십시오 .
3. Javascript 스택 추적 및 오류 메시지 목록이 표시됩니다. Secondary dimension단추 를 클릭하고 Event Label나타나는 텍스트 상자를 입력 하여 사용자의 OS / 브라우저 버전에 대한 열을 보고서에 추가하십시오 .
4. 보고서는 아래 스크린 샷과 같습니다.
5. OS / 브라우저 문자열을보다 사람이 읽을 수있는 설명으로 변환 하려면 https://developers.whatismybrowser.com/useragents/parse/에 복사하여 붙여 넣습니다.

타사 서비스를 사용하지 말고 직접 시도하십시오.

오류 처리기는 다음 시나리오를 포착 할 수 있습니다.

1. 잡히지 않은 TypeError를 캡처 할 수 없습니다
2. 잡히지 않은 ReferenceError를 캡처 할 수 없습니다. 예 : var.click ()
3. TypeError를 캡처 할 수 있습니다
4. 구문 오류를 캡처 할 수 있습니다
5. ReferenceError를 캡처 할 수 있습니다

자바 스크립트 오류를 ​​발견하려면 :

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

AngularJS 오류를 캡처하려면 :

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})

또한 http://jslogger.com 서비스가 도움이 될 수 있습니다.

클라우드에서 Javascript 오류 및 이벤트 로그

에서 http://jslogger.com/features :

이제부터는 사이트의 사용자 경험을 방해하는 모든 오류를 염탐 할 수 있습니다. 모든 Javascript 오류가 발생하여 나중에 디버깅 할 수있게됩니다.

면책 조항 : 서비스 / 회사와 관련이 없습니다.

Atatus 를 사용해 볼 수 있습니다 . 최신 웹 앱을위한 RUM (Real User Monitoring)과 함께 새로운 JavaScript 오류 추적 서비스입니다.

오류를 캡처 할뿐만 아니라 오류를 발생시킨 사용자 이벤트도 캡처합니다. 이렇게하면 끝에 오류를 재현하는 단계가 제공됩니다.

오류 캡처와 함께 페이지로드 시간을 캡처하여 지리적, 브라우저, 페이지 드릴 다운, 페이지 히스토그램, Ajax 모니터링 및 트랜잭션 모니터링과 같은 다양한 관점에서 페이지를 표시합니다.

https://www.atatus.com/

사용 가능한 문서 : https://www.atatus.com/docs

면책 조항 : 저는 Atatus의 웹 개발자입니다.

캐치되지 않는 라이브러리는 처리되지 않은 거부를 포함하여 무료로 좋은 방법 캡처 모든 JS 오류입니다.

이 새로운 서비스 인 http://rescuejs.com/을 확인하고 싶을 수도 있습니다 . https://bugsnag.com/

서버 측 코드를 직접 작성하지 않고도 모든 자바 스크립트 오류를 ​​기록 할 수 있습니다. 또한 브라우저 버전 등을 추적합니다.

나는 그들이 100 % "엔터프라이즈 준비"라고 생각할 지 모르겠지만 확실히 체크 아웃 할 가치가 있습니다.