Sentry

Sentry란?

소개

• 공식 홈페이지
• 어플리케이션에서의 오류 발생을 알려주는 실시간 에러 트래킹 서비스 입니다.
• Javascript, node.js, python 등의 다양한 언어, 프레임워크, 라이브러리를 지원하며 Unreal Engine같은 게임 개발 도구도 지원합니다.
• 여러 프로젝트의 이슈를 한 곳에서 관리함으로써 에러 모니터링을 일원화 할 수 있습니다.
• 슬랙이나 카카오톡등 특정 프로그램과 연동하여 에러가 발생했을때, 특정 그룹 및 사용자에게 알람을 보낼 수 있습니다.

지원하는 플랫폼 더보기

요금제

• 무료 / 유료 버전에 따른 차이
  • 멤버 수 제한 : 하나의 계정으로 로그인해야 해당 이슈들을 조회할 수 있습니다. (유료 사용의 경우 무제한)
  • 에러 수 제한 : 무료 버전은 월간 에러 카운트가 5,000개로 제한 됩니다. (유료 버전은 50,000개 이상)
  • 히스토리 저장 : 오류에 대한 히스토리를 30일간만 저장 합니다. (유료 사용시 90일)

 

설치 및 사용법

설치 방법 및 기본 설정

• (Next.js 환경 기준)

Create Project 버튼으로 플랫폼을 선택하여 신규 프로젝트를 생성 합니다.

알람 빈도를 설정해 줍니다.

프로젝트 이름과 팀 을 설정하여 프로젝트 생성을 마칩니다.

이후 나타나는 설정 안내 가이드를 따라 플랫폼에 맞게 설정을 진행합니다.

• (Next.js 환경 기준) 아래 명령어를 사용 합니다.
• yarn add @sentry/nextjs
• (Next.js 환경 기준) 아래 명령어를 통해 필요한 기본 설정을 자동 세팅 하거나 수동 설정 합니다.
  • sentry.client.config.js 와 sentry.server.config.js 파일을 생성후 Sentry 초기화(sentry.init)
  • next.config.js 파일을 기본 설정으로 생성
  • sentry-cli 를 위한 sentry.properties 자동 생성 (소스 맵 자동 업로드시 사용하기 위해)
  • sentry-cli 를 위한 토큰과 함께 .sentryclirc  파일 생성 (자동으로 .gitignore 등록)
• npx @sentry/wizard -i nextjs
• Sentry.init 기본 내용
  • dsn: 이벤트를 전송하기 위한 식별 키
  • release: 애플리케이션 버전 (보통 package.json에 명시한 버전을 사용합니다. 이는 버전별 오류 추적을 용이하게 합니다.)
  • environment: 애플리케이션 환경 (dev, production 등)
  • tracesSampleRate: 0~1 사이의 확률로 트랜잭션이 sentry 로 전송될 확률을 제어 합니다.
  • 더 많은 옵션 확인 링크
• (Next.js 환경 기준) next.config.js 파일 대신 next.config.wizardcopy.js 파일이 생성될경우 해당 파일을 기존 next.config.js 파일과 머지 시켜줍니다.
• 테스트용 에러 발생 코드

  // 프론트엔드 컴포넌트 확인용
  
  <button
    type="button"
    onClick={() => {
      throw new Error("Sentry Frontend Error");
    }}
  >
    Throw error
  </button>
  
  
  
  // API 호출시
  
  export default (req, res) => {
    throw new Error("API throw error test");
    res.status(200).json({ name: "John Doe" });
  };

• 설정을 마치면 sentry_sample_error 라는 page 파일이 생성되고 아래와 같은 화면으로 구성되어 있습니다.

 

사용법

• Sentry는 captureException과 captureMessage 두 가지 이벤트 전송 API를 제공합니다. 두 API는 다음과 같은 특성을 가지고 있습니다. (react 기준 코드)

  // captureException: error 객체나 문자열 전송 가능
  
  import * as Sentry from '@Sentry/react';
  try {
    testFunc();
  } catch (err) {
    Sentry.captureException(err);
  }
  
  
  // captureMessage: 문자열 전송 가능
  
  Sentry.captureMessage('에러가 발생하였습니다!');

• 추가적으로 React SDK는 자동으로 JavaScript 오류를 탐지하고 Sentry로 전송할 수 있도록 Error Boundary 컴포넌트를 제공하며 다음과 같이 사용할 수 있습니다.

import React from 'react';
import * as Sentry from '@Sentry/react';
<Sentry.ErrorBoundary
  fallback={<p>에러가 발생하였습니다. 잠시 후 다시 시도해주세요.</p>}
>
  <Example />
</Sentry.ErrorBoundary>;

 

Sentry Tab 소개

Project

• 이슈 트래킹을 위한 신규 프로젝트를 추가 할 수 있고, 추가된 각 프로젝트의 트랜잭션 이나 에러 카운트 현황을 나타내 주는 페이지 입니다.

 

Issues

Issue 리스트 페이지

• 발생한 이슈들의 전체 리스트를 확인 가능한 페이지 입니다.
• 상단 필터에서 프로젝트별, 배포(개발)환경별, 기간별 필터링등을 설정 할 수 있습니다.
• 각 이슈들의 간략한 정보 (요약 정보 및 처리 후 재발생 유무등..) 와 발생 건수, 발생한 사용자수를 볼 수 있고 해당 이슈의 담당자를 지정 할 수 있습니다.

 

Issue 상세 정보 페이지

• 각 이슈 하나의 상세한 정보를 표기해주는 페이지 입니다.
• 비슷한 원인으로 발생한 건이 여러건일 경우 (Issue Grouping) Older Newer 버튼으로 순차 조회가 가능합니다.
• Tag 섹션에서 발생한 환경 (개발환경, OS, Browser, userId 등) 을 확인 할 수 있습니다.
• Breadcrumbs 섹션에서 해당 오류가 발생된 시점 이전의 동작 히스토리를 확인 할 수 있습니다.
  • 예: 라우터 이동, API 호출, 콘솔 에러등
• 그 밖의 섹션들
  • Device : 오류가 발생한 장비 정보
    • (Family(Android, iOS … etc), Model, Architecture, Memory, Capacity, Simulator, BootTime, Timezone)
  • EXCEPTION : 에러가 발생한 코드 라인과 에러 메시지
  • App : 오류가 발생한 어플리케이션 정보
    • (ID, Start Time, Device, Build Type, Bundle ID, Bundle Name, Version, Build)
  • Browser : 오류가 발생한 어플리케이션 정보
    • (ID, Start Time, Device, Build Type, Bundle ID, Bundle Name, Version, Build)
  • Operating : 유저가 사용하는 OS
    • (Name, Version, Kernel Version, Rooted)

 

Performance

• 프로젝트별 이슈 발생 비율, 이슈 처리량, 지연되는 이슈등을 확인 가능한 페이지 입니다.
• 페이지를 느리게 로드되도록 만드는 API 호출이나 프로젝트 전반적으로 영향을 주는 이슈를 추적합니다.
• FCP 와 LCP 를 확인 할 수 있습니다.
  • FCP : (First Contentful Paint, 텍스트, 이미지등 시각적으로 확인할 수 있는 컨텐츠가 브라우저에 처음 paint 되기까지의 시간)
  • LCP : (Largest Contentful Paint, 시각적으로 가장 큰 사이즈를 차지하는 컨텐츠가 처음으로 브라우저에 paint 되기까지의 시간)

 

Releases

• 전체 프로젝트의 모든 Release 상태를 확인 하고, Release 간의 이슈 발생 차이점등을 확인 할 수 있는 페이지 입니다.
• 하나의 프로젝트에서의 특정 Release 에서 새로 발생한 이슈만 따로 보거나, 이전 Release 들과 비교 할 수 있습니다.

 

Sentry 추가 개념 및 기타 사항

Scopes and Hubs

• 서비스에서 이벤트가 캡쳐되어 Sentry로 전송되면 SDK는 해당 이벤트 데이터에 추가정보를 병합하여 내보냅니다.
• 네트워크 콘솔에서 payload를 보면 Sentry로 보내는 많은 내용을 확인 할 수 있습니다.
• 이러한 payload에 담기는 내용에 대한 이해와 더 많은 데이터를 쌓기 위해선 Scope 와 hub 개념의 이해가 필요 합니다.

Scope

• Sentry는 scope 단위로 이벤트 데이터를 관리합니다.
• 이벤트가 전송되면 해당 이벤트의 데이터를 현재 scope의 추가 정보와 병합합니다. 일반적으로 SDK에서 자동으로 scope를 관리하므로 이에 대해 크게 신경쓰지 않아도 되지만 scope에 대해서 자세히 알게된다면 각 이벤트마다 의미 있는 정보를 추가적으로 전송할 수 있습니다.
• Sentry에서의 scope는 configureScope와 withScope 두 가지로 나누어 설정할 수 있습니다.
  • configureScope 설정은 글로벌 scope와 비슷한 맥락으로 현재 범위 내에서 데이터를 재구성하는데 사용합니다.
  • withScope설정은 로컬 scope로 한 번의 범위 내에서 데이터를 재구성할 때 사용 합니다.

Hub

• 허브란 Sentry가 호출되면 생성되는 Pool 입니다.
• 서비스에서 발생한 Sentry 와 관련된 데이터들이 Pool 에 들어가고 Pool 에서 Sentry에 설정된 규칙에 따라 Sentry 서버로 데이터가 넘어가게 됩니다.
  • 이는 마치 GTM의 dataLayer와 유사한 개념입니다. (dataLayer에 event가 push되면 gtm이 알아서 적절한 타이밍에 비동기콜로 gtm 서버에 데이터를 보내는 방식)
• 이러한 방식을 통해 모든 이벤트에 대한 비동기콜을 생성하지 않고, 모아서 처리하거나 유휴상태일때 데이터를 보내게 됩니다.
• 요약 : 클라이언트에서 이벤트가 생성 됨 -> Scope 규칙에 따라 Hub에 적재 -> 적절한 타이밍에 Hub에 있는 데이터를 서버로 전송