Sentry-javascript: 이벤트: currentTarget, isTrusted, target, type 키로 캡처된 오류가 아닌 약속 거부

우리는 또한 지난 몇 주 동안 이것들을 보기 시작했습니다. 방금 조사하기 시작했기 때문에 원인에 대한 자세한 내용은 없습니다.

Sentry v5.15.5에서도 마찬가지입니다.

누군가 Sentry에서 캡처한 이러한 유형의 이벤트에 대한 링크를 제공할 수 있습니까? 스크립트 로딩 오류처럼 보입니다(이 이벤트가 트리거된 target 주목하세요)

@kamilogorek 회사 이메일을 보내주시겠습니까? 이벤트 사례를 공유할 수 있습니다.

@ 산타스 카밀 @ sentry.io

더 많은 예제가 필요하면 @kamilogorek 도

@sheelah 네, 부탁드립니다.

@sheelah 솔직히 말하면 여기서 개선할 수 있는 부분이 많지 않습니다. JS는 우리가 이미 제공하는 더 많은 정보를 제공하지 않습니다. Promise 개체의 인스턴스가 거부될 때마다 onunhandledrejection 이벤트를 트리거합니다(OP 설명의 onerror 마찬가지).

https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event

그러나 누군가가 거기에 임의의 물건을 전달하는 것을 막을 수있는 것은 없습니다.
따라서 Promise.reject("whatever") 또는 Promise.reject(jQueryBecauseWhyNot) 와 같은 코드는 완전히 유효한 JS 코드입니다.

원시 값이 아닌 것, 스택 추적을 포함하는 개체(예: Error ) 또는 내부 DOM 예외를 만날 때마다 간단한 개체 직렬화로 돌아가서 우리가 할 수 있는 모든 정보를 추출하려고 시도해야 합니다. 그것의. 이벤트 핸들러에 전달된 이 "임의의 값"이 취할 수 있는 가능한 경로 목록은 eventbuilder.ts 파일을 볼 수 있습니다. – https://github.com/getsentry/sentry-javascript/blob/master/packages/ 브라우저 /src/eventbuilder.ts#L17 -L80

불행히도 더 많은 유형의 입력을 처리하기 위해 더 일반적으로 만들 수 있는지 잘 모르겠습니다.
그 과정에 대한 피드백이 있는 사람이 있으면 제안을 받을 수 있습니다.

(다른 모든 사람들에게 대화를 공개하기 위해 귀하의 이메일 대신 여기에 답변을 드렸습니다.)

내 관찰에서 :

• 모바일 또는 데스크탑의 다양한 최신 Safari 버전에서만 발생합니다.
• ZXing 및 browser-image-compression 와 같은 몇 가지 라이브러리가 웹 앱에 설치되어 있지만 타사 추적 스크립트는 없습니다.
• API 호출이 네트워크 오류(코드 0)와 함께 실패하는 것과 정확히 같은 시간에 발생하는 것으로 보입니다.
• 제 경우에는 더 구체적으로 ProgressEvent 이벤트가 아니라 HTTP 요청 라이브러리의 일부인 것 같습니다(저는 axios를 사용하고 있습니다).

ADDITIONAL DATA

__serialized__ | {
    currentTarget: [object Null],
    isTrusted: [Circular ~],
    target: [object FileReader],
    type: error}
-- | --

또한 방금 "값: null로 캡처된 오류가 없는 약속 거부"라는 보고서를 받았습니다. 영향을 받는 사용자가 위에서 언급한 @anton-bot과 유사하게 Mac OS X 10.15.6에서 Safari 13.1.2를 사용하고 있었습니다.

reject( 호출에 대해 컴파일된 앱 코드에서 null 개체가 제공되었지만 찾을 수 없었기 때문에 브라우저 확장인지 아니면 세 번째인지 궁금합니다. 파티 스크립트. 스택 추적이나 이동 경로가 없기 때문에 정확히 무슨 일이 일어났는지 알기가 매우 어렵습니다.

또한 지난 2주 동안 이것을 보았습니다. 우리 사이트에서는 google maps javascript API를 사용하는 페이지에서만 보았기 때문에 관련이 있을 수 있다고 생각합니다. 다른 사람이 Google 지도를 사용하는 URL에서 이것을 보고 있습니까?

편집: 지금까지 iOS 및 Android에서 문제를 확인했습니다.

편집: 추가 데이터:

{
  currentTarget: [object Null], 
  isTrusted: [Circular ~], 
  target: head > script[type="text/javascript"], 
  type: error
}

@asbjornh 아니요 내 페이지에 Google 지도가 없습니다.

@kamilogorek OP의 추가 데이터(및 내)가 이와 같은 Promise.reject(new Event("error")) 로 인해 발생합니까? 아니면 이 상황에 대한 Sentry 이벤트에 항상 브라우저 이벤트처럼 보이는 페이로드가 있습니까?

- 예 @asbjornh, 그 다음이 흐름을 통해 갈 것 https://github.com/getsentry/sentry-javascript/blob/caff9e7b308f99f04443d57d990c252a51a153bf/packages/browser/src/eventbuilder.ts#L97 -L107

나는 또한 같은 오류가 발생합니다

이 오류로 인해 할당량 용량이 소진되었습니다.

지난 24시간 동안 289개의 이벤트가 있습니다. 아직 페이지가 활성화되지 않았습니다.

{
currentTarget: [object Null], 
isTrusted: [Circular ~], 
target: head > link, 
type: error
}

우리는 next.js를 사용하고 있습니다.

여기 cra와 동일 😂

이 문제의 원인은 대략 다음과 같습니다.

new Promise((resolve, reject) => {
  const script = document.createElement('script');
  script.src = src;
  script.onload = resolve;
  script.onerror = reject;
  document.body.appendChild(script);
});

onerror 후크는 실제로 위에서 언급한 이러한 문제를 일으키는 Error 인스턴스 대신 Event 개체를 수신합니다. 이것은 https://developer.mozilla.org/de/docs/Web/API/HTMLScriptElement 에서 제안한 대로 Event 를 Error 로 래핑하여 피할 수 있습니다.

new Promise((resolve, reject) => {
  const script = document.createElement('script');
  script.src = src;
  script.onload = resolve;
  script.onerror = event => {
    reject(new Error(`Failed to load ${event.target.src}`));
  };
  document.body.appendChild(script);
});

제 경우에는 누군가 비슷한 경우를 대비하여 Firefox에서 이를 일으키는 Next.js의 9.5.2 프리페칭 메커니즘이었습니다. (여기가 아닐까요? https://github.com/getsentry/sentry-javascript/issues/2546#issuecomment-697771381) 이것이 문제입니다: https://github.com/vercel/next.js/pull/16757 9.5.3 또는 Canary로 업그레이드하여 해결하십시오.

오류는 브라우저에서 훨씬 더 장황합니다.

Uncaught (in promise) 
error
bubbles: false
...
...
as: "fetch"
assignedSlot: null
attributes: NamedNodeMap(3
0: href="/_next/data/wmQYPCwvbuBulJfEwTMRf/smartwatches/fitbit-ionic.json"
1: rel="prefetch"
2: as="fetch"
as: as="fetch"
href: href="/_next/data/wmQYPCwvbuBulJfEwTMRf/smartwatches/fitbit-ionic.json"
length: 3
rel: rel="prefetch"
...
...
​
isTrusted: true
originalTarget: <link href="/_next/data/wmQYPCwvbuBu…tches/fitbit-ionic.json" rel="prefetch" as="fetch">
returnValue: true
srcElement: <link href="/_next/data/wmQYPCwvbuBu…tches/fitbit-ionic.json" rel="prefetch" as="fetch">​
target: <link href="/_next/data/wmQYPCwvbuBu…tches/fitbit-ionic.json" rel="prefetch" as="fetch">
timeStmp: 25366
type: "error"
...

Sentry가 이 데이터를 캡처하도록 하려면 어떻게 해야 합니까?

@Turbo87 네! 이것이 바로 @googlemaps/js-api-loader 사용하는 페이지에서만 표시되는 이유입니다. 그들은 당신이 여기에 설명하는 것을 정확히 하고 있습니다

감사합니다!!