Sentry-javascript: 키로 캡처된 비 오류 예외: 오류, 헤더, 메시지, 이름, 확인

이것은 제공하는 객체가 Angular 앱에서 스택 추적을 보유하는 Error 의 인스턴스가 아님을 의미합니다.

(메시지가 가리키는 대로) 필요에 따라 Sentry.captureException(error.error) 또는 Sentry.captureException(error.message) 사용해야 합니다.

@kamilogorek 오케이 ) tnx

@kamilogorek 은 이 오류가 계속 발생합니다.

    const exception = error.error || error.message || error.originalError || error;
    const eventId = Sentry.captureException(exception);

+1, 어떻게 넣어도 이 오류가 계속 발생합니다.

sentry.error-handler.ts

export class SentryErrorHandler extends GeneralErrorHandler {
  ...
  handleError(error) {
    ...
    const exception = error.originalError || error.error || error
    Sentry.captureException(exception)
  }
}

패키지.json

{
  ...
  "@angular/core": "^8.2.11",
  "@sentry/browser": "^5.7.1",
  ...
}

나는 이것을하기로 결정했다

Sentry.init({
            dsn: environment.sentryUrl,
            beforeSend(event, hint) {
                /* tslint:disable:no-string-literal only-arrow-functions */
                const isNonErrorException =
                    event.exception.values[0].value.startsWith('Non-Error exception captured') ||
                    hint.originalException['message'].startsWith('Non-Error exception captured');
                /* tslint:enable:no-string-literal only-arrow-functions */

                if (isNonErrorException) {
                    // We want to ignore those kind of errors
                    return null;
                }
                return event;
            }
        });

@gchronos 해결 방법에 감사드립니다! 조만간 수정 가능성이 있기를 바랍니다.

나에게도 이러한 오류가 발생한다고 말하면서 소리를 지르십시오. 저는 Angular 8을 사용하고 있으며 이에 대한 몇 가지 문제를 읽은 후 오류 처리 구성 요소에서 오류를 제대로 처리하지 못하는 경우일 수 있음을 깨달았습니다. captureException에 전달되기 전에 예외를 정의하는 다른 사람들이 제안한 해결 방법을 시도했지만 오류가 줄어들지 않았습니다. 누군가 이에 대해 추가 정보를 제공하거나 GChronos의 (감사합니다!) 솔루션을 사용해야 하는 경우에 좋을 것입니다.

+1

+1

누군가가 이것을 디버깅하는 데 사용할 수있는 재현을 제공 할 수 있습니까? 기본 angular-cli 앱을 사용하려고 했지만 이 동작을 재현할 수 없습니다. 감사 해요!

@kamilogorek 나는 당신이 새로운 Angular 8 프로젝트를 시작하고 500을 반환하는 끝점을 향해 http 요청을 할 수 있다고 믿습니다. 그리고 Sentry로 전파되도록 http 서비스에서 오류를 포착하지 못합니다.

좀 더 많은 정보를 알려드릴 수 있습니다. 이것은 우리의 ErrorHandler입니다.

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() { }
  handleError(error) {
    Sentry.captureException(error.originalError || error.error || error);
  }
}

Sentry 추적에서는 항상 다음 이벤트에 대해 중복 이벤트를 받습니다.

• Object.a 키로 캡처된 오류가 아닌 예외: ...
• captureException 키로 캡처된 오류가 아닌 예외: ...

(다른 이벤트는 목록의 한 항목으로 정상적으로 보고됨)

우리는 수백 개의 "Non.Error" 이벤트를 수집했으며 흥미롭게도 이들 모두에는 다음과 같은 공통점이 있습니다.

• 브라우저 이름: 삼성 인터넷 100%
• 브라우저: 삼성 인터넷 9.4 100%

그리고 오류는 대부분 다음과 같습니다.

{
  error: [Object], 
  headers: [Object], 
  message: Http failure during parsing for https://foo.bar/baz, 
  name: HttpErrorResponse, 
  ok: False, 
  status: 200, 
  statusText: OK, 
  url: https://foo.bar/baz
}

좋아, SentryErrorHandler를 주입 가능하게 렌더링하고 확장 대신 ErrorHandler를 구현했으며 더 이상 그런 문제가 없습니다.
그래서 나는

export class SentryErrorHandler extends ErrorHandler {

 constructor() {
     super();
 }

 handleError(err: any): void {
     if (environment.production === true || environment.preprod === true) {
         Sentry.captureMessage(err.originalError || err);
     }
     throw err;
 }
}

에게

@Injectable()
export class SentryErrorHandler implements ErrorHandler {

 constructor() { }

 handleError(err: any): void {
     if (environment.production === true || environment.preprod === true) {
         Sentry.captureException(err.originalError || err);
     }
     throw err;
 }
}

나는 문제 없이 2년 동안 첫 번째 구성을 가지고 있었지만 Angular 8로 업그레이드한 이후로 몇 가지 센트리 예외가 있습니다.

@jonathan-payiq 이 문제의 원인을 찾을 수 있습니까? 아니면 지금 오류가 아닌 예외를 모두 무시합니까?

우리는 현재 그것들을 무시하고 있습니다.
우리는 웹뷰/브라우저가 백그라운드(보이지 않음)에 있을 때 이러한 일이 발생한다는 것을 브레드크럼에서 알아냈으므로 페이지가 표시되지 않는 동안 가져오기가 발생하지 않도록 수정했습니다. 분명히 삼성 브라우저는 백그라운드에서 네트워크 새로 고침을 잘못 처리합니다.

@jonathan-payiq 정확히 어떻게 무시합니까? 미리 감사드립니다.

우리는 현재 그것을 무시하기 위해 다음을 사용하고 있습니다.

Sentry.init({
  ignoreErrors: [
    'Non-Error exception captured'
  ]
});

@kamilogorek 문제를 재현할 수 있었습니까?

원래 문제가 부분적으로 해결되었거나 작동하는 솔루션이 있는 것처럼 보이므로 문제를 종료합니다. 여전히 문제인 경우 누군가가 새로운 설명으로 새 문제를 만드는 것을 선호합니다.
여전히 관련성이 있는 경우 주저하지 말고 저에게 핑을 보내주십시오. 그러면 기꺼이 다시 열어 작업하겠습니다.
건배!

해결되지 않았습니다. 방금 Sentry를 Angular 8과 통합하려고 시도했는데 이 문제를 발견했습니다.

나는 Sentry가 기본 설정을 어떻게 주장할 수 있는지 이해가 되지 않습니다. 그것은 완전히 거짓입니다.

나는 Sentry가 기본 설정을 어떻게 주장할 수 있는지 이해가 되지 않습니다. 그것은 완전히 거짓입니다.

@Rush 는 무엇이 잘못되었는지 설명하고 보여주는 재현 가능한 사례를 제공하면 귀하의 주장을 확인할 수 있습니다.

@kamilogorek 사실은 6개월 이상 Angular와 함께 작동하지 않고 있으며 이를 확인할 수 있는 보고서가 충분하므로 IMO에서 더 이상의 재현 사례가 필요하지 않습니다. 스스로 꽤 쉽게 찾을 수 있습니다. Angular v8을 사용하는 프로젝트에서 동일한 문제가 있고 이제 v9(소스맵 없음)가 있기 때문에 그렇지 않다는 것을 스스로 알고 있습니다.

정확히, 그리고 Sentry가 저를 위해 일할 수 있도록 비용을 지불하고 있습니다. 내 손이 더러워질 것으로 예상되는 오픈 소스 프로젝트가 아닙니다.

나는 Sentry를 좋아하지만 대안을 찾을 수 있습니다 ...

https://github.com/gothinkster/angular-realworld-example-app 앱을 예로 들어 모두가 동일한 재생산을 할 수 있도록 했습니다.

Barebone은 앱을 복제하고 Sentry의 Angular 문서를 따르고 소스 맵을 업로드했습니다. 결과는 다음과 같습니다.

예 1: 깨진 논리

Angular가 오류 처리기에서 제공하는 것 + 캡처한 이벤트:

UI에서 어떻게 보이는지:

참고: 모든 것이 제자리에 있습니다. Angular가 작업할 전체 Error 개체를 제공하기 때문에 오류 메시지 및 오류 유형이 올바른 올바른 코드 줄을 쉽게 가리킬 수 있습니다.

예 2: 깨진 서비스 호출

Angular가 오류 처리기에서 제공하는 것 + 캡처한 이벤트:

UI에서 어떻게 보이는지:

참고: Angular가 이 정보를 제공하지 않기 때문에 어떤 유형의 오류가 발생했는지 알 수 있는 방법이 없습니다. 그러나 직렬화된 데이터를 살펴보면 "404 Not Found" 오류가 발생했음을 알 수 있습니다. 이 오류는 _대부분의_ 잘못된 XHR 호출에서 발생했습니다. 그런 다음 탐색경로 흐름을 조사하여 _사실_ 주어진 URL(이 경우 오타가 포함됨)에 대한 XHR 호출이 있었고 정확한 DOM 요소를 클릭한 후 이를 트리거했는지 확인할 수 있습니다. 이 정보를 사용하면 99%의 경우 문제를 해결하기에 충분합니다.

우리는 프레임워크에서 주어진 것만으로 작업할 수 있습니다. 그렇지 않으면 프레임워크 자체를 원숭이 패치해야 합니다.

우리는 프레임워크에서 주어진 것만으로 작업할 수 있습니다. 그렇지 않으면 프레임워크 자체를 원숭이 패치해야 합니다.

이것이 "우리의 문제가 아니다"라고 말하는 당신의 방식입니까? (일부 경쟁업체의) 센트리로 전환하기 전에 이러한 XHR 오류는 잘 캡처되었으며 각도 오류 처리기와 동일한 설치 방법을 사용했습니다.

@kamilogorek 벤더로서 프레임워크로 티켓을 열 수도 있습니다. 나는 그것이 약간의 관심을 끌 것이라고 확신합니다.

(일부 경쟁업체의) 센트리로 전환하기 전에 이러한 XHR 오류는 잘 캡처되었으며 각도 오류 처리기와 동일한 설치 방법을 사용했습니다.

@szechyjs 그렇다면 오픈 소스 SDK이고 우리가 목표로 하는 것을 안다면 개선 사항을 반복할 수 있기 때문에 대신 솔루션을 공유할 수 있다면 좋을 것입니다.

... 프레임워크로 티켓을 열 수도 있습니다. 나는 그것이 약간의 관심을 끌 것이라고 확신합니다.

방금 센트리 지원을 통해 티켓을 열고 이 문제를 언급했습니다.

여기 지나가는 사람. 제 경우에는 반응 네이티브에서 처리된 거부를 보고하고 OP와 동일한 오류가 표시되었습니다. the object you provide is not an instance of Error 이후로 아래를 사용했습니다.

export interface IError extends Error {
  code?: ErrorCode
  msg?: string
}

export const appError = (code: ErrorCode, msg: string = ''): IError => {
  const errmsg = `code: ${code}, msg: ${msg}`
  const err: IError = new Error(errmsg)
  err.code = code
  err.msg = msg
  err.name = 'appError'
  return err
}

그럼 난 전화

export const logError = (err: Error) => {
  sentry.captureException(err)
}

그리고 나는 본다

도움이 되었기를 바랍니다!

제 경우에는 Sentry의 Breadcrumbs 섹션이 원인을 찾는 데 많은 도움이 되었습니다. 일부 외부 API에 404개가 있을 때 주로 발생했습니다.

문서 업데이트 및 필요한 JS SDK 변경이 예정되어 있습니다.

https://github.com/getsentry/sentry-docs/pull/1695/
https://github.com/getsentry/sentry-javascript/pull/2601

이번 주에 출시되어야 합니다! :)

이에 대한 손쉬운 수정(HTTP 가로채는 오류에서만 발생):

handleError(error: Error | HttpErrorResponse | any) {
      // ... 
      if (error.constructor.name === "HttpErrorResponse") {
                error.error.Message + " (" + error.message + ")";
                error = error.error;
      }
      // ...
      Sentry.captureMessage(err.originalError || err.error || error);

     throw err;
 }

새로운 문서와 5.16.0 방금 출시되었습니다 - https://docs.sentry.io/platforms/javascript/angular/
최대한 명시적이고 상세하게 만들려고 노력했고, 그렇기 때문에 많은 코드처럼 보일 수 있습니다.

@kamilogorek Vue 앱

여기도 마찬가지입니다. vuejs 센트리 통합 오류 핸들러에서 예외가 발생합니다.
https://sentry.io/share/issue/eaf13a2455e04150aaaab595d0d7bafe/

@sblawrie 정확히 어떤 문제가 있습니까? 좀 더 자세한 내용이 도움이 될 것입니다.
@cincauhangus 코드 어딘가에 promise 인스턴스 자체에 오류가 발생하는 것 같습니다( abort, always, catch, done 키 참고).

다음과 같은 것:

const promise = new Promise((resolve, reject) => (...));
// somehow somewhere in the code
function foo () {
  // ...
  throw promise
}

따라서 Vue의 errorHandler 는 Error 인스턴스가 될 것으로 예상되는 전체 약속 개체를 가져옵니다.

@kamilogorek 설명 감사합니다. 몇 가지를 변경했으며 여전히 문제가 있는지 모니터링할 것입니다.

Angular 8을 사용하고 동일한 문제가 발생했습니다. Non-Error 예외. 예제 'extractError' 코드를 다음과 같이 수정했습니다.

private static extractError(error: any) {
    // Try to unwrap zone.js error.
    // https://github.com/angular/angular/blob/master/packages/core/src/util/errors.ts
    if (error && error.ngOriginalError) {
      error = error.ngOriginalError;
    }
    // We can handle messages and Error objects directly.
    if (typeof error === 'string' || error instanceof Error) {
      return error;
    }
    // If it's http module error, extract as much information from it as we can.
    if (error instanceof HttpErrorResponse) {
      // The `error` property of http exception can be either an `Error` object, which we can use directly...
      if (error.error instanceof Error) {
        return error.error;
      }
      // ... or an`ErrorEvent`, which can provide us with the message but no stack...
      if (error.error instanceof ErrorEvent) {
        return error.error.message;
      }
      // ...or the request body itself, which we can use as a message instead.
      if (typeof error.error === 'string') {
        return `Server returned code ${error.status} with body "${error.error}"`;
      }
      // If we don't have any detailed information, fallback to the request message itself.
      return error.message;
    }

    // ***** CUSTOM *****
    // The above code doesn't always work since 'instanceof' relies on the object being created with the 'new' keyword
    if (error.error && error.error.message) {
      return error.error.message;
    }
    if (error.message) {
      return error.message;
    }
    // ***** END CUSTOM *****

    // Skip if there's no error, and let user decide what to do with it.
    return null;
  }

위의 @untilinvite 의 beforeSend 예제를 기반으로 내 Sentry.init beforeSend를 수정했습니다. 이 변경 사항은 https://github.com/getsentry/sentry-javascript/issues/2169 의 두 번째 로그 메시지도 비 오류로 해석되는 것을 처리하기 위한 것입니다.

 Sentry.init({
        dsn: AppConfig.envSettings.sentryDSN,
        maxBreadcrumbs: 50,
        environment: this.getEnvName(),
        integrations: [new Sentry.Integrations.Breadcrumbs({ console: false })],
        beforeSend(event, hint) {
          // Note: issue with double entries during http exceptions: https://github.com/getsentry/sentry-javascript/issues/2169
          // Note: issue with a second entry not being set correctly (as a non-error): https://github.com/getsentry/sentry-javascript/issues/2292#issuecomment-554932519
          const isNonErrorException = event.exception.values[0].value.startsWith('Non-Error exception captured');
          if (isNonErrorException) {
            if (!event.extra.__serialized__) {
              return null;
            }
            let realErrMsg = event.extra.__serialized__.error ? event.extra.__serialized__.error.message : null;
            realErrMsg = realErrMsg || event.extra.__serialized__.message;
            // this is a useless error message that masks the actual error.  Lets try to set it properly
            event.exception.values[0].value = realErrMsg;
            event.message = realErrMsg;
          }
          return event;
        }
      });

5.16.0 릴리스로 문서에 추가된 변경 사항을 적용했지만 여전히 Non-Error exception captured with keys: error, headers, message, name, ok 오류가 발생합니다. @sentry/angular 패키지가 이러한 문제를 해결하기를 바랍니다.

각도: v9.1
센트리: v5.20

@szechyjs http 인터셉터에 대한 두 번째 부분도 읽었습니까? 이것은 일반적으로 올바르게 감지되지 않는 오류를 나타내는 주요 문제입니다 - https://docs.sentry.io/platforms/javascript/angular/

@szechyjs http 인터셉터에 대한 두 번째 부분도 읽었습니까? 이것은 일반적으로 올바르게 감지되지 않는 오류를 나타내는 주요 문제입니다 - https://docs.sentry.io/platforms/javascript/angular/

우리는 인터셉터를 사용하지 않습니다.

안녕하세요, 저는 이 문제에 대해 시간을 보냈고 HttpErrorResponse 유형의 오류에 대한 error.error.message 에 정보가 반드시 포함되어 있지는 않다는 것을 발견했습니다. 생성자를 보면 Angular가 ErrorEvent 아니라 루트 객체에 message prop을 설정한다는 것을 알 수 있습니다.

https://github.com/angular/angular/blob/cb3db0d31b91bea14c7f567fe7e7220b9592c11b/packages/common/http/src/response.ts#L345

이 줄을 변경하여 https://github.com/getsentry/sentry-javascript/blob/8eb72865dcd62ff719441105c7eda28007a07e9d/packages/angular/src/errorhandler.ts#L112
에게

if (error.error instanceof ErrorEvent && error.error.message)

오류 처리기가 return error.message; 진행하여 예상 오류를 발생시켰습니다.

좋은 캐치 @jakkn , 감사합니다! PR https://github.com/getsentry/sentry-javascript/pull/2903의 업데이트된 처리기

방금 상속한 Express 앱에서 이 문제가 발생합니다. 어떻게 이런 일이 일어날 수 있는지 모르지만 앱에서 발생하는 대부분의 오류에 대해 발생하는 것으로 보이며 문서에서 표준 Express 설정을 사용하고 있습니다.

예: https://sentry.io/share/issue/bfd4f674c10b4b4a8b6a291dde8e2a66/

비록 그것이 각도가 아니라 익스프레스 요청 핸들러를 위한 것이지만, 나는 이와 같은 오류를 쳤다. 기본적으로 Error 개체 대신 pojo로 next 를 호출했습니다. 나는 그것을 흥미로운 것으로 바꾸기 위해 내 고유의 익스프레스 오류 처리기에서 몇 가지 재미있는 작업을 수행하지만 sentryio 요청 미들웨어가 먼저 실행되기 때문에 이 정렬된 오류가 발생하지 않습니다.

결국, 제공된 모든 것을 더 합리적인 것으로 바꾸는 유틸리티 함수를 만들었습니다.

export const handleMaybeError = err => {
  if (err instanceof Error) return err
  const newErr = new Error(err.message || 'unexpected')
  for (const [key, value] of Object.entries(err)) {
    newErr[key] = value
  }
  return newErr
}

export const someController = (req, res, next) => {
  try {
    await handleResponse(req, res)
  } catch (err) {
    next(handleMaybeError(err))
  }
}

이것은 스택 추적을 다중화한다고 생각하지만 실제로 이것이 전달 된 pojo라면 어쨌든 스택 추적이 없었습니다.

이 문제가 수정되기 전에 보고된 이벤트의 대부분은 이 특정 문제에 대한 것이며 장기 실행 노드 웹 서버이기 때문에 이동 경로는 거의 쓸모가 없으며 모든 오류는 이 하나의 이벤트 유형에 집중됩니다.

const 예외 = error.error || 오류 메시지 || error.original오류 || 오류;

이것은 참/거짓으로 평가될 것입니다

const 예외 = error.error || 오류 메시지 || error.original오류 || 오류;

이것은 참/거짓으로 평가될 것입니다

가능성은 없지만 가능합니다. 그것은 모두 당신이 스트림으로 보내는 "오류"에 달려 있습니다. 그러나 결국 여기에는 일종의 유용한 정보가 포함되어야 합니다.