클라이언트 측 자바 스크립트 오류 로깅

양식이있는 페이지가 많은 프로젝트. 이것은 은행 업무 CRM 시스템의 백엔드이므로 작업 프로세스 중 오류가 캡처되어 조사됩니다. 서버 쪽에서 우리는 향상된 자바 예외 시스템을 가지고 있습니다. 그러나 클라이언트 쪽에서 오류가 발생하면 - javascript는 이제 IE에서 js 오류 창 또는 고급 사용자가 만든 페이지 캡쳐 화면입니다.클라이언트 측 자바 스크립트 오류 로깅

Javascript 코드에는 Jquery 기반 UI 확장과 하드 코딩 된 인라인 이벤트 처리기 및 함수가 모두 들어 있습니다.

그래서 모든 종류의 js 오류를 캡처하는 방법을 사용할 수 있는지 묻습니다. 일부 추가 라이브러리 또는 모질라 나 웹 콘솔의 stacktrace를 Chrome에서 실행할 수있는 기능이 있습니까?

출처

2012-06-29 shershen

이 링크를 참조하십시오 : http://openmymind.net/2012/4/4/You-Really-Should-Log-Client-Side-Error/ –

타밀어와 Alexanderb에게 감사 드려요.하지만 제 경우에는 ' 아웃소싱을 사용하고 내 네트워크 영역 서비스 내에 있지 않다 – shershen

나는 그것을 독자적으로 시도하지는 않았다. 그러나 그와 같은 솔루션은 흥미로울 것 같다 : https://www.proxino.com/ –

window.onerror을 조사하십시오. 오류를 포착하여 서버에보고하려는 경우 아마도 AJAX 요청을 시도 할 수 있습니다.

window.onerror = function(errorMessage, errorUrl, errorLine) { 
    jQuery.ajax({ 
     type: 'POST', 
     url: 'jserror.jsf', 
     data: { 
      msg: errorMessage, 
      url: errorUrl, 
      line: errorLine 
     }, 
     success: function() { 
      if (console && console.log) { 
       console.log('JS error report successful.'); 
      } 
     }, 
     error: function() { 
      if (console && console.error) { 
       console.error('JS error report submission failed!'); 
      } 
     } 
    }); 

    // Prevent firing of default error handler. 
    return true; 
}

출처

2012-06-29 07:06:45 voithos

여기에 조절 기능을 추가해야합니다. 클라이언트가 오류를} 성하는 루프에 빠지면, 클라이언트는 로깅 엔드 포인트를 신속하게 DOS합니다. 이 사례를 통해 훌륭한 사례를 확인하십시오. https://github.com/TrackJs/Tech-Demo –

dataType : "json" – 0fnt

contentType은 'application/json'이어야합니다. – Kildareflare

고통없는 구현을 원할 경우 this 사람의 자바 스크립트 코드를 앱에 넣으십시오. 그렇지 않으면 하나를 구현하려면 windowerror에 스택 트레이스를 얻으려면 this을 시도하고 ajax을 사용하여 오류를보고 할 수 있습니다. Anice way가 olark에 의해보고 된 오류를 추적하는 데 사용됩니다

출처

2012-06-29 07:12:24 Tamil

http://exceptionhub.com 해야 할 트릭입니다. http://errorception.com/ 디버깅에 많은 정보를 제공하지 않지만 좋은 것으로 보입니다.

proxino는 그들이 무엇을하고 있는지를 모르는 것처럼 보입니다. 마지막으로 내가 체크했을 때 onerror 이벤트를 기록하기 위해 logger 코드에서 완전한 jQuery를 포함하고 있습니다. JavaScript 오류를 기록하기 위해 클라이언트 측 JavaScript를 거의 이해하지 못하는 서비스는 신뢰하지 않습니다.

출처

2012-07-01 17:28:23

Proxino도 jQuery가없는 버전의 스크립트가 있지만 여전히 페이지에 jQuery를로드해야합니다. https://www.proxino.com/documentation –

나는 그것은 오류 및 스택 추적뿐만 아니라 전체 콘솔 출력을 캡처 할 수 있습니다 JsLog.me 서비스

을 사용하는 것이 좋습니다. 우리는 프로젝트에서이 도구를 사용하여 전체 콘솔 로그를 로깅하여 QA 팀이 문제를 재현 할 수있는 방법을 기록 할 수있게합니다. 또한 Chrome 콘솔과 같이 큰 JSON 개체에서도 잘 작동하며 검색 기능이 있습니다.

출처

2014-11-25 16:31:56

면책 조항 : 저는 자바를 비롯한 다양한 언어에 대한 충돌보고를 수행하는 오픈 소스 및 유료 서비스의 CEO 겸 작성자 인 Sentry입니다.

프론트 엔드 예외를 캡처하는 것은 꽤 어려울 수 있습니다. 테크놀러지가 향상되었지만 (브라우저 JS 엔진), 여전히 많은 한계가 있습니다.

서버 측 로깅 끝점이 필요합니다. 이를 악용 할 수 있으므로 다소 복잡합니다 (즉, PEN 테스터가 취약점을 노출하려고 시도 할 수 있음). 여기에도 CORS를 다룰 필요가 있습니다. 우리가 클래스에서 최고인 것처럼 분명히 Sentry를 추천 할 것입니다. 원한다면 서버를 오픈 소스로 직접 호스트 할 수 있습니다.
실제로 코드에서 오류를 캡처하는 구현은 매우 복잡합니다. 여러 가지 이유로 인해 window.onerror에 의존 할 수 없습니다 (주로 브라우저가 역사적으로 나쁜 정보를 여기에 제공하기 때문입니다). raven.js 클라이언트 (TraceKit을 기반으로 함)에서 수행하는 작업은 try/catch 문에서 줄 바꿈하는 여러 가지 기능을 패치합니다. 예 : window.setTimeout.이를 통해 대부분의 브라우저에서 전체 스택 추적을 생성하는 오류 처리기를 설치할 수 있습니다.
코드에 대한 소스 맵을 생성하고 데이터를 처리하는 서버가이를 지원하는지 확인해야합니다. Sentry는 표준을 통해 자동으로 긁어 모으거나 API을 통해 업로드 할 수있게하여이 작업을 수행합니다. 이것이 없으면 코드를 축소하는 것으로 가정하면 거의 쓸모 없게됩니다.
마지막으로 중요한 문제는 잡음입니다. 대부분의 브라우저 확장 프로그램은 스크립트에 직접 삽입되므로 노이즈를 필터링해야합니다. Google은 두 가지 방식으로이를 해결합니다. 무시할 패턴의 차단 목록 (예 : '스크립트 오류'가 가장 유용함)과 허용 할 도메인 목록 (예 : 'example.com')입니다. 우리는이 두 가지 조합이 효과적이라는 것을 발견했습니다. 대부분의 잡음을 제거하는 데 충분합니다. 서버에주의해야

어떤 것들은 :

클라이언트는 때때로 개방 (즉 봇, 또는 나쁜 사용자)를 유지하고 쓸모없는 데이터 나 간단한 오래 된 오류의 많은 양의 원인이됩니다.
서버가 이러한 이벤트의 연속을 처리하고 정상적으로 실패 할 수 있어야합니다. Sentry는 속도 제한 작업과 샘플링 데이터로이를 수행합니다.
예외는 브라우저 언어로 현지화되어 있으며 중앙 데이터베이스가 없으면 사용자가 직접 번역 할 수 있습니다.

출처

2015-06-25 01:26:48

Atatus은 JavaScript 오류를 캡처하고 오류 이전의 사용자 작업을 캡처합니다. 이렇게하면 오류를 더 잘 이해하는 데 도움이됩니다. Atatus은 단지 오류를 들어, 프론트 엔드 모니터링에 도움이뿐만 아니라 성능 (실제 사용자 모니터링)

https://www.atatus.com/

면책 조항 : 나는 Atatus에서 웹 개발자입니다.

출처

2015-07-08 14:40:00

클라이언트 측 자바 스크립트 오류 로깅

답변

관련 문제