Sentry-javascript: ハイブリッドアプリのスタックレースに情報がないため、コンデンサーを実行しているときのセントリー

こんにちは@kamilogorek 、これを手伝っていただけませんか。

スタックフレームのファイル名が間違っているようです

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

もう1つのサンプルエラーコンソールは次のようになります。 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に移動した理由です。

以下は、コンデンサ+ Ionic 4 + VueJS + @ sentry / browserを使用してアプリがハイブリッドアプリとして実行されている場合の様子です。

以下は、@ 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;
    }
});

アプリケーションを実行しているときはWebサイトとして実行していると美しく見えますが

以下は、アプリがWebサイトとして実行されているときにログに記録される同じエラーです
https://sentry.io/share/issue/4133deab3fc240f2bc85c680fae922a0/

私はCapacitorもIonic4tbhも使用しませんでした。 これをデバッグするために使用できる最小の再現ケースを提供できますか？ 設定方法を学ぶ時間がありません。

@kamilogorek問題ありません問題を再現するためのテストプロジェクトを作成しました。 コンデンサはcordovaとまったく同じです。 同じデバッグプロセス。

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

エラーをトリガーするには、[エラーのトリガー]ボタンをクリックするだけです。

アプリケーションを実行するために、README.mdに手順を追加しました。 とても簡単です。 コルドバ環境とほぼ同じです。

ハイブリッドアプリをデバッグする場合は、Cordovaのデバッグとまったく同じです。 シミュレーターでアプリを実行してから、サファリからシミュレーターで実行されているアプリのインスペクターを開きます。

以下は、アプリがハイブリッドモバイルアプリを実行しているときにログに記録されたエラーのリンクです。
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

こんにちは、 @ kamilogorekはこれを調べる機会がありましたか？

そんなことはありませんが、最近は余暇があまりありません。 いつか調べてみます、ごめんなさい。

@kamilogorek私もこの問題を経験しています。 これを調べることができる他の誰かがいますか？

申し訳ありませんが、現在この問題に取り組む十分な時間がありません。

調査したい場合は、次のことをお勧めします。

• beforeSendコールバックを使用して、それが2番目のarugment hintであり、 hint.originalException属性を持っているかどうかを確認します。ある場合は、スタックを調べて、情報がまったくないかどうかを確認します。
• そうでなければ、私たちにできることはあまりありません
• そうである場合は、 https：//github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.tsのcomputeStackTraceメソッドにブレークポイントを設定し、そこから段階的に設定しますerror.stack情報をどのように消化するか

Cordovaを使用するIonicAngular v4アプリで@sentry/browserを使用し、ソースマップスタックトレースでも同様の問題が発生しました。

これは、Cordova用のIonic Web ViewとiOSでのカスタムスキームの使用に関係していると判断しました（Cordovaの場合は$＃ ionic:// $＃$、Capacitorの場合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 Webアプリのコンデンサー内で実行する場合、フレームには未定義のフレームがあります。 例：

vs

私には、情報が欠落しているのではなく、フレーム全体が欠落しているように見えます。

@kamilogorek ：originalExceptionに列と行の情報があることを確認できます。以下を参照してください。

tracekitのデバッグを開始する方法すらわかりませんが、上記の誰かが明らかにしていることがあるかもしれません。

@silviogutierrezこれをデバッグするために使用できる小さな再現はありますか？ 理想的には、col / lineが欠落しているフレームを持つ基本的なcordovaアプリです

@kamilogorek ：1つにまとめようとしますが、実際に問題が見つかりました。 それは非常に単純で、まさにあなたがそれを推測した場所です：

ここで： 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のすべてのフレームを削除します。 Androidでも問題なく動作すると思います。

この（凶悪な）sedコマンドを実行してgecko変数を変更するだけで、問題が修正されます。

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

コンデンサプロトコルを追加するには、Tracekitに対してPRを開く必要がありますか？ お気づきの方もいらっしゃると思いますが、 chrome正規表現はもう少し柔軟性があり、任意の数のプロトコルの正規表現の一部としてすでに[-a-z]を持っているようです。 geckoでも試してみるべきですか？

@ silviogutierrez-ここで解決策を見つけたことはありますか？ 必要に応じて、修正を使用してPRを作成したり、ローカルでテストしたりすることもできます。

私の修正はうまくいきました。 残念ながら、前後で小さな複製リポジトリを作成する時間がありませんでした。 しかし、私はしばらくの間、修正をうまく使用してきました。

2つの質問が残っています：

1. これを歩哨側で一般的にすることはできますか？ プロトコルの*：//のようなもの？
2. または、代わりに、コンデンサが独自のプロトコル（およびiOSのみ）を主張するのはなぜですか？ tracekit.tsにリストされているものの1つをすでに使用してみませんか？

これらは良い質問であり、私にもあまり良い答えはありません。

1. 正規表現でそれを理解しているようです。

2. これは、Cordova / Ionic / Capacitorのカスタムスキーム全体の一部にすぎないと思います。 アプリからのCORSプリフライトを回避するためのSSLピン留め戦略にも関連しているように感じますが、よくわかりません。

@ kamilogorek-再現に何が欲しいのかよくわかりません。 これが私のベストショットだと思います：

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

このリポジトリをフォークし、Sentryを追加し、Reactエラー境界を追加し、クラッシュボタンを追加しました。 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正規表現ではcapator：// urlスキームが許可されていないため、CapacitorアプリはiOSでマッピング可能なスタックトレースを送信しません。
解決策：コンデンサのURLスキームをgecko正規表現に追加します。

プロジェクトをフォークして、自分で使用するために変更を加えようとしています。プルリクエストの送信を希望される場合は、お知らせください。

@kamilogorek @mrloweプルリクエストの更新https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0？ 問題https://github.com/getsentry/sentry/issues/13169で説明されているコンデンサのサポートに役立ちます。

@ seanwu1105私からは何もありません。 現在、これを本番環境で実行していますが、問題は発生していません。

@mrlowe次のリリースでその変更をすべての人が利用できるようにするPRを作成する予定はありますか？ iOSのハイブリッドアプリでCapacitorを使用する場合も同じ問題が発生します。この修正は、 https：//github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0で機能します。 ありがとう！

@albertinad @kamilogorekから何も返事がなかったので、PRを作成してこの問題を参照します。 それが取り上げられない場合は、私が思うに新しい問題を作成することができます。

@mrloweの返信が遅れて申し訳ありませんが、すでにクローズされている問題の言及を見逃すのは簡単です。 PRに注目していきます、ありがとう！