Next.jsでSentryを利用する際にSourceMapを隠蔽する方法

概要

Next.jsでSentryを利用する際は公式ドキュメントに従えば、比較的簡単に利用することが出来ます。

ただし、このままProduction環境にビルドするとSourceMapが公開されてしまいます。Sentryがスタックトレースを表示するために利用しているからです。（参考）

Devtool の Sources のNEからソースコードが確認可能な状況になってしまいます。このSourceMapはnext build時にSentryに送っておりビルド後は不必要であり、ソースコードが丸見えになるので隠蔽すべきです。

今回はこのビルド後に不必要なSourceMapの隠蔽方法をご紹介します。

対策

Vercel以外を利用している場合

以下のようにビルド後にSourceMapを削除する処理を入れれば完了です。

package.json
1"postbuild": "find .next -name \\*.css.map -or -name \\*.js.map -delete",

Vercelを利用している場合

Next.js 12以降でVercelを利用してビルドした場合、上記対策だとビルドで落ちるようになります。（参考）

恐らく、Vercel 環境では /.next/server 配下が Vercel 向けに特殊化されているからだと思われます。なので、/.next/server 以下はSourceMapの削除対象外とすれば良さそうですが、Vercel 環境がブラックボックスなので以下の対応をします。

1. hideSourceMapsを true にしてDevtoolから非表示にする

公式の記載通り、以下の対応すればDevtoolから非表示にすることが可能です。（参考）

next.config.js
1const moduleExports = {
2  sentry: {
3    hideSourceMaps: true,
4  },
5};

2. Source Mapへ直接アクセスされた場合は404にリライトする

Devtoolから非表示出来ましたが、_next/static/chunks/pages/xxx.js.mapを叩くとまだ直接アクセス出来てしまいます。

なので、以下のようにアクセスされた場合は404へリライトする処理を追加します。

next.config.js
1async rewrites() {
2    return {
3      beforeFiles: [
4        {
5          source: '/:path*.(js|css).map',
6          destination: '/404',
7        },
8      ]
9   }
10}

さいごに

今回は Next.jsでSentryを利用する際にSourceMapを隠蔽する方法 をご紹介しました。

見落としていると問題になる内容でした。ツールを追加した際はツール側の変更をちゃんと把握する必要がありますね。