[ReactNative]리액트 네이티브 앱에서의 에러 관리: Sentry 적용 방법

ChoiSunAh, 최선아·2023년 9월 21일

1. 센트리 가입

1-1. 가입후 새 리엑트 네이티브 프로젝트를 만들어주세요
1-2. 해당 프로젝트로 들어가 > 설정 > Client Keys(DSN) > DSN을 복사해두세요

2. 설치 및 설정

저는 Expo bare 프로젝트를 사용하고 있지만, react-native에서 제공하는 라이브러리를 선택하여 사용하였습니다

2-1. 먼저 라이브러리를 설치해주세요

yarn add @sentry/react-native

2-2. 프로젝트 루트의 App.js 에 아래 코드를 참고하여 설정합니다

(또는 index.js 에서 설정이 가능합니다)

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

Sentry.init({
  dsn: 'sentry 사이트에서 받은 dsn을 넣어주세요'
});

2-3. App 컴포넌트를 Sentry로 감싸줍니다

class App extends Component {
...
  render() {
    return (
      ...
    );
  }
}

export default Sentry.wrap(App);

2-4. 테스트를 위해 Error를 발생시키는 코드를 추가합니다

class App extends Component {

  componentDidMount() {
    throw new Error('My first Sentry error!'); //이 부분을 추가해주세요
  }
  
  render() {
    return (
      ...
    );
  }
}

2-5. 아래 코드를 터미널에서 실행하여 sentry와 프로젝트를 연결합니다

yarn add @sentry/wizard

yarn sentry-wizard -i reactNative -p ios android


// 이 명령어의 구성요소들을 분석해보면:

// sentry-wizard: Sentry의 설정 마법사입니다. 이 도구를 사용하여 프로젝트를 Sentry에 연결하는 과정을 자동화하거나 간소화 할 수 있습니다.
// -i reactNative: 이 옵션은 프로젝트의 통합 타입(integration type)을 설정합니다. 여기서는 reactNative로 React Native 프로젝트임을 지정하였습니다.
// -p ios android: 이 옵션은 프로젝트가 타겟으로 하는 플랫폼(platform)을 설정합니다. 여기서는 iOS와 Android 두 플랫폼 모두를 대상으로 합니다.

명령어를 실행하고 나면 마지막에
Have you successfully sent a test event?

이라고 질문이 뜰겁니다 yes 라고 타이핑후 엔터 누르시면 됩니다