[React-native CLI] react-native에 Google Firebase Analytics Firebase-Crashlytics 적용

Firebase Analytics와 Firebase Crashlytics를 적용하면 앱의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

 

Firebase Analytics

• 사용자의 행동을 추적하고 분석할 수 있습니다.
  : 이를 통해 사용자가 앱에서 어떻게 상호 작용하는지 이해하고 사용자 경험을 개선할 수 있습니다.
• 사용자가 언제 앱을 이탈하는지 식별할 수 있습니다.
  : 이를 통해 이탈 지점을 개선하고 사용자 이탈률을 줄일 수 있습니다.
• 사용자의 관심사와 행동 패턴을 이해할 수 있습니다.
  : 이를 통해 개발자는 앱의 타겟 사용자를 더 잘 이해하고 사용자 중심의 기능을 개발할 수 있습니다.

 

Firebase Crashlytics

• 앱에서 발생하는 충돌을 모니터링하고 식별합니다.
  : 앱이 충돌하거나 중단되면 Crashlytics는 해당 문제를 신속하게 보고하여 신속한 해결을 돕습니다.
• 앱의 오류를 디버그하고 해결할 수 있습니다.
  : Crashlytics는 오류 발생 시 발생한 코드와 함께 오류 보고서를 제공하여 개발자가 문제를 신속하게 식별하고 해결할 수 있도록 돕습니다.

Firebase Analytics와 Firebase Crashlytics는 안정성 및 성능 향상을 위해 안드로이드 및 iOS 앱에 널리 사용되는 인기 있는 도구 중 하나입니다.

---

 

참고블로그

https://adjh54.tistory.com/254

[RN] React Native Firebase Analytics + Crashlytics 이해 및 설정 방법 : Andriod

 

Google Firebase Analytics 웹 페이지 설정

---

firebase 접속

https://firebase.google.com/?hl=ko

Firebase | Google’s Mobile and Web App Development Platform

 

1. "시작하기" 클릭
2. "프로젝트 이름" 작성
3. "계속" 클릭
4. 프로젝트 생성되면 android 아이콘 클릭
5. 각각의 값 채워 넣기 (Android 패키지 이름, 앱 닉네임(선택사항), 디버그 서명 인증서 SHA-1(선택사항))

 

5. 디버그 서명 인증서 SHA-1(선택사항) 구성방법

keytool -J-Duser.language=en -list -v -alias androiddebugkey -keystore ./android/app/debug.keystore

• 해당 명령어를 수행하여 SHA-1 keystore를 발급받는다.
• 비밀번호는 입력하지 않고 Enter를 누른다.

SHA-1은 터미널에 나옵니다.

이 값을 넣어도 파이어베이스에서는 오류로 나와서 해줄 필요 없을 것 같습니다.

 

6. 구성파일 다운로드

Download google-services.json을 클릭하시고 이미지와 똑같은 위치에 넣어주시면 됩니다.

 

React Native Google Analytics 소스코드 내 설정

---

1. 라이브러리 추가

# @react-native-firebase/app 모듈 설치
$ npm install @react-native-firebase/app

# @react-native-firebase/analytics 모듈 설치
$ npm install @react-native-firebase/analytics

참고블로그에서는 ios 설정 때문에 cd ios/ && pud install을 했지만

저는 안드로이드 전용 앱임으로 cd ios/ && pud install을 안 했습니다.

 

2. bulid.gradle 설정

androild/bulid.gradle

classpath 'com.google.gms:google-services:4.3.15'

classpath가 보이는 곳에 코드 추가하기

 

 

android/app/bulid.gradle

apply plugin: "com.google.gms.google-services"

apply plugin이 보이는 곳에 코드 추가하기

implementation 'com.google.firebase:firebase-analytics'

implementation 보이는 곳에 코드 추가하기

 

3. 파이어베이스 사이트에서 확인

왼쪽에 Analytics Dashborad 클릭해서 확인

 

Google Firebase Crashlytics 설치

---

1. 라이브러리 설치

# @react-native-firebase/app 모듈 설치
$ npm install @react-native-firebase/app

# @react-native-firebase/crashlytics 모듈 설치
$ npm install @react-native-firebase/crashlytics

 

2. firebase.json 작성

{
  "react-native": {
    "crashlytics_debug_enabled": true
  }
}

firebase.json을 해당 위치에 만들어주시오 코드를 넣어주세요.

 

3. build.gradle 설정

android/build.gradle

classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.9'

classpath가 보이는 곳에 코드 추가하기

 

 

android/app/bulid.gradle

apply plugin: 'com.google.firebase.crashlytics'

apply plugin이 보이는 곳에 코드 추가하기

implementation 'com.google.firebase:firebase-crashlytics'

implementation 보이는 곳에 코드 추가하기

 

4. 강제로 crash 로그 발생시키고 확인

import crashlytics from '@react-native-firebase/crashlytics';

// 강제로 crash 로그를 발생시켜 확인.
useEffect(() => {
	crashlytics().crash();
}, []);

 

App.tsx

import React, {useEffect} from 'react';
import crashlytics from '@react-native-firebase/crashlytics';

const App = () => {
  // 강제로 crash 로그를 발생시켜 확인.
  useEffect(() => {
    crashlytics().crash();
  }, []);

  return (
  	...
  );
};

export default App;

 

작성한 뒤 npm run android 하시면, 화면이 실행되지 않고 꺼지고

파이어베이스에서 Crashlytics에 들어가셔서 확인하시면 crash 된 걸 확인하실 수 있습니다.

이건 제가 여러 번 해서 이렇게 나온 겁니다.