Zenn
Closed5

Sentry with Next.js deploy ECS

Next.js
ECS
Sentry
nologyancenologyance

ECSで起動しているNext.jsのエラーをSentryでトラッキングしたい

nologyancenologyance

@Sentry/Next.jsを使うとSourceMapをSentryにアップロードしてトラッキングできる

nologyancenologyance

ただし、本番環境にはSourceMapを含めたくないため、明示的に削除する必要がある

  • next.config.jsのhideSourceMapsをtrueに設定
    • 開発中はfalseにできるとなお良い
  • next build && find .next -name *.map -deleteでmapファイルを削除
nologyancenologyance

Sentryのdsnをクライアント側とサーバー側の両方から参照できる必要があるため、以下のようにNEXT_PUBLIC_のプレフィックスとともにDockerfileに渡す

ARG NEXT_PUBLIC_SENTRY_DSN
ENV NEXT_PUBLIC_SENTRY_DSN $NEXT_PUBLIC_SENTRY_DSN

この状態でnext buildすれば値が展開される

一方、サーバー側では環境変数で値を受け取ってあげれば良い

import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  // Replay may only be enabled for the client-side
  integrations: [new Sentry.Replay()],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

  // ...

  // Note: if you want to override the automatic release value, do not set a
  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
  // that it will also get attached to your source maps
});

これで両方にdsnを設定できた

このスクラップは2023/08/30にクローズされました