[Next.js] Sentry 도입하기

🟡 1. Sentry이란?

 Sentry는 소프트웨어 버그 및 에러 추적을 위한 오픈 소스 오류 모니터링 도구입니다. 개발자들이 실시간으로 애플리케이션에서 발생한 버그, 예외, 크래시 등을 모니터링하고 이를 추적하여 디버깅할 수 있게 해줍니다. Sentry는 웹 애플리케이션, 모바일 앱 및 다양한 플랫폼에서 사용할 수 있습니다.

 

🟡 2. Next.js 프로젝트에 Sentry 도입하기.

  🟣 2.1 Senty 웹사이트에서 프로젝트 만들기.

      회원가입 및 로그인 -> Project탭 -> 우측 상단에 Create Project 버튼

Next.js 클릭 -> Project name은 자신의 next.js 프로젝트 이름 입력(같지 않아도 됨) -> 활성화된 Create Project 클릭

  🟣 2.2 Next.js 프로젝트에 Sentry module 설치

  next.js 프로젝트 터미널로 가서, 위 npx @sentry/wizard@latest -i nextjs 입력.

  Ok to preceed?(y) => y 입력

  - 위 질문들에 모두 yes

  - Select your Sentry project는 sentry에 만들어진 project가 여러개 있으면 리스트가 나옴. 그중에 도입하고자 하는 project를 방향키로 선택 후 엔터.

 🟣 2.3 Next.js 프로젝트에 Sentry 코드 도입.

 

 

  위 과정이 끝나면 프로젝트 디렉토리가 사진과 같을 것입니다. 이때 센트리 테스트를 해보기 위해서 src/app/sentry-example-page/page.jsx 파일 내용을 복사해서 src/app/page.tsx에 붙여 넣으면 테스트가 가능합니다. (빨간색 -> 노란색)

 

 

 

 

 

 

 

코드를 적용하고 프로젝트를 실행하면 위와 같이 실행이 된다.

sentry에 잡힌 로그들

 

🛑 주의 사항

- 브라우저는 크롬을 추천합니다.

- 브라우저에 광고 및 트래킹 제거 확장 프로그램이 있다면, 센트리가 정상 작동하지 않습니다.

 

 🟣 2.4 Next.js 프로젝트에 Sentry 코드 도입. (sentry 및 nextjs 버전이 최신이 아닌 경우)

- 루트 디렉토리에 위 파일 3개를 생성하고, 아래 코드를 작성해줍니다.

DSN 얻는 방법

 

Setting -> Projects ->  내 프로젝트 클릭 -> SDK Setup -> Client Keys(DSN)

// sentry.client.config.ts, sentry.server.config.ts, sentry.edge.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "내 센트리 프로젝트 dsn",
  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,
  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,
});

 

next.config.js 파일에 아래 코드 추가합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

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

module.exports = withSentryConfig(
  module.exports,
  {
    silent: true,
    org: "내회사",
    project: "sentry-test-project",
  },
  {
    widenClientFileUpload: true,
    transpileClientSDK: true,
    tunnelRoute: "/monitoring",
    hideSourceMaps: true,
    disableLogger: true,
  }
);

 

.sentryclirc 파일도 생성 후 아래 코드를 작성해주세요.

[auth]
token=내토큰

 

auth 토큰은 Settings -> Developer settings -> auth Tokens에서 신규 생성합니다.

 

 

 

 

 

 

 

 

 

📝 정리 

1. Sentry 사이트에서 프로젝트 생성하기.
2. next.js 프로젝트에 sentry module 설치하기.
3. 코드 작성하기.
4. sentry 사이트에서 확인하기.

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~