😃

SentryになぜSourceMapを送る必要があるのか?

2022/05/01に公開

初めに

業務にて、@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関係ファイルの生成及びデフォルト設定などを行なってくれます。

https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

個人のauthTokenに紐づいてしまう場合の対処

上記でSourceMapを送信することがわかりましたが、これを送信するためにはsentrycliを使用する必要があります。しかし、ここで問題が発生します。cliを使用するためには.sentryclircにsentry個人アカウントのauthTokenを記述する必要があるのです。これでは、githubでコード管理した場合に、他のメンバーも発行した本人のauthTokenを使用することになってしまいます
これを回避する方法は、組織用のauthTokenを発行する必要があります。
https://docs.sentry.io/product/integrations/integration-platform/#internal-integrations

最後に

Node.js(ビルドが必要な場合)は、SourceMapを送信する必要があったとは驚きました。
この記事が誰かの役に立ちますように!!

Discussion