🖥️ Sentry 모니터링

Sentry를 사용한는 목적

Sentry는 실시간 오류 추적 시스템으로, 웹사이트, 모바일 앱, 게임 등의 애플리케이션에서 발생하는 에러를 실시간으로 모니터링하고 분석해주는 도구입니다. 이를 통해 개발자는 문제 발생을 즉각적으로 인지하고, 빠르게 해결할 수 있어 서비스 품질을 향상시키는 데 큰 도움을 줍니다.

Sentry 사용의 주요 장점 😄

1. 실시간 오류 모니터링
에러가 발생하면 즉시 알림을 받을 수 있어, 즉각적인 대응이 가능합니다.

2. 자세한 에러 리포트
에러 발생 시점의 스택 트레이스(stack trace)와 함께, 에러가 발생한 환경 정보(운영체제, 브라우저, IP, OS 등)를 제공하여 에러를 빠르게 파악하고 대응할 수 있습니다.

3. 릴리즈 추적
Sentry는 릴리즈 버전을 추적하여 어느 버전에서 에러가 발생하였는지 파악하는데 도움을 줍니다.

4. 팀원과의 협업
에러를 팀원과 공유하고, 에러 처리 상황을 업데이트하여 팀원들이 현재 상황을 쉽게 파악할 수 있도록 돕습니다.

Sentry의 단점 😭

1. 비용
Sentry는 무료 플랜을 제공하지만, 무료 플랜은 일정 수준의 에러 보고만 가능하고, 보고량이 많아질수록 비용이 증가합니다. 따라서 대규모 프로젝트에서는 비용 부담이 클 수 있습니다.

2. 복잡성
Sentry는 많은 기능을 제공하며, 이를 최대한 활용하기 위해서는 시간을 들여 Sentry를 이해하고 설정해야 합니다. 이는 특히 Sentry를 처음 사용하는 개발자에게는 부담이 될 수 있습니다.

3. 데이터 보안
Sentry는 에러 정보를 클라우드에 저장하므로, 중요한 데이터가 외부에 노출될 수 있는 위험이 있습니다. 이를 해결하기 위해 Sentry는 데이터 보안을 위한 다양한 기능을 제공하지만, 이를 설정하고 관리하는 것은 사용자의 책임입니다.

4. 실시간 모니터링 한계
Sentry는 실시간으로 에러를 모니터링하고 보고하지만, 이는 서버 상태나 인프라 문제 등 모든 종류의 문제를 파악하는 것은 아닙니다. 따라서 Sentry를 사용한다고 해서 모든 문제를 예방하거나 해결할 수 있는 것은 아닙니다.

Angular에 Sentry 적용하기

* 해당 방법은 Angular Framework(Version 9)에 적용하여 사용하고 있습니다.

1. 일단 필요한 package를 install 해주어야 합니다.

npm install npm install @sentry/angular@^6 @sentry/browser^6 @sentry/integrations^6

위와같이 install을 진행할 경우 아래와 같이 package.json에 생성됩니다.

"@sentry/angular": "^6.19.7",
"@sentry/browser": "^6.19.7",
"@sentry/integrations": "^6.19.7",

우선 Sentry기능을 사용하기 위해선 개인 DSN을 알고 있어야 합니다.

DSN 찾는방법

• Settings 탭을 클릭하신 후 DSN을 검색하시면 자기 자신의 고유 번호가 나오게됩니다 이것은 노출되면안되니 주의하시기 바랍니다.

Angular에 적용 방법

Angular 애플리케이션을 개발하면서 프로덕션 환경에서 발생하는 에러를 신속하게 감지하고 모니터링하려면 Sentry를 통한 에러 트래킹을 설정하는 것이 좋습니다. 이를 위해서는 main.ts 파일에서 Sentry를 초기화해주어야 합니다. 아래는 초기화 과정을 담은 예시 코드입니다.

// main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// Sentry SDK 설치
import * as Sentry from '@sentry/angular';
import { Angular as AngularIntegration } from '@sentry/integrations';

if (environment.production) {
  // Sentry 초기화
  Sentry.init({
    dsn: 'YOUR_SENTRY_DSN',  // Sentry 계정에서 발급받은 DSN 입력
    // 기타 옵션 설정 가능
  });
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

이 예시 코드에서는 environment.production이 true일 때만 Sentry를 초기화하도록 설정되어 있습니다. 이는 개발 환경에서는 Sentry를 초기화하지 않고, 프로덕션 환경에서만 활성화되도록 하는 것입니다. 또한, Sentry에 계정을 생성하고 프로젝트를 등록한 후에 발급받은 DSN을 YOUR_SENTRY_DSN 부분에 입력해주셔야 합니다.

개발 환경에서 Sentry를 테스트하기 위해선 if문 밖에서 Sentry를 초기화 시켜주시면 됩니다.

이렇게 설정하면 Angular 애플리케이션이 시작될 때 Sentry가 초기화되어 모든 에러를 감지하고 Sentry 서버로 전송할 수 있게 됩니다. 이를 통해 프로덕션 환경에서 발생하는 예외 상황을 빠르게 파악하고 대응할 수 있습니다.

간단한 예시

// main.component.html
<button (click)="createNewError()">Sentry Error Log Test</button>

// main.compoent.ts
import * as Sentry from '@sentry/angular';

createNewError() {
  alert('Sentry Error Log Test...');
  throw new Error('Sentry Error Log Test...');
  
  // 직접 Sentry로 Error를 보고하고 싶은 경우
  Sentry.captureException(error)
}

위와 같이 설정한 후 버튼을 클릭하게 되면

위와 같이 Sentry에 Error 로그가 뜨는것을 확인하실 수 있습니다.

이외에도 직접 Error로그를 보내고 싶은 경우 captureException라는 Sentry에서 제공해주는 기능을 사용하시면 됩니다.

• 이 외에도 많은 API를 제공하니 Sentry Doc를 살펴보시면 많은 다양한 기능을 사용하실 수 있을 것 같습니다.

Sentry 요점정리

Sentry는 Front-End 개발자들이 애플리케이션의 에러와 성능 이슈를 효과적으로 관리하고 디버깅할 수 있는 강력한 도구입니다.
아래는 Sentry에서 Front-End 개발자들이 사용할 수 있는 몇 가지 주요 기능입니다.

✅ 에러 트래킹:
Sentry는 자동으로 애플리케이션에서 발생한 에러를 트래킹하여 대시보드에서 세부 정보를 확인할 수 있도록 도와줍니다.

✅ 실시간 알림:
Sentry는 에러가 발생할 때 실시간으로 알림을 제공하여 빠르게 대응하고 문제를 해결할 수 있도록 도와줍니다.

✅ 성능 모니터링:
애플리케이션의 성능 이슈를 Sentry에서 모니터링하여 페이지 로딩 시간, API 호출 시간 등의 성능 지표를 확인할 수 있습니다.

✅ 세션 트래킹:
Sentry는 사용자 세션을 트래킹하여 특정 사용자가 겪는 문제를 이해하고 디버깅하는 데 도움을 줍니다.

✅ 환경 구분:
다양한 환경에서 애플리케이션이 실행될 때 Sentry는 에러를 구분하고 트래킹하여 개발, 스테이징, 프로덕션 등에서 발생한 에러를 확인할 수 있습니다.

✅ 사용자 피드백 수집:
Sentry는 사용자들로부터 발생한 에러에 대한 피드백을 수집하여 개선에 활용할 수 있도록 도와줍니다.

✅ Integrations:
Sentry는 다양한 통합 기능을 제공하여 다른 개발 도구와 연동할 수 있습니다.

✅ 속성 및 라벨링:
Sentry에서는 에러에 대해 속성을 추가하거나 라벨을 지정하여 효과적으로 분류하고 관리할 수 있습니다.

Sentry를 활용하면 개발자들은 애플리케이션의 안정성과 성능을 모니터링하고 지속적으로 개선할 수 있습니다.
이 도구는 빠르고 정확한 디버깅을 가능케하여 사용자 경험을 향상시키는 데 큰 도움이 됩니다. Front-End 개발자로서 Sentry를 적극 활용하여 높은 품질의 애플리케이션을 제공할 수 있기를 바랍니다.

Angular V17

추가적으로 유용한 기능

Replay

• 위 버튼을 클릭할 시 에러가 발생하는 로직을 생성하였을 때 Sentry에서는 유저가 어떤식으로 사용했는지 알 수 있게 화면을 제공해준다.

위 영상을 참고한다면 개발자가 어떻게 발생한 Error인지 잘 모를 경우 유용하게 Error를 캐치하는데 사용할 수 있는 기능일 것 같다.