Sentry-javascript: 하이브리드 앱 스택 레이스에 정보가 없기 때문에 커패시터를 통해 실행할 때 센트리

@kamilogorek님 , 이 일을 도와주시겠습니까?

스택 프레임의 파일 이름이 잘못 표시됨

{
              "filename": "[native code]",
              "lineno": null,
              "colno": null,
              "function": "forceError",
              "in_app": true
            }

샘플 오류 콘솔은 다음과 같습니다. Raven.js는 오류 정보를 얻지 못합니다.

센트리에서는 다음과 같이 보입니다.

오류 자체에서 적절한 프레임 정보를 추출하는 것은 TraceKit의 책임입니다. – https://github.com/getsentry/sentry-javascript/blob/master/packages/raven-js/vendor/TraceKit/tracekit.js

하지만 새로운 @sentry/browser SDK에서 일부 변경 사항을 적용했으므로 더 이상의 조사를 수행하기 전에 먼저 시도해 볼 수 있습니다.

@kamilogorek
@sentry/browser를 사용하면 더 나빠져서 Raven으로 옮겼습니다.

아래는 앱이 capacitor + Ionic 4 + VueJS + @sentry/browser를 사용하여 Hybrid 앱으로 실행될 때의 모습입니다.

아래는 @sentry/browser를 사용할 때 기록되는 오류 링크입니다.

https://sentry.io/share/issue/d0c7e9529ac94dba9c4b7b04e16361ba/

콘솔은 이렇게 생겼습니다

센트리 설정

Sentry.init({
    release: "WSVue-" + AppConst.application.version + "-" + AppConst.application.bundleVersion,
    dsn: "https://[email protected]/181356",
    transport: Sentry.Transports.FetchTransport,
    integrations: [new Sentry.Integrations.Vue({Vue})],
    environment: "DEVTEST",
    beforeSend: function (exception) {
        return exception;
    }
});

실행중인 어플리케이션이 웹사이트로 실행될 때 보기에는 아름답지만

아래는 앱이 웹사이트로 실행될 때 기록되는 동일한 오류입니다.
https://sentry.io/share/issue/4133deab3fc240f2bc85c680fae922a0/

나는 Capacitor나 Ionic 4 tbh를 사용한 적이 없습니다. 이것을 디버깅하는 데 사용할 수 있는 가장 작은 재현 사례를 제공할 수 있습니까? 설정하는 방법을 배울 시간이 충분하지 않습니다.

@kamilogorek 문제가 아닙니다 문제를 재현하기 위한 테스트 프로젝트를 만들었습니다. 커패시터는 코르도바와 정확히 유사합니다. 동일한 디버깅 프로세스.

https://github.com/stripathix/ionic-vue

오류를 트리거하려면 오류 트리거 버튼을 클릭하기만 하면 됩니다.

응용 프로그램을 실행하기 위해 README.md에 단계를 추가했습니다. 꽤 쉽습니다. Cordova 환경과 거의 유사합니다.

하이브리드 앱을 디버깅하는 것은 Cordova 디버깅과 정확히 유사합니다. 시뮬레이터에서 앱을 실행한 다음 사파리에서 시뮬레이터에서 실행되는 앱의 Inspector를 엽니다.

아래는 앱이 하이브리드 모바일 앱을 실행했을 때 기록된 오류 링크입니다.
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

안녕하세요, @kamilogorek 당신은 이것을 조사할 기회가 있었나요?

아니요, 요즘은 여가 시간이 별로 없어요. 언젠가는 그것을 조사하려고 할 것입니다, 죄송합니다.

@kamilogorek 저도 이 문제를 겪고 있습니다. 이 문제를 조사할 수 있는 다른 사람이 있습니까?

죄송하지만 지금은 이 문제를 해결할 시간이 없습니다.

조사하고 싶다면 다음을 제안합니다.

• beforeSend 콜백을 사용하고 두 번째 인수 hint 이고 hint.originalException 속성이 있는지 확인합니다. 그렇다면 스택을 조사하고 정보가 전혀 없는지 확인하십시오.
• 그렇지 않다면 우리가 할 수 있는 일이 별로 없다.
• 그렇다면 https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts 의 computeStackTrace 메소드에 중단점을 설정하고 거기에서 단계별로 error.stack 정보를 소화하는 방법

Cordova와 함께 Ionic Angular v4 앱에서 @sentry/browser 를 사용하고 소스 매핑 스택 추적과 유사한 문제가 있었습니다.

우리는 그것이 Cordova용 Ionic Web View 및 iOS에서 사용자 정의 구성표의 사용과 관련이 있다고 판단했습니다(Cordova의 경우 ionic:// capacitor:// ). 스택 추적 프레임의 파일 이름에 있는 사용자 지정 체계는 압축 해제에 문제가 있는 것 같습니다.

ionic:// 에서 http:// 로 파일 이름 스키마를 다시 작성하는 해결 방법을 작성한 다음 예상대로 작동했습니다. 다음은 제거된 버전입니다.

beforeSend = (event: Event) => {
  const exceptionValue = event.exception && event.exception.values && event.exception.values[0];

  // Approach taken from Sentry's React Native SDK.
  // See https://github.com/getsentry/sentry/issues/4719#issuecomment-333836573
  const stacktrace = event.stacktrace || (exceptionValue && exceptionValue.stacktrace);

  if (stacktrace) {
    stacktrace.frames.forEach(frame => {
      if (frame.filename !== "[native code]") {
        // The iOS webview uses a custom URL scheme for serving the web app.
        // See https://github.com/ionic-team/cordova-plugin-ionic-webview#iosscheme
        // The full URL with that scheme will be used for filenames in the stacktrace.
        // The URL begins with "ionic://localhost/".
        // The custom "ionic" scheme in the URL creates issues for source-mapped stacktraces.
        // Replacing "ionic" with "http" in the stackframe filename will enable source-mapped stacktraces.
        frame.filename = frame.filename.replace(/^ionic/, "http");
      }
    });
  }

  return event;
}

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

@KevinKelchen : 이것은 잘못된 파일 이름을 해결하지만 정의되지 않은 lineno 및 colno 를 어떻게 처리합니까? @stripathix 와 마찬가지로 프레임은 iOS 웹 앱의 커패시터 내부에서 실행할 때 정의되지 않은 프레임을 갖습니다. 예시:

대

나에게는 정보가 누락된 것이 아니라 전체 프레임 이 누락된 것 같습니다.

@kamilogorek : originalException에 열과 줄 정보가 있는지 확인할 수 있습니다. 아래를 참조하세요.

tracekit 디버깅을 시작하는 방법조차 모르지만 위에서 누군가가 분명히 발견한 것이 있을 수 있습니다.

@silviogutierrez 이것을 디버깅하는 데 사용할 수 있는 작은 재현이 있습니까? 이상적으로는 col/line이 누락된 프레임이 있는 기본 코르도바 앱입니다.

@kamilogorek : 하나로 합치려고 하겠지만 실제로 문제를 발견했습니다. 그것은 매우 간단하며 정확히 예상했던 위치입니다.

바로 여기: https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

gecko 및 chrome 변수는 모두 커패시터 프레임에 대한 정규식 테스트를 위해 비어 있습니다. 즉, iOS에서 실행할 때 커패시터의 프레임은 capacitor://localhost/foo/bar 이고 Android에서는 http://localhost 입니다. 따라서 Tracekit은 정규식과 일치하는 [native code] 프레임을 제외한 iOS의 모든 프레임을 삭제합니다. 나는 그것이 안드로이드에서 잘 작동한다고 상상할 것입니다.

gecko 변수를 변경하기 위해 이 (끔찍한) sed 명령을 실행하면 문제가 해결됩니다.

sed -i "s/moz-extension/moz-extension|capacitor/" node_modules/@sentry/browser/esm/tracekit.js

커패시터 프로토콜을 추가하려면 Tracekit에 대한 PR을 열어야 합니까? chrome regex는 좀 더 유연하며 이미 여러 프로토콜에 대한 regex의 일부로 [-a-z] 가 있는 것 같습니다. gecko 에서도 시도해 볼까요?

@silviogutierrez - 여기서 해결 방법이 있습니까? 필요한 경우 수정 사항으로 PR을 작성하거나 로컬에서 테스트할 수도 있습니다.

내 수정이 작동했습니다. 불행히도 전/후로 작은 복제 저장소를 만들 시간이 없었습니다. 그러나 나는 잠시 동안 수정 프로그램을 성공적으로 사용했습니다.

두 가지 질문이 남아 있습니다.

1. 센트리 측에서 일반화할 수 있습니까? 프로토콜의 경우 *://와 같은 것입니까?
2. 또는 대신 커패시터가 자체 프로토콜(iOS에서만)을 고집하는 이유는 무엇입니까? 이미 tracekit.ts에 나열된 것 중 하나를 사용하지 않는 이유는 무엇입니까?

그것들은 좋은 질문이고, 나는 둘 다에 대해 아주 좋은 대답을 가지고 있지 않습니다.

1. 정규식으로 알아낸 것 같습니다.

2. 나는 그것이 전체 Cordova / Ionic / Capacitor 사용자 정의 구성표의 일부일 뿐이라고 생각합니다. 앱에서 CORS 사전 비행을 피하기 위해 SSL 고정 전략과도 관련이 있는 것 같지만 확실하지 않습니다.

@kamilogorek - 나는 당신이 재현을 위해 무엇을 원하는지 잘 모르겠습니다. 제가 생각하는 베스트 샷은 다음과 같습니다.

https://github.com/toddtarsi/cordova-create-react-app

이 저장소를 분기하고 Sentry를 추가하고 React 오류 경계를 추가하고 충돌 버튼을 추가했습니다. Cordova 실행 지침이 있습니다. 현대 Cordova에서 실제로 얻을 수 있는 것과 같은 기준선입니다. 이것이 당신이 찾고 있는 것인지 알려주십시오.

@kamilogorek @silviogutierrez - 알겠습니다. 여기에서 불평을 끝냈습니다. 나는 이 문제의 부담이 Gecko/safari 측에서 잔인하게 둔한 오류 구현으로 귀결된다는 결론에 도달했습니다. 인내심을 갖고 도와주셔서 감사합니다.

@toddtarsi 시간이 부족해서 죄송하지만 알려주셔서 감사합니다. 이 문제를 종료하도록 하고 자유롭게 ping을 보내거나 필요한 경우 새 문제를 엽니다. 감사 해요!

@kamilogorek 님 이 @toddtarsi 에게 제안한 대로 새 문제를 만들거나 이 문제를 언급하는 PR을 제출하시겠습니까?

위의 @silviogutierrez 의 의견(https://github.com/getsentry/sentry-javascript/issues/1863#issuecomment-563364652)에서 지적했듯이 이것은 sentry-javascript의 조정된 tracekit 버전에 특정한 문제이며 쉽게 이 프로젝트에서 수정되었습니다(https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts#L49).

문제: gecko regex가 capacitor:// url 체계를 허용하지 않기 때문에 Capacitor 앱은 iOS에서 매핑 가능한 스택 추적을 보내지 않습니다.
솔루션: gecko regex에 capacitor url 스키마를 추가하십시오.

프로젝트를 포크하고 내 용도로 변경하려고 합니다. 풀 요청을 제출하려면 저에게 알려주세요!

@kamilogorek @mrlowe pull 요청에 대한 업데이트가 있습니까? https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0? https://github.com/getsentry/sentry/issues/13169 문제에서 논의된 커패시터 지원에 도움이 될 것입니다.

@seanwu1105 나에게서 아무것도. 현재 프로덕션 환경에서 실행 중이며 문제가 발생하지 않았습니다.

@mrlowe 다음 릴리스에서 모든 사람이 해당 변경 사항을 사용할 수 있도록 홍보할 계획이 있습니까? 우리는 iOS의 하이브리드 앱에서 커패시터를 사용할 때 동일한 문제에 직면하고 있으며 이 수정 https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0 가 우리에게 효과적입니다. 감사 해요!

@albertinad @kamilogorek 으로부터 아무 대답도 듣지 못했기 때문에 PR을 작성하고 이 문제를 참조하겠습니다. 그것이 선택되지 않으면 우리는 새로운 문제를 만들 수 있다고 생각합니다.

@mrlowe 답변이 늦어 죄송합니다. 이미 마감된 문제에서 언급을 놓치기 너무 쉽습니다. PR을 계속 주시하겠습니다, 감사합니다!