Next.jsのSource MapをSentryにおくる

Next.js以外でもWebpackを扱えるものなら大体いけるはずです。 @sentry/webpack-plugin Sentryでは、@sentry/webpack-pluginをWebpackで利用してSource […]

Next.js以外でもWebpackを扱えるものなら大体いけるはずです。

@sentry/webpack-plugin

Sentryでは、@sentry/webpack-pluginをWebpackで利用してSource Mapをアップロードできます。

Next.jsの場合は、next.config.jsに記述しましょう。

const SentryWebpackPlugin = require('@sentry/webpack-plugin');

const settings = {
    productionBrowserSourceMaps: true,
    webpack: (config) => {
      if (process.env.NODE_ENV === 'production') {
        config.plugins.push(
          new SentryWebpackPlugin({
            include: '.next',
            ignore: ['node_modules'],
            urlPrefix: '~/_next',
            // release: COMMIT_SHA
          })
        );
      }
      return config
    }
  }

productionBrowserSourceMapsをtrueにしないと、next buildでSoureMapが作られない様子なので注意です。

Next.js provides a configuration flag you can use to enable browser source map generation during the production build

https://nextjs.org/docs/advanced-features/source-maps

APIキーの取得

Sentry管理画面のSettings > Developer Settings > INTERNAL INTEGRATIONSからAPIキーを作成します。

必要なものは以下の3つです。

API Token: Dashboardから作成
Organization Name: Sentryのグループ名
Project Name: プロジェクト名

環境変数をセットする

.envやNetlify / GitHub Actions / Vercelなどで以下の3環境変数をセットします。

export SENTRY_ORG={SENTRY_ORG_NAME}
export SENTRY_PROJECT={SENTRY_PROJECT_NAME}
export SENTRY_AUTH_TOKEN={SENTRY_API_TOKEN}

ビルドを実行する

あとはnext buildを実行しましょう。以下のようにSentryへアップロードしているログがでればOKです。

5:12:54 PM: > Uploaded release files to Sentry
5:12:54 PM: > File upload complete
5:12:54 PM: Source Map Upload Report
5:12:54 PM:   Scripts
5:12:54 PM:     ~/_next/server/init-server.js.js
5:12:54 PM:     ~/_next/server/on-error-server.js.js
5:12:54 PM:     ~/_next/server/pages/[slug].js
5:12:54 PM:     ~/_next/server/pages/_app.js
5:12:54 PM:     ~/_next/server/pages/_document.js
5:12:54 PM:     ~/_next/server/pages/_error.js
5:12:54 PM:     ~/_next/server/pages/en.js
5:12:54 PM:     ~/_next/server/pages/en/[slug].js
5:12:54 PM:     ~/_next/server/pages/index.js