Zenn
🔧

Next.js + Sentry + Vercelでソースマップアップロードが失敗する問題の解決方法

に公開
Next.js
Vercel
Sentry
monitoring
sourcemap
tech

問題の概要

Next.jsアプリケーションでSentryを使用している際、ビルド時に以下のような警告が表示され、ソースマップがSentryにアップロードされない問題が発生することがあります。

Sentry CLI: Auth Token is missing

この問題により、本番環境でエラーが発生した際に、Sentryでスタックトレースが正しく表示されず、デバッグが困難になります。

原因

Sentry v8とVercel Integrationを使用している場合、next.config.jsの設定が古い形式だと、Auth Tokenの自動提供が正しく機能しないことが原因です。

特に、以下のような詳細な設定を行っていると、Vercel Integrationのデフォルト動作を妨げてしまいます：

// 問題のある設定例
const SentryWebpackPluginOptions = {
  silent: false,
  debug: true,
  include: '.next',
  urlPrefix: '~/_next',
  sourcemaps: {
    deleteSourcemapsAfterUpload: true,
  },
};

解決方法

1. SentryWebpackPluginOptionsを簡潔に変更

不要な設定を削除し、最小限の設定のみにします：

const SentryWebpackPluginOptions = {
  silent: true,
  widenClientFileUpload: true,
  // Vercel Integration を使用している場合、Auth Token は自動的に提供される
  // release injection は v8 でデフォルトで有効になっているため、明示的な設定は不要
};

2. nextConfigにsentryセクションを追加

クライアントサイドにソースマップが公開されないようにするため、hideSourceMapsを設定します：

const nextConfig = {
  sentry: {
    hideSourceMaps: true,
  },
  // その他の設定...
};

完全な設定例

const path = require('path');
const { withSentryConfig } = require('@sentry/nextjs');

const nextConfig = {
  sentry: {
    hideSourceMaps: true,
  },
  // その他のNext.js設定
};

// 最小限の設定
const SentryWebpackPluginOptions = {
  silent: true,
  widenClientFileUpload: true,
};

module.exports = withSentryConfig(nextConfig, SentryWebpackPluginOptions);

効果

この変更により、以下の効果が期待できます：

  1. Vercel Integrationが正しく機能

    • Auth Tokenが自動的に提供され、認証エラーが解消される

  2. Release injectionの自動有効化

    • Sentry v8では、release injectionがデフォルトで有効になるため、明示的な設定が不要

  3. ソースマップの適切なアップロード

    • エラートレースが正しく表示され、デバッグが容易になる

  4. セキュリティの向上

    • hideSourceMaps: trueにより、クライアントサイドにソースマップが公開されない

まとめ

Sentry v8とVercel Integrationを使用する場合は、過度な設定を避け、統合機能に任せることが重要です。最小限の設定にすることで、自動化されたワークフローを活用し、より安定した動作を実現できます。

同様の問題に直面している場合は、まずは設定をシンプルにすることから始めてみてください。

Discussion