React Native Firebase-Crashlytics 적용

적용 배경

앱 상용 배포 후 구글 콘솔을 통해 몇몇 비정상 종료건이 발견되었으나 구글 콘솔의 로그만으로는 정확한 원인 파악이 어려워 에러 추적을 위해 Crashlystic을 적용하기로 하였다.

비정상 종료

사용 라이브러리

@react-native-firebase/crashlytics

 

적용 과정

App Module Setting 필요

https://rnfirebase.io/

Firebase Crashlytic 세팅 전 앱 모듈 ( @react-native-firebase/app )이 먼저 세팅 되어 있어야 한다.

React Native Firebase | React Native Firebase

 

안드로이드 세팅

아래 공식문서 번호 순서대로 따라서 적용해준다.

https://rnfirebase.io/crashlytics/android-setup

Crashlytics - Android Setup | React Native Firebase

 

 

연결

Firebase Console의 Crashlystic 탭에서 연결을 시작하면 아래 사진과 같이 연결을 기다린다.

저 상태에서 앱에서 Crash가 일어나면 5분 이내로 연결이 완료된다

MainActivity에 강제종료 코드 추가 테스트 후 지운다.

import com.crashlytics.android.Crashlytics;

// MainActivity
Crashlytics.getInstance().crash();

연결이 되면 아래와 같은 화면으로 바뀌며 에러 추적이 가능해진다.

 

IOS 세팅

아래 Firebase 공식문서 대로 세팅하면 된다.

공식 문서의 UIApplicationDelegate에서 Firebase 모듈을 임포트 하는 설정은

AppDelegate.m 파일에 <Firebase.h>를 임포트 하면 되고 주의 할 점은 FB_SONARKIT_ENABLED 위에서 임포트 해야 된다는 정도이다.

해당 파일의 application:didFinishLaunchingWithOptions: 메서드에 Firebase app 공유 인스턴스를 추가한다.

#import <Firebase.h>

...

#ifdef FB_SONARKIT_ENABLED

...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

...

[FIRApp configure];

...

}

https://firebase.google.com/docs/crashlytics/get-started?platform=iOS&authuser=2#add-sdk

Firebase Crashlytics 시작하기  |  Firebase Documentation

 

연결

생각 해보니까 @react-native-firebase/crashlytics 라이브러리에서는 강제 크래시를 낼 수 있는 메서드를 제공한다.

안드로이드에서도 굳이 MainActivity에서 강제 크래시를 낼 필요가 없을 것 같다.

안드로이드와 같이 첫 크래시 이후 5분 이내로 Crashlytic 탭과 연결이 된다.

import { firebase } from '@react-native-firebase/crashlytics';
...
firebase.crashlytics().crash();

 

세팅 후 설정

https://rnfirebase.io/crashlytics/usage

아래 공식문서를 따라 firebase.json을 설정해 필요한 로그만 노출하게 설정을 할 수 있다.

Crashlytics | React Native Firebase

 

성과

 

아래와 같이 좀 더 상세한 에러 추적이 가능해졌다.

관련된 깃헙 이슈가 있다면 링크도 안내해준다. (편안)

덕분에 해당 이슈를 해결하였으며 향후 같은 이슈 발생시 다시 알려주겠다고 한다.

 

헤이딜러의 기술블로그에 Crashlytic을 활용하는 다양한 방법을 소개하고 있어 참고하면 좋을 것 같다.

https://medium.com/prnd/%EB%82%98%EB%8A%94-%EB%84%A4%EA%B0%80-%EC%99%9C-%EC%98%A4%EB%A5%98%EB%A5%BC-%EB%83%88%EB%8A%94%EC%A7%80-%EC%95%8C%EA%B3%A0-%EC%9E%88%EB%8B%A4-crashlytics-%EA%B8%B0%EB%8A%A5-%EC%96%B4%EB%94%94%EA%B9%8C%EC%A7%80-%EC%8D%A8%EB%B4%A4%EB%8B%88-977357559684