Sentry-javascript: 非同期のロードおよびキャプチャエラー

+1

+1

+1

+1

これについてコメントしたすべての人– @karolisdzejaによるソリューションの何が問題になっていますか？

最終的に、Raven.jsソースがページにない場合に機能するはずの機能をRaven.jsソースに追加する方法がわかりません。 これは常に最終的にはカスタムソリューションになると思います。 せいぜい、ドキュメントに「ハウツー」を追加することができます。

@benvinegarソリューションは問題ないように見えますが、これが公式にサポートされ、文書化されているとよいでしょう。 ランダムな要点を評価することよりもセントリーチームを信頼する必要があるだけで幸せです。

実際、はるかに優れたソリューションは、TwitterのJS SDKコードのようなものです： https ：

ページの読み込み時に関数キューを設定します。このキューは、外部jsが読み込まれたときに消費され、プロキシオブジェクトを置き換えます。 また、すべてのAPI呼び出しがプロキシへの.ready（）呼び出しのようなものを通過することを確認してください。

これにより、すべての関数を個別にプロキシすることなく、captureMessageだけでなく、jsがロードされる前にすべての呼び出しをキューに入れることができます。

raven.jsを非同期/遅延でロードでき、心配する必要がないようにしたいと思います。

要点に関するその他の問題：window.onerrorを覆い隠し、含まれていないグローバル変数をいくつか導入します。

また、raven.jsがロード時に使用するフル機能のtraceKitWindowOnError関数も使用しません。

上記の要点を少しやり直しました： https ：//gist.github.com/oroce/ec3786ba7eff59963842220c3ffc56b4

リーク変数はありません。 私は保たwindow.onerrorハンドラが、使用して自由に感じるwindow.addEventListener('error', fn) 。

この時点での最大の助けは、Ravenからエクスポートされた関数としてtraceKitWindowOnErrorを使用することです。 これはエラーが発生したときに呼び出される関数なので、 https ：

非常に適切なスタックトレースがないことはわかっていますが、現在よりも優れたものがあります。

これを行うことには他にも欠点があります。

• Ravenがロードされる前にエラーをキャッチするためにwindow.onerrorに依存することにより、スタックトレースはすべてのブラウザで利用できるわけではありません
  
  
  
  • スタックトレースがないことに加えて、これはグループ化に悪影響を及ぼします
  
  
  • これが、 install()がインストルメンテーションを試行/キャッチする理由です
  
  
• 合成トレースは機能しません（これらはすべて、このコードから発信されたものとして表示されます）
• ブレッドクラムコレクションなし

したがって、パフォーマンスが向上する可能性があるので、品質の低いエラーレポートと交換することになります。 非同期実行が重要な場合は、Ravenを独自のコードにバンドルして、一緒に提供されるようにすることをお勧めします。

@benvinegarあなたは完全に正しいです。 公開されていない（別名、グーグルがページに到達しない）アプリケーションでは、古典的な（ブロックする）レイヴンの方法は完全に問題ありませんが、グーグルページの洞察ポイントが重要である公開サイトができたらすぐに最適化する必要がありますサードパーティのコードをロードする方法（これは、UX、速度、およびより良い検索結果の位置を優先して支払うことをいとわない価格です）。

さらに、レイヴンをバンドルにバンドルすることも解決策ですが、 factor-bundleなどのツールを使用してバンドルを複数のバンドルに分割したり、複数のバンドルを含めて速度を上げたりするなど、フォールドを超える最適化でフロントエンドコードを最適化するとすぐに上記の解決策はより良いものになる可能性がありますが、私は提案を受け付けています。

それらはすべてトレードオフがあるため、利用可能なすべての戦略を文書化できれば素晴らしいと思います。特定のWebアプリケーションごとに応じて、さまざまな戦略を適用します。
非同期戦略では、 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');

おそらく、上記のような非同期スニペットを文書化するだけだと思いますが、トレードオフが伴うことに言及してください。

もう1つコメント。 これらのトレードオフは許容できるように思われるかもしれませんが、Raven.jsに由来すると（誤って）信じられている、ユーザーが経験している忠実度の低いエラーに関する多くのサポートチケットを扱っています。 私の恐れは、非同期アプローチを使用するように人々に勧めると、このアプローチの忠実度が低いために、「スタックトレースがないのはなぜですか」などの不満を尋ねる人が増えることです。 私はそれを喜んで受け入れますが、飲み込むのは難しい薬です。 😓

@benvinegar私はあなたがどこから来ているのかを完全に

@oroce –はい、これはこのスレッドの人々には100％関係ありませんが、警告を適切に理解せずにこの戦略を追求する可能性のある人々（たとえば、コピー/貼り付け）。

Installドキュメントにスニペットを追加する計画を立てて、この問題を未解決のままにしておきます。そして、あちこちにたくさんの警告を表示します。

ここにご参加いただきありがとうございます/これを行うように私を説得します。

Ravenメソッドへの呼び出しを透過的にキューに入れるために使用するスニペットは次のとおりです： https ：

モックは確かに改善される可能性がありますが、より多くの機能を複製する必要はありません。 Object.defineProperty使用すると、 Ravenがウィンドウにアタッチされた直後にフックできますが、スクリプトのロードイベントで十分な場合があります。 これを可能にする公式の方法があるといいでしょう。

やあみんな、レイガンが非同期でそれを行う方法に何か問題があるのだろうか？
よくわかりませんが、エッジケースをうまく処理できるようですか？ 私は間違っているかもしれません:)

@ Kl0tlとても素敵です、ありがとう

これは、動的インポートを使用すると非常に簡単です。 まだstage3にありますが、webpackでサポートされています。

単にpromiseをキューとして使用します。 フルファイルになると、すべてのコールバックが順番に実行されます。

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 。

エラーを渡すだけで、ほとんどの場合機能します。 古いブラウザ（バージョン31より前のFirefoxなど）である場合の注意点は、columnNoまたはErrorObjectプロパティを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>タグとに、他のJavaScriptの

私のクイックテストでは問題はなかったので、デフォルトの同期バージョンでこれを使用しない理由はわかりません。

誰かがより良いアプローチのアイデアを持っているなら、私はそれを聞きたいと思っています。

編集：このコメントを何度も編集してすみません。 現在は安定しています。 この状態にするのは楽しかったです！ ：スマイリー：

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

歩哨ライブラリがロードされると、エラー報告の品質は同期のロードとまったく同じになりますか？ （私はそう思います、ただチェックするだけです）

また、追加したいドキュメントでは、libがロードされるまでRavenを使用できません。オプションでコールバック関数を提供して、ユーザーコンテキストなどを設定できますか？

@ dalyr95に同意します。 コールバック関数が便利です。 多分カスタムレイヴンロードイベント。

@ dalyr95と同様のリクエストがあります。 現在、 setUserContext()を呼び出す唯一の方法は、メインの構成オブジェクトでコールバックを渡すことができるほどクリーンではないローダースニペットを変更することです。

こんにちは、問題を報告していただきありがとうございます。

SDKの次のメジャーリリースに取り組んでいます。
そのため、現在のバージョン（メジャーバグまたはセキュリティバグを除く）での作業を保留にする必要がありました。
できるだけ早くすべてのレポートに戻るように努めますので、しばらくお待ちください。

わかってくれてありがとう、
乾杯！

私の解決策は、 'undefined'!=k.setup&&k.setup();の呼び出しの直後に.install() 。次に、post initコードを使用してsetupという関数をSENTRY_SDKに追加しました。

非同期ローダーを使用すると、2番目の引数として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を介してのみユーザー情報を取得できますか？