Sentry-javascript: 비동기 로드 및 오류 캡처

+1

+1

+1

+1

이에 대해 언급한 모든 사람 - @karolisdzeja의 솔루션에 문제가 있습니까?

궁극적으로 Raven.js 소스가 페이지에 없을 때 작동해야 하는 기능을 Raven.js 소스에 어떻게 추가할 수 있는지 잘 모르겠습니다. 나는 이것이 항상 궁극적으로 맞춤형 솔루션이 될 것이라고 생각합니다. 기껏해야 문서에 "방법"을 추가할 수 있습니다.

@benvinegar 솔루션은 괜찮아 보이지만 이것이 공식적으로 지원되고 문서화된다면 더 좋을 것입니다. 무작위 요점을 평가하는 것보다 Sentry 팀을 신뢰하는 것만으로도 만족합니다.

실제로 훨씬 더 나은 솔루션은 Twitter의 JS SDK 코드와 같은 것입니다. https://dev.twitter.com/web/javascript/loading

페이지 로드 시 함수 대기열을 설정한 다음 외부 js가 로드될 때 사용되어 프록시 개체를 교체합니다. 그리고 모든 API 호출이 프록시에 대한 .ready() 호출과 같은 것을 통과하는지 확인하십시오.

이렇게 하면 모든 함수를 개별적으로 프록시할 필요 없이 captureMessage가 아니라 js가 로드되기 전에 모든 호출을 대기열에 넣을 수 있습니다.

raven.js를 비동기/지연으로 로드할 수 있기를 원하며 걱정할 필요가 없습니다.

요점의 다른 문제: window.onerror를 방해하고 포함되지 않은 몇 가지 전역 변수를 도입합니다.

또한 raven.js가 로드될 때 사용하는 모든 기능을 갖춘 traceKitWindowOnError 함수를 사용하지 않습니다.

위의 요점을 약간 다시 수정했습니다. https://gist.github.com/oroce/ec3786ba7eff59963842220c3ffc56b4

누수 변수가 없습니다. window.onerror 핸들러를 유지했지만 자유롭게 window.addEventListener('error', fn) .

현재 가장 큰 도움은 traceKitWindowOnError 를 Raven에서 내보낸 함수로 사용하는 것입니다. 이것이 오류가 발생할 때 호출되는 함수이기 때문에: https://github.com/getsentry/raven-js/blob/master/dist/raven.js#L2074

나는 우리에게 적절한 스택 추적이 없을 것이라는 것을 알고 있지만 우리는 지금 가지고 있는 것보다 더 나은 것을 갖게 될 것입니다.

이렇게 하면 다른 단점이 있습니다.

• Raven이 로드되기 전에 오류를 포착하기 위해 window.onerror 에 의존함으로써 모든 브라우저에서 스택 추적을 사용할 수 없습니다.
  
  
  
  • 스택 추적이 없는 것 외에도 그룹화에 부정적인 영향을 미칩니다.
  
  
  • 이것이 install() 가 계측을 시도/캐치하는 이유입니다.
  
  
• 합성 추적은 작동하지 않습니다(모두 이 코드에서 시작된 것으로 나타남).
• 탐색경로 수집 없음

따라서 잠재적으로 더 나은 성능을 낮은 품질의 오류 보고서와 교환하고 있습니다. 비동기 실행이 중요한 경우 Raven을 고유한 코드와 함께 번들로 제공하여 함께 제공하는 것이 좋습니다.

@benvinegar 당신이 완전히 옳았습니다. 공개되지 않은 애플리케이션(일명 Google은 페이지에 도달하지 않음)에서는 고전적인(차단) 까마귀 방식은 완전히 문제가 없지만 Google 페이지 인사이트 포인트가 중요한 공개 사이트가 있는 즉시 최적화해야 합니다. 제3자 코드를 로드하는 방법(이것은 ux, 속도 및 더 나은 검색 결과 위치를 위해 지불할 용의가 있는 가격입니다).

또한 raven을 번들로 묶는 것이 해결책이지만 factor-bundle 과 같은 도구를 사용하여 번들을 여러 개로 분할하거나 더 빠른 속도를 얻기 위해 여러 번들을 포함하는 것과 같이 접을 수 없는 최적화로 프론트엔드 코드를 최적화하는 즉시, 위의 솔루션이 더 나은 방법이 될 수 있지만 제안을 위해 열려 있습니다.

그들은 모두 장단점이 있으므로 사용 가능한 모든 전략을 문서화할 수 있다면 좋을 것이므로 특정 웹 응용 프로그램에 따라 다른 전략을 적용할 것입니다.
비동기 전략을 사용하면 비동기만 로드하는 대신 onload 이벤트 이후에 스크립트를 로드하여 onload 이벤트 렌더링을 차단하지 않도록 해야 합니다.

/**
 * Setup Js error lazy tracking
 * - Pros: doesn't block rendering, onload event
 * - Cons: lower quality error reports for lazy errors
 *
 * <strong i="9">@author</strong> vinhlh
 *
 * <strong i="10">@param</strong>  {object} window
 * <strong i="11">@param</strong>  {object} labJs
 * <strong i="12">@param</strong>  {string} ravenCdn
 * <strong i="13">@param</strong>  {string} sentryDsn
 */
(function(window, labJs, ravenCdn, sentryDsn) {
  var errors = [];
  var oldOnError = window.onerror;

  window.onerror = function() {
    errors.push(arguments);
    oldOnError && oldOnError.apply(this, arguments);
  };
  window.addEventListener('load', function() {
    labJs
      .script(ravenCdn)
      .wait(function() {
        window.onerror = oldOnError;
        Raven.config(sentryDsn).install();
        errors.forEach(function(args) {
          window.onerror.apply(this, args);
        });
      });
  });
})(window, $LAB, 'raven-js-3.8.1/dist/raven.js', 'https://[email protected]/9');

위에 제공된 것과 같은 비동기 스니펫을 문서화할 것이라고 생각하지만 여기에는 장단점이 있습니다.

다른 의견 하나만 더. 이러한 절충안은 수용 가능한 것처럼 보일 수 있지만, 저는 Raven.js에서 파생된 것으로 (잘못) 믿어지는 저충실도 오류에 대한 사용자의 많은 지원 티켓을 처리합니다. 사람들에게 비동기 방식을 사용하도록 권장하면 "스택 추적이 없는 이유는 무엇입니까?"라고 묻는 사람들이 점점 더 많아지고 이 방식이 충실도가 낮기 때문에 다른 불만 사항이 생길까봐 두렵습니다. 나는 그것을 기꺼이 받아들이지만 삼키기 힘든 알약입니다. 😓

@benvinegar 나는 당신이 어디에서 왔는지 완전히 알았습니다. 나는 내가 무엇을하고 있는지 알고 있으므로 스택 추적이 없어야 할 때 스택

@oroce – 예, 이것은 이 스레드에 있는 사람들과 100% 관련이 없지만 주의 사항을 올바르게 이해하지 않고 이 전략을 추구할 수 있는 사람들(예: 복사/붙여넣기)입니다.

Install 문서에 스니펫을 추가할 계획과 함께 이 문제를 계속 공개하고 여기저기에 많은 경고를 표시하겠습니다.

여기에 참여해 주셔서 다시 한 번 감사드립니다.

다음은 Raven 메서드에 대한 호출을 투명하게 대기열에 넣는 데 사용하는 스니펫입니다. https://gist.github.com/Kl0tl/ed0a9e74462a2294f4c8842f5389d8ea.

모의는 확실히 개선될 수 있지만 더 많은 기능을 복제할 필요가 없습니다. Object.defineProperty 는 Raven 가 창에 연결된 직후 후크를 허용하지만 스크립트 로드 이벤트로 충분할 수 있습니다. 이것을 가능하게 하는 공식적인 방법이 있으면 좋을 것입니다.

여러분, Raygun이 비동기적으로 수행하는 방식에 문제가 있는지 궁금하십니까?
잘 모르겠지만 엣지 케이스를 잘 처리하는 것 같죠? 틀릴 수도 있지만 :)

@Kl0tl 아주 좋아요, 감사합니다

이것은 동적 가져오기를 사용하여 매우 간단합니다. 아직 stage3에 있지만 webpack에서 지원합니다.

우리는 단순히 약속을 대기열로 사용합니다. 가득 차면 모든 콜백이 순서대로 실행됩니다.

const RavenPromise = import('raven-js'); // async load raven bundle

// initial setup
RavenPromise.then(Raven => {
    Raven.config('url-to-sentry', options).install();
}):

// exported log function
export const logMessage = (level, logger, text) => {
    RavenPromise.then(Raven => {
        Raven.captureMessage(text, {level, logger});
    });
};

@zanona 와 마찬가지로 Raygun 또는 Google Analytics 와 같은 간단한 추적 코드를 사용하는 것을 선호합니다. 다음은 analytics.js 의 예입니다.

<script async src="https://www.google-analytics.com/analytics.js"></script>
<script>
    window.ga = window.ga || function () {
        (ga.q = ga.q || []).push(arguments)
    }
    ga.l = +new Date

    ga('create', 'UA-XXXXX-Y', 'auto')
    ga('send', 'pageview')
</script>

@benvinegar Raven.js 에서 이와 같은 것이 가능합니까? 아마 미래에는?

@kireerik 그것은 확실히 구현될

@kamilogorek 훌륭하게 들립니다 (해결 방법이 솔루션으로 마음에 들지 않습니다). 괜찮아요!

관심 있는 사람을 위해 ravenjs를 비동기식으로 로드하는 또 다른 방법의 요점을 제시했습니다.
https://gist.github.com/MaxMilton/e2338b02b7381fc7bef2ccd96f434201

@oroce 의 코드 를 기반으로 하지만 주요 차이점은 더 나은 성능을 위해 문서 헤드에 일반 <script async src'='..."> 태그를 사용한다는 것입니다(브라우저는 리소스 가져오기를 더 일찍 예약할 수 있음). IIFE 및 기타 약간의 조정.

@MaxMilton 멋지네요 ! 나는 당신을 기반으로 나만의 맛을 만들었습니다.

<script async src="https://cdn.ravenjs.com/3.22.1/raven.min.js" crossorigin="anonymous" id="raven"></script>
<script>
    (function (sentryDataSourceName) {
        var raven = document.getElementById('raven')
        , isNotLoaded = true
        , errors = []
        raven.onreadystatechange = raven.onload = function () {
            if (isNotLoaded) {
                Raven.config(sentryDataSourceName).install()
                isNotLoaded = !isNotLoaded
                errors.forEach(function (error) {
                    Raven.captureException(error[4] || new Error(error[0]), {
                        extra: {
                            file: error[1]
                            , line: error[2]
                            , col: error[3]
                        }
                    })
                })
            }
        }
        window.onerror = function (message, source, lineNumber, colmnNumber, error) {
            if (isNotLoaded)
                errors.push([message, source, lineNumber, colmnNumber, error])
        }
    })('https://<key>@sentry.io/<project>')
</script>

질문이 있습니다.

• script 태그에 crossorigin 속성을 정의해야 합니까?
• 다른 솔루션 대신 jsut 오류 개체를 전달하는 것으로 충분합니까?

어떻게 생각해? 이에 대한 저자(@kamilogorek)의 의견은 무엇입니까?

@kireerik 스크립트에 crossorigin="anonymous" 를 넣으면 window.onerror 이벤트로 오류(해당 외부 스크립트에서)를 완전히 캡처할 수 있습니다. 또한 브라우저가 가져오기 요청과 함께 자격 증명을 보내는 것을 방지합니다. 이는 일반적으로 타사 리소스에서 원하는 것입니다. MDN 참조 1 , MDN 참조 2 .

오류를 전달하면 _대부분_ 작동합니다. 오래된 브라우저(예: Firefox 버전 31 이전)의 주의 사항은 columnNo 또는 Error Object 속성을 window.onerror 이벤트에 전달하지 않습니다. 따라서 정말 좋은 호환성을 원한다면 추가 작업을 수행해야 합니다. MDN 참조 .

편집: 보너스 팁: crossorigin 값 없이 입력하면 crossorigin="anonymous" 와 동일하게 처리됩니다.

참고로 저는 이전 요지 를 훨씬 더 생산 준비가 된 것으로 업데이트했습니다.

• 실제로 무슨 일이 일어나고 있는지 설명하는 많은 의견
• 큰 정리 + 설명 변수 이름 사용 (항상 좋은 보너스 :wink: )
• 전역 네임스페이스를 오염시키지 않도록 IIFE로 래핑
• 오류 배열 항목에 전달된 잘못된 매개변수 수정

모든 것을 이해하려면 요지를 참조하거나 빠른 복사+붙여넣기를 선호하는 경우 축소된 버전이 있습니다.

<!-- Sentry JS error tracking -->
<script async src="https://cdn.ravenjs.com/3.22.0/raven.min.js" crossorigin id="raven"></script>
<script>
(function(b,e,c,d){b.onerror=function(a,b,d,f,g){c||e.push([a,b,d,f,g])};b.onunhandledrejection=function(a){c||e.push([a.reason.reason||a.reason.message,a.type,JSON.stringify(a.reason)])};d.onreadystatechange=d.onload=function(){c||(c=!0,
Raven.config("___PUBLIC_DSN___").install(),
b.onunhandledrejection=function(a){Raven.captureException(Error(a.reason.reason||a.reason.message),{extra:{type:a.type,reason:JSON.stringify(a.reason)}})},e.forEach(function(a){Raven.captureException(a[4]||Error(a[0]),{extra:{file:a[1],line:a[2],col:a[3]}})}))}})(window,[],!1,document.getElementById("raven"));
</script>

<link rel="preconnect" href="https://sentry.io">

___PUBLIC_DSN___ 를 DSN으로 바꾸고 닫는 </head> 태그 근처의 머리 부분에 붙여넣습니다. 또는 <head> 및 <body> 태그를 더 이상 사용하지 않는 힙스터라면 중요한/앱 리소스(예: CSS) 뒤에 맨 위에 붙여넣기만 하면 됩니다. 이상적으로는 이 코드 다음에 로드된 스크립트에서 오류를 캡처할 수 있도록 다른 JavaScript 보다 먼저 있어야 합니다.

내 빠른 테스트에서는 문제가 없었으므로 기본 동기 버전보다 이것을 사용하지 않을 이유가 없습니다.

누구든지 더 나은 접근 방식에 대한 아이디어가 있으면 듣고 싶습니다.

수정: 이 댓글을 여러 번 수정해서 죄송합니다. 지금은 안정적인 수준입니다. 이 상태로 가져 오는 것이 재미있었습니다! : 스마일 :

https://docs.sentry.io/clients/javascript/install/#async - 로딩

센트리 라이브러리가 로드되면 오류 보고 품질이 로드하는 것과 정확히 동일합니다. (그렇다고 가정하고 그냥 확인)

또한 추가하고 싶은 문서에서 lib가 로드될 때까지 Raven을 사용할 수 없으며 옵션에 콜백 기능을 제공하여 사용자 컨텍스트 등을 설정할 수 있습니까?

@dalyr95에 동의합니다. 콜백 함수가 유용할 것입니다. 아마도 커스텀 레이븐 로드 이벤트일 것입니다.

@dalyr95와 비슷한 요청이 있습니다. 현재 setUserContext() 를 호출하는 유일한 방법은 기본 구성 개체에서 콜백을 전달할 수 있는 것만큼 깨끗하지 않은 로더 스니펫을 수정하는 것입니다.

안녕하세요, 문제를 신고해 주셔서 감사합니다.

우리는 SDK의 다음 주요 릴리스에 대한 작업을 진행 중입니다.
그 때문에 우리는 현재 버전(주요 또는 보안 버그 제외)에 대한 작업을 보류해야 했습니다.
가능한 한 빨리 모든 보고를 받을 수 있도록 노력할 것이므로 조금만 기다려 주십시오.

이해해 줘서 고마워,
건배!

내 솔루션은 .install() 호출 직후에 'undefined'!=k.setup&&k.setup(); 추가한 다음 게시물 초기화 코드로 setup 라는 함수를 SENTRY_SDK 했습니다.

비동기 로더를 사용하여 Raven.config 두 번째 인수로 전달하여 사용자 컨텍스트 및 기타 정보를 설정할 수 있었습니다.

<script>
    Raven.config("https://<mydsn>@sentry.io/<projectid>", 
      {"release":"0.3.1",
       "environment":"dev",
       "user": {"id":"7b031fa0-32ff-46fe-b94b-e6bc201c3c5f",
                "organisation-id":"b1a50c41-b85e-4c50-9cec-c55ff36cf6d1"}}).install();
</script>

이에 대한 모든 것이 이미 존재한다고 생각합니다. 문서화하는 것이 더 좋을 수 있습니다.

@danielcompton 은 백엔드 API를 통해서만 사용자 정보를 얻을 수 있습니까?