Sentry 사용해보자

안녕하세요 오늘은 제가 앱 개발을 하면서 crash 수집을 위해서 사용했던 sentry에 대해서 알아보겠습니다

기능이 굉장히 여러가지인 것 같아서 글을 작성하게 되었습니다

---

Sentry란?

Sentry(센트리)는 영어로 보초, 파수꾼, 감시병을 뜻하고 이름 뜻과 잘어울리게 에러 추적, 성능 모니터링 도구 등 여러 역할을 하면서 서비스의 오류를 빠르게 진단, 해결 하는데 많은 도움이 됩니다

특히 API 통신 때 발생하는 오류를 실시가능로 수집하고 분석하는 기능이 Sentry가 가진 가장 큰 장점입니다!

왜 사용하냐?

• 에러가 나면 바로 알 수 있습니다
• 스택 트레이스, URL, 브라우저, OS, 앱 버전, 사용자 행동 흐름 같은 걸 같이 남겨줘서 에러 재현이 쉬워집니다
• 배포 후 문제를 바로 잡을 수 있습니다
• 로그만으로는 에러 추적이 어렵습니다
• 발생 빈도, 영향 받은 사용자 수, 최근 발생 여부같은 걸 보여줘서 우선 순위를 판단하기 쉽습니다

---

대표기능 정리

에러 모니터링

가장 기본적인 기능입니다

앱에서 발생한 예외, 크래시, unhandled error를 수집해서 이슈 단위로 보여줍니다

스택 트레이스, 발생 횟수, 처음/마지막 발생 시점, 영향받은 사용자 수 같은 정보도 같이 볼 수 있습니다.

이슈 그룹핑

같은 원인의 에러를 자동으로 묶어서 보여줍니다

그래서 같은 에러가 수백 번 터져도 하나의 이슈로 관리할 수 있고 중복 확인 시간이 줄어듭니다

성능 추적

에러 메시지만 주는 게 아니라 어떤 파일/라인에서 터졌는지와 함께 URL, 브라우저, OS, 디바이스, 릴리즈 버전, 환경 정보들을 남겨줍니다

세션 리플레이

사용자 세션을 다시 보듯이 재생해서, 실제 사용 흐름 중 어디서 문제가 났는지 확인할 수 있습니다

프론트엔드에게 특히 좋은 기능이니 잘 활용하시면 좋을거 같습니다

릴리즈 추적

배포 버전 기준으로 이슈를 묶고, 어느 릴리즈 이후 에러가 증가했는지 추적할 수 있습니다

배포 직후 장애 원인 파악할 때 핵심적으로 사용됩니다

알림 연동

특정 에러가 급증하거나, 성능 임계치를 넘거나, 새 릴리즈에서 문제가 생기면 Slack, 이메일 등으로 알림을 보낼 수 있습니다

---

사용

1. Sentry 회원가입 및 로그인
2. 프로젝트 생성
3. 나의 어플리케이션에 세팅
4. 알림 봇 추가

저는 이렇게 사용 했습니다

npm install @sentry/react-native

// layout.tsx

import { Stack } from 'expo-router';
import { View } from 'react-native';
import '../../global.css';
import { useCustomFonts } from '@/shared/assets/fonts/fontLoader';
import Toast from 'react-native-toast-message';
import QueryProvider from '../shared/lib/QueryProvider';
import '@/shared/lib/sentry';
import * as SentryRN from '@sentry/react-native';

export default function RootLayout() {
  const fontsLoaded = useCustomFonts();
  if (!fontsLoaded) return null;
  return (
    <View className="mb-6 flex-1 bg-white">
      <QueryProvider>
        <SentryRN.ErrorBoundary fallback={<></>}>
          <Stack
            screenOptions={{
              headerShown: false,
              animation: 'fade',
              gestureEnabled: true,
              gestureDirection: 'horizontal',
            }}
          />
        </SentryRN.ErrorBoundary>
        <Toast />
      </QueryProvider>
    </View>
  );
}

// sentry.ts

import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'SENTRY_DSN',
});

---

글을 마치며

오늘은 에러에 대한 대응을 좀 더 잘 하기 위해서 sentry를 이용해서 크러시를 수집하였습니다

이렇게 해놓으니까 좀 더 수고스러움이 줄은거 같아서 좋았던거 같습니다