React native with Sentry

React-native에 Sentry를 적용하기

어플은 운영하면서 Firebase Analytics를 적용한 후 사용자들의 액션 혹은 Mau, 나라별 사용자 등 많은 정보를 얻을 수 있었다.

여기서 더 나아가서 나는 사용자들이 가지고 있는 기기마다 어떤 에러가 발생하는지 확인하고 싶었다.

선택지가 두 가지 있었는데

Firebase crashlytics 와 Sentry 가 있었다.
처음에는 Firebase Analytics를 사용하니까 에러 툴도 Firebase crashlytics를 쓸까 생각하였지만,

밑의 나와있는 투표 결과를 보고 그냥 Sentry를 쓰자고 결심했다.

• 출처 https://www.saashub.com/compare-firebase-crashlytics-vs-sentry-io

그래서 Sentry를 적용하기로 했다!

Sentry는 에러, 이슈등 전문적으로 다루는 서비스다.

적용 방법은 매우 간단했다.

1. Sentry 가입

밑에 사이트에 들어가서 가입을 한 후 project 생성을 한다.

Sentry 공식문서: https://sentry.io

React-Native Sentry: https://docs.sentry.io/platforms/react-native/

2. Sentry 설치

npm install --save @sentry/react-native

npx @sentry/wizard -i reactNative -p ios android

cd ios
pod install

위의 커맨드를 실행 한 후

3. Configure설정을 한다

Sdk 호출

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

Sentry.init({
  dsn: "mydsn"
});

dsn은 sentry에 가입하고 프로젝트를 생성하면 주는 key다.

project 선택 후 setting에 들어간 뒤 Client Keys (DSN)에 들어가면 DSN키를 볼 수 있다.
복사한 후 입력한다.

최상위 파일에서 App을 sentry로 감싼다.

export default Sentry.wrap(App);

4. 테스트

밑의 코드들로 테스트를 할 수 있다.

throw new Error("My first Sentry error!");

Sentry.nativeCrash();

이런식으로 거의 실시간으로 반영된다.

5. 실제 에러 처리

실제로 에러를 처리할 때는

try {
  aFunctionThatMightFail();
} catch (err) {
  Sentry.captureException(err);
}

Sentry.captureException(err);
로 해주면 된다.

만약 원하는 메시지를 보내고 싶으면 밑의 코드를 사용하면 된다.

Sentry.captureMessage("Something went wrong");

실제 기기와 어떤 기기에서 어떤 페이지에서 에러가 발생했는지도 로그에 담긴다!!!