SentryになぜSourceMapを送る必要があるのか？
初めに
業務にて、@sentry/nextjsを使用していた時、sentrycliというものがあったことに気づきました。
sentrycliはnext buildする際にどうやらsentry側にSourceMapというものを送信しているらしい...
私はSourceMapの存在自体知らなかったので、いい機会と思い、今回の記事を書きました。
SourceMapとは
SoueceMapとはHTTPのレスポンスヘッダーであり、
生成されたコードをソースマップにリンクし、ブラウザが元のソースを再構成し、再構成されたオリジナルをデバッガに提示できるようにします。
参考: https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/SourceMap
このようにJavaScriptのビルド前とビルド後のファイルの位置関係を対応させ、デバッグを用意にするためのものです。
本題
ここまで読めば気付く方も多いと思いますが、SourceMapを送信しないと、ビルド後のjsファイルを読んでデバッグする必要があるため、デバッグが難しくなってしまいます。そのため、ファイルのどこでエラーが発生したかを簡単にわかるようにするためにJavaScriptのソースマップを送信するのですね。
Next.jsからSentryにSourceMapを送信するには
公式から提供されている記事(以下にリンクを記載)があるので、そこから設定します。
webpack.config.jsにdsnを設定することで送信することが可能です。
また、npx @sentry/wizard -i nextjsを使用した自動セットアップを利用する場合、自動的にwebpack周り、sentrycli関係ファイルの生成及びデフォルト設定などを行なってくれます。
個人のauthTokenに紐づいてしまう場合の対処
上記でSourceMapを送信することがわかりましたが、これを送信するためにはsentrycliを使用する必要があります。しかし、ここで問題が発生します。cliを使用するためには.sentryclircにsentry個人アカウントのauthTokenを記述する必要があるのです。これでは、githubでコード管理した場合に、他のメンバーも発行した本人のauthTokenを使用することになってしまいます
これを回避する方法は、組織用のauthTokenを発行する必要があります。
最後に
Node.js(ビルドが必要な場合)は、SourceMapを送信する必要があったとは驚きました。
この記事が誰かの役に立ちますように！！
Discussion