Sentry Loaderが簡単すぎた - みーのぺーじ

Webアプリケーションのエラーを扱うためにSentryを利用しています．

webpackを使ってSentry SDKを使うと，bundle.jsが正常にロードされれば問題なくSentryにエラーが送信されますが，もしもbundle.jsでSentryが読み込まれる前にエラーが発生すると，エラーが送信されないので困ったことになります．

調べてみると，How do I load Sentry before the main JS bundle loads? という同様の質問をしている人がいました．

vue.js - How do I load Sentry before the main JS bundle loads? - Stack Overflow

これを解決するために，SentryにはLoaderという仕組みがあります．

Lazy Loading Sentry for JavaScript | Sentry Documentation

Sentry Loaderの使い方

ドキュメントの説明がたった7行しかないので，最初は使い方が分からず困ったのですが，よく読むとhtmlの初めの方で指定されたjsを読み込めば全てうまくいくことが分かりました．つまり，以下のhtmlがSentry Loaderを使用する最小の内容です．

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://js.sentry-cdn.com/xxxxxxxxxxxxxx.min.js" crossorigin="anonymous"></script>
</head>

<body>
    <p>This is a Sentry JS Loader example.</p>
    <script>
        setTimeout(() => {
            var c = v;
        }, 1000);
    </script>
</body>

</html>

header内のscriptの内容は，Sentry > Settings > organization > project > Client Keys > Details > JAVASCRIPT LOADER に記載されているものを貼り付けてください．

var c = v;

は，意図的に ReferenceError を出すコードで，これを1秒後に実行するという動作です．

これをブラウザーで開くと，正常にエラーが通知されました．

f:id:atsuhiro-me:20201105003922p:plain

Sentry Loaderの問題点

必要時にSentry本体が読み込まれるというコンセプトなので，広告ブロック機能を搭載したブラウザーでは動作しない場合があります．

Braveブラウザーで上記htmlを実行しても，Sentry 本体のスクリプトがロードされず，エラーが送信されませんでした．

このことは下記のようにドキュメントに明記されています．

Generally we suggest using our npm package (@sentry/browser) as utilizing a CDN create scenarios where Sentry is unable to load due to networking issues or common extensions like ad blockers.

CDN for Vue | Sentry Documentation

一長一短あるようで，悩ましいです．