sentry 적용 및 활용하기

1. sentry 란?

Sentry provides end-to-end distributed tracing, enabling developers to identify and debug performance issues and errors across their systems and services.

 

센트리는 분산 추적을 제공하여 개발자들이 시스템과 서비스 전반에 걸쳐 성능 문제와 오류를 식별하고 디버깅할 수 있도록 도와준다.

 

쉽게 말해 에러 분석 및 모니터링 도구다.

에러 발생 시 다양한 정보를 설정하여 기록할 수 있고, 사용자의 이벤트가 타임라인으로 기록되며, 발생한 에러들을 시각화 도구로 쉽게 분석할 수 있음

 

 

2. 도입계기

어플 리뷰와 모니터링 시 종종 앱 크래시가 있음을 알고 에러를 해결하기 위해 도입하게 되었다.

 

 

3. 적용하기

프로젝트에 적용하는건 생각보다 간단했다

 

1) 센트리 가입

https://sentry.io/welcome/

Application Performance Monitoring & Error Tracking Software

 

14일 체험판으로 사용할 수 있고, 14일 이후에는 개발자용으로 변경된다

개발자용은 기본적인 기능들만 사용가능하며 추가적인 기능들은 제한된다(ex. 특정 에러 기록하지 않기)

 

가입절차는 조직 이름 설정 - 사용하는 플랫폼 설정만 하면 완료된다

 

 

2) 프로젝트에 sentry 설치

npx @sentry/wizard@latest -i reactNative --saas --org (설정한 조직명) --project react-native

 

@sentry/wizard로 설치하게되면 초기화나 소스맵(변환된 코드와 작성코드를 연결 -> 에러부분을 알아보기 쉽게) 등이 자동으로 설정된다

 

설치할 때 아래의 것들을 묻는데 나는 모두 yes로 설치함

• Do you want to enable Session Replay to help debug issues?
  사용자가 앱을 어떻게 사용했는지 화면 녹화처럼 재현하는 기능 사용할건지?
• Do you want to enable the Feedback Widget to collect feedback from your users?
  피드백 위젯(사용자에게 직접 피드백을 받을 수 있도록 팝업을 띄우는 것)사용할건지?
• Looks like you have Prettier in your project. Do you want to run it on your files?
  프로젝트에서 Prettier을 발견했는데 포맷팅 해줄까?

 

3) 오류보내서 대시보드에서 확인하기

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

<Button
  title="Try!"
  onPress={() => {
    Sentry.captureException(new Error('First error'));
    Sentry.nativeCrash();   // 네이티브 크래시 
  }}
/>

 

버튼 누르면 대시보드에서 에러가 들어온걸 확인할 수 있다

 

 

https://docs.sentry.io/platforms/react-native/features/

Offline storage of events:

• Android: Offline caching when a device is offline; we send a report once the application is restarted.
• iOS: Offline caching when a device is unable to connect; we send a report once we receive another event.

 

참고로 네이티브 크래시는 앱이 꺼지고 다시 앱을 키거나(안드로이드) 다음 이벤트가 발생했을 때(iOS) sentry에 에러가 전송된다

(안드로이드는 릴리즈 모드에서만 작동한다고 함 TEST - Sentry Client Crash (only works in release mod) )

 

 

4. 대시보드 확인

sentry는 발생한 이벤트 로그에 대해 다양한 정보를 제공한다

• stack trace : 에러 코드 및 설명
• session replay : 영상으로 보여줌(설치할 때 물어본거)
• breadcrumbs : 이벤트 발생 과정 - 로그와 요청 정보, 사용자의 터치 확인(타임라인)
• trace preview : 시간 순서대로 어떤 에러가 어떤 위치(코드 경로/트랜잭션)에서 발생했는지
• tags : 디바이스, 릴리스, 사용자 지정 태그 등 필터용 정보
• context : 좀 더 자세한 정보 - 필터 안됨

 

 

5. 활용하기 - 에러를 디테일하게 기록하기

1) 에러가 발생한 화면/유저id를 기록하고 싶다

- Sentry.getGlobalScope().setTag를 사용하면 전역적으로 에러 발생시 태그가 기록됨

- Sentry.setTag는 해당 에러에서만 태그가 기록됨

// Home.tsx
const { id } = useAppSelector(state => state.auth.userInfo);

useEffect(() => {
  // sentry - 유저 아이디 저장
  Sentry.getGlobalScope().setTag('global', id || 'unknown');
}, [id]);

 

 

 

2) 유저의 이벤트를 좀 더 상세히 기록하고 싶다

- 브래드크럼스에 화면 이동 및 버튼 컴포넌트 클릭 시 브래드크럼스에 기록하도록 설정

// App.tsx - 화면이동 기록하기
const routeNameRef = useRef<string>();
const navigationRef = createNavigationContainerRef();

<NavigationContainer
  ref={navigationRef}
  onStateChange={() => { // 화면이 전환될 때 동작
    const prevRouteName = routeNameRef.current;  // 이전 화면 이름
    const currRouteName = navigationRef.current?.getCurrentRoute()?.name;  // getCurrentRoute() - 현재 화면이름
    if (prevRouteName !== currRouteName) {
      // 화면이름 브래드크럼 추가
      Sentry.addBreadcrumb({
        category: 'navigation',
        message: `Navigated to ${currRouteName}`,
        level: 'info',
      });
      // 에러 발생 스크린 태그 설정
      Sentry.setTag('screen', currRouteName);
    }
    // 여기서 현재 화면 이름을 저장 → 다음에 쓸 이전 화면
    routeNameRef.current = currentRouteName;
  }}
>

            
// 버튼 공통컴포넌트 - 버튼 클릭 기록하기
<TouchableWithoutFeedback
  onPress={() => {
    Sentry.addBreadcrumb({
      category: 'ui.action',
      message: `User clicked Bottom Button - ${title}`,
      level: 'info',
    });
  }}
>

 

 

3) replay 텍스트만 마스킹하기

Sentry.init({
  integrations: [
    Sentry.mobileReplayIntegration({
      maskAllText: true,
      maskAllImages: false,
      maskAllVectors: false,
    }),
  ],

 

 

6. 후기

에러기록을 어떻게 설정하느냐가 중요한 것 같다. 추가적인 설정을 하지 않으면 뭔진 모르겠지만 에러만 쌓인다. 그리고 생각보다 replay기능도 중요한 것 같다. 브래드크럼스에서 타임라인으로 기록이 되지만 생각보다 눈에 확 들어오진 않아서 텍스트를 제외하고 마스킹해서 실제 유저가 어떻게 동작했는지 살펴보는게 도움이 많이됐다. sentry로 몰랐던 에러를 잡게 되어 실제 유용성을 느껴보니 좀 더 잘 활용해야겠다는 생각이 든다. 

 

 

 

참고)

https://tech.kakaopay.com/post/frontend-sentry-monitoring/

Sentry로 우아하게 프론트엔드 에러 추적하기 | 카카오페이 기술 블로그