[NEXTJS] Sentry 연결

📱테스트 환경

"react": "19.0.0-rc-02c0e824-20241028",
"react-dom": "19.0.0-rc-02c0e824-20241028",
"next": "15.0.2"

---

회사에서 오랜만에 nextjs 를 쓸일이 생겨서

하는김에 이것저것 다시 써보기로 하였다 !

오늘 작성할 내용은 Sentry 연결하는 부분이다.

센트리는 10에 9은 쓴다고 생각할 정도로 무료인데

에러를 확인할 수 있다는 점에서 무조건적으로 사용해야한다고 생각할 정도로

중요한데 이걸 설정하는 방법을 이번에 포스팅 해보도록 하겠다.

yarn add @sentry/nextjs

해당 모듈 추가해주고

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

const nextConfig = {
  // Your existing Next.js configuration
};

// Make sure adding Sentry options is the last code to run before exporting
module.exports = withSentryConfig(nextConfig, {
  org: "example-org",
  project: "example-project",

  // An auth token is required for uploading source maps.
  authToken: process.env.SENTRY_AUTH_TOKEN,

  silent: false, // Can be used to suppress logs
});

next.config.js 수정해주고

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

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  // Replay may only be enabled for the client-side
  integrations: [Sentry.replayIntegration()],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // 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
});

sentry.client.config 만들어주면 된다.