Sentry 프로젝트 생성 및 설정 단계별 설명

1. Sentry 프로젝트 생성하기

Sentry에서 새로운 프로젝트를 생성하여 기본 설정을 완료하는 방법을 살펴보겠습니다.

1. Sentry 계정 로그인: Sentry 공식 사이트에 접속하여 로그인합니다.
2. 프로젝트 메뉴 선택: 좌측 메뉴에서 'Projects' 항목을 클릭하여 프로젝트 목록을 확인합니다.
3. 새 프로젝트 생성: '+ Create Project' 버튼을 눌러 새 프로젝트 생성 화면으로 이동합니다.
   • 프로젝트 언어 또는 프레임워크 선택 (예: JavaScript)
   • 프로젝트 이름 지정
   • 알림 설정 옵션 선택 ('i'll create my own alerts later')
   • 팀 할당 또는 새 팀 생성
4. DSN Key 저장: 생성된 프로젝트의 DSN Key를 복사해두세요. 이는 SDK 설정에 필요합니다.

2. Sentry SDK 통합하기

웹 애플리케이션에 Sentry SDK를 설치하고 초기화하는 과정을 안내합니다.

1. Demo 앱 클론: GitHub 리포지토리에서 프론트엔드 모니터링 예제 코드를 다운로드합니다.
2. SDK 설치: index.html 파일을 열고 아래와 같이 Sentry SDK를 추가합니다.

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

Sentry.init({
  dsn: "저장한_DSN_KEY",
});

3. 애플리케이션 실행: Node.js 환경에서 npm 명령어를 통해 앱을 빌드 및 실행합니다.

npm install
npm run deploy

3. 첫 번째 오류 캡처하기

앱을 실행한 후 의도적으로 오류를 발생시켜 Sentry로 전송되는 과정을 확인합니다.

• 로컬 호스트 주소로 앱 접속 (예: http://localhost:5000/)
• 'Buy!' 버튼 클릭 후 'Checkout' 진행 시 오류 발생
• Sentry 대시보드에서 오류 이벤트 확인

4. 소스맵 설정으로 가독성 높은 스택 트레이스 얻기

소스맵을 활용하여 최적화된 스택 트레이스를 제공받는 방법입니다.

1. 빌드 환경 구성: Makefile을 수정하여 필요한 환경 변수들을 설정합니다.
2. 릴리스 생성 및 소스맵 업로드: sentry-cli 명령어를 사용하여 릴리스 정보를 등록하고 소스맵을 Sentry 서버에 업로드합니다.

create_release:
    sentry-cli releases new -p PROJECT_NAME $(VERSION)

upload_sourcemaps:
    sentry-cli releases files $(VERSION) upload-sourcemaps build/static/js

5. 커밋 추적 및 문제 해결 지원 설정

GitHub과 Sentry를 연동하여 자동화된 문제 분석 기능을 활성화합니다.

1. Github 통합 설정: Sentry 내 Developer Settings에서 Github 인증을 완료합니다.
2. 커밋 연결: Makefile에 커밋 연결 명령어를 추가하여 릴리스와 관련된 커밋 정보를 자동으로 수집합니다.

associate_commits:
    sentry-cli releases set-commits $(VERSION) --auto

이제 Sentry는 오류와 관련된 최근 커밋들을 제안하며, 이를 바탕으로 문제 해결자들을 추천할 수 있습니다.