[RN] Google Firebase Analytics & Crashlytics 설치 및 세팅 가이드 : 0.80.2+ 버전 기준

해당 글에서는 Google Firebase Analytics & Crashlytics 설치 세팅 방법에 대해 알아봅니다. Swift와 Kotlin 환경 내에서 구성이 됩니다.

💡 [참고] 이전 react-native의 0.80.2 버전 아래에 대한 설치에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.

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

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

 

 

1) React Native Firebase

---

 💡 React Native Firebase

- React Native 애플리케이션에서 Firebase 서비스를 사용할 수 있게 해주는 라이브러리입니다.
- Firebase는 Google이 제공하는 클라우드 기반 플랫폼으로, 앱 개발에 필요한 다양한 기능을 제공합니다.
- React Native Firebase를 사용하면 사용자 인증, 데이터베이스, 저장소, 푸시 알림 등 다양한 Firebase 기능을 쉽게 구현할 수 있습니다.

 

 

1. React Native Firebase 특징

---

장점	설명
크로스 플랫폼 개발	React Native Firebase는 iOS 및 Android 플랫폼 모두에서 작동하므로 개발자는 단일 코드베이스로 앱을 개발할 수 있습니다.
실시간 데이터 동기화	Firebase의 실시간 데이터베이스를 사용하면 앱에서 실시간으로 데이터를 동기화 할 수 있습니다.
인증 및 사용자 관리	Firebase Authentication을 사용하여 앱에서 사용자 인증 및 관리를 간편하게 처리할 수 있습니다.
푸시 알림 및 메시징	Firebase Cloud Messaging을 통해 푸시 알림 및 메시지를 전송하고 관리할 수 있습니다.
애널리틱스 및 성능 모니터링	Firebase의 애널리틱스 및 성능 모니터링 도구를 사용하여 앱의 사용 통계 및 성능을 추적할 수 있습니다.
클라우드 기능	Firebase의 클라우드 기능을 사용하여 앱에서 백엔드 기능을 실행하고 관리할 수 있습니다.

 

2. Google Firebase Analytics

---

💡 Google Firebase Analytics

- 구글이 제공하는 앱 분석 서비스로, 모바일 앱과 웹 서비스에서 발생하는 사용자 행동을 수집·분석해 주는 무료 툴입니다.
- 2020년 이후에는 이름이 Google Analytics for Firebase 또는 Firebase용 Google Analytics로 통합되어 불리고 있으며, 현재는 GA4(Google Analytics 4)와 동일한 기반을 사용합니다.

구분	주요 기능	설명
데이터 수집	자동 이벤트 추적	앱 설치, 첫 실행, 업데이트, 인앱 구매, 클릭 등 자동으로 기록
	커스텀 이벤트	개발자가 직접 정의한 이벤트(logEvent) 추가 가능
	사용자 속성(User Properties)	연령, 성별, 국가, 기기 정보 등 자동 수집 + 커스텀 속성 지정
분석	실시간 리포트	현재 접속자 수, 이벤트 발생 현황을 실시간으로 확인
	퍼널 분석	특정 전환 과정(회원가입 → 장바구니 → 결제)에서 이탈률 분석
	리텐션 분석	설치 후 N일 차 재방문/재사용률 측정
	세그먼트 분석	조건별 사용자 그룹(예: VIP 유저, 특정 국가 유저) 비교 분석
마케팅/운영 지원	유입 경로 분석	광고, 검색, 직접 방문 등 유입 채널 파악
	A/B 테스트	Remote Config와 연계해 실험 그룹별 기능/디자인 제공
	광고/수익 분석	Google Ads, AdMob과 연동해 광고 성과 추적
고급 분석	BigQuery 연동	원시 데이터를 SQL 기반으로 심층 분석
	ML/예측 분석	BigQuery ML 또는 Google Cloud ML과 결합해 예측 모델 구축
통합성	Firebase 전반 통합	Crashlytics, Remote Config, Cloud Messaging 등과 데이터 공유

 

 

 

3. Google Firebase Crashlytics

---

💡 Google Firebase Crashlytics

- 앱에서 발생하는 충돌(crash)과 오류를 실시간으로 수집, 분석해주는 무료 서비스입니다.
- 앱 안정성을 높이는 데 최적화된 도구로, 개발자가 빠르게 문제를 재현·분석·수정할 수 있도록 돕습니다.

분류	기능	설명
실시간 오류 추적	Crash 리포트	앱에서 발생하는 크래시/에러를 자동 수집
	실시간 대시보드	Firebase Console에서 오류 발생 현황을 실시간 확인 가능
오류 분석	스택 트레이스 제공	어떤 코드 라인에서 문제가 발생했는지 추적 가능
	사용자 영향도 파악	특정 크래시로 영향을 받은 사용자 수, 비율 표시
	Issue 그룹화	동일한 원인의 충돌을 하나의 이슈로 묶어 관리
상세 정보 제공	기기/OS 정보	발생 당시 기종, OS 버전, 앱 버전, 배터리, 네트워크 상태 등 자동 수집
	Breadcrumb 로그	크래시 직전 실행된 이벤트/로그 확인 가능
알림/대응	알림 연동	Slack, Email, Jira 등과 연동해 즉시 알림
	우선순위 파악	사용자 수·빈도 기반으로 중요한 이슈 먼저 해결 가능
통합성	Firebase와 연동	Analytics와 연결해 “특정 이벤트 → 크래시” 흐름 추적 가능
	멀티플랫폼 지원	iOS, Android, Unity, Flutter, React Native 등 지원

 

 

2) Google Firebase 웹 페이지 설정 접속

---

💡 Google Firebase 웹 페이지 설정 접속

- Google Firebase에 가입이 되어있다는 가정하에 Google Firebase Analytics& Crashlytics를 설정하는 방법에 대해 확인해 봅니다.

 

 

1. 공식 사이트로 접속합니다.

---

Firebase | Google's Mobile and Web App Development Platform

 

2. ‘콘솔로 이동’ 버튼을 누릅니다.

---

 

 

3. ‘새 Firebase 프로젝트 만들기‘ 버튼을 누릅니다.

---

 

 

4. ‘프로젝트 이름’을 작성 - ‘계속’ 버튼을 누릅니다.

---

 

 

5. Default Account for Firebase를 선택하고 ‘프로젝트 만들기’ 버튼을 누릅니다

---

 

6. 생성된 프로젝트에 들어가서 ‘+앱 추가’ 버튼을 누릅니다.

---

 

 

7. [iOS] 아이콘을 선택합니다

---

 

 

8. [iOS] 각각 항목을 추가합니다

---

💡 각각 항목을 추가합니다

- Apple 번들 ID: Bundle Identifier 값을 입력해줍니다. Xcode 내에서 확인하실 수 있습니다
- 앱 닉네임: 구분용으로 입력합니다
- App Store ID: 출시된 앱이라면 입력해줍니다.

 

💡 Xcode 내에 Bundle Identifier 값을 입력하면 됩니다.

 

9. [iOS] GoogleService-Info.plist 다운로드로 파일을 다운로드 해둡니다

---

 

 

10. [iOS] 모두 다음으로 우선 넘어갑니다

---

 

 

 

11. [Android] 안드로이드 아이콘을 선택합니다

---

 

 

 

 

12. [Android] 각각 항목을 입력합니다.

---

💡 각각 항목을 입력합니다.

- Android 패키지 이름: app/build.gradle 내에 applicationId 값을 입력합니다.
- 앱 닉네임: 구분용으로 입력합니다
- App Store ID: 출시된 앱이라면 입력해 줍니다.

 

💡 app/build.gradle 파일 내에 applicationId를 입력하시면 됩니다.

 

 

13. [Android] google-services.json 다운로드 버튼을 누릅니다

---

 

 

14. [Android] 모두 다음으로 우선 넘어갑니다

---

 

 

15. 구성을 완료하였습니다

---

 

 

2) 소스 코드 내 다운로드 파일 위치하기

---

💡 소스 코드 내 다운로드 파일 위치하기

- 이전 단계에서 다운로드하였던 파일을 소스코드 내에 이를 위치시킵니다.

 

1. Android

---

 

1.1. android/app 경로 내에 아래의 파일을 추가합니다

---

 

 

2. iOS

---

 

2.1. iOS 프로젝트 내에 파일(GoogleService-Info.plist)을 붙여 넣기를 합니다

---

 

 

2.2. 다운로드 경로를 잡아준다 루트> 프로젝트 > Add Files to “프로젝트”

---

 

 

 

3) 공통 : 소스코드 설정

---

 

1. 라이브러리 설치

---

 

# Install & setup the app module
yarn add @react-native-firebase/app @react-native-firebase/crashlytics @react-native-firebase/analytics

 

 

2. firebase.json

---

 

💡 firebase.json

- 세부적인 firebase 설정을 지정합니다.
- crashlytics_debug_enabled: Crashlytics(앱 충돌 리포트 툴)를 디버그 빌드에서도 동작하도록 활성화.
- crashlytics_is_error_generation_on_js_crash_enabled: React Native에서 JS 레벨의 에러도 강제로 Crashlytics 이벤트로 기록되게 함.

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

 

💡 [참고] 해당 파일을 github 환경에 추가하려면 아래의 명령어를 입력하면 됩니다.

git add -f android/app/google-services.json

 

 

3) 안드로이드 소스코드 설정

---

 

1. build.gradle

---

 

 

라이브러리	설명
com.google.gms:google-services	Firebase 서비스와 앱을 연결하는 Google Services Gradle Plugin
com.google.firebase:firebase-crashlytics-gradle	Firebase Crashlytics와 Gradle 빌드를 연결하는 Crashlytics Gradle Plugin

buildscript {
	dependencies {
		classpath("com.android.tools.build:gradle")
		classpath("com.facebook.react:react-native-gradle-plugin")
		classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
		
        // 해당 부분 추가
		classpath 'com.google.gms:google-services:4.4.1'
		classpath 'com.google.firebase:firebase-crashlytics-gradle:3.0.2'
	}
}

 

 

 

2. app/build.gradle

---

 

// 최상단에 위치
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.google.firebase.crashlytics'

dependencies {
	// dependencies 내에 포함시킴
	implementation platform('com.google.firebase:firebase-bom')
	implementation 'com.google.firebase:firebase-analytics'
	implementation 'com.google.firebase:firebase-crashlytics'
}

 

 

4) iOS 설정

---

 

1. AppDelegate.swift

---

💡 AppDelegate.swift

- import Firebase 부분을 추가합니다
- application 내에 FirebaseApp.configure()를 추가하였습니다.

// 추가
import Firebase

@main
class AppDelegate: RCTAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    self.moduleName = "ThreeHundredAppTemplate"  // TODO 변경 필요
    self.dependencyProvider = RCTAppDependencyProvider()

    // You can add your custom initial props in the dictionary below.
    // They will be passed down to the ViewController used by React Native.
    self.initialProps = [:]

	// 추가
	FirebaseApp.configure()

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

 

 

2. Podfile

---

 

$RNFirebaseAnalyticsWithoutAdIdSupport = true
$RNFirebaseAnalyticsEnableAdSupport = true
$RNFirebaseAsStaticFramework = true

target 'TodayCigarette' do
  config = use_native_modules!

  # [firebase] Google Firebase option
  use_frameworks! :linkage => :static
  

 

 

설정	의미	설정 상태
$RNFirebaseAnalyticsWithoutAdIdSupport	광고 ID 없이 Analytics만 최소 빌드	false → 광고 ID 포함
$RNFirebaseAnalyticsEnableAdSupport	Ads 연동 여부	false → 광고 캠페인 추적 가능
$RNFirebaseAsStaticFramework	Static Framework 빌드 여부	true → 충돌 적고 앱 크기 최적화

 

5) 테스트 코드

---

 

1. App.tsx

---

 

import analytics, { getAnalytics, logEvent } from '@react-native-firebase/analytics';
import crashlytics from '@react-native-firebase/crashlytics';

useEffect(() => {
	console.log('📡 Firebase Analytics 테스트 시작');
	const analytics = getAnalytics();
	logEvent(analytics, 'test_event', { user: 'jonghoon' })
		.then(() => console.log('✅ test_event 전송 완료'))
		.catch((e) => console.error('❌ 전송 실패', e));
}, []);

useEffect(() => {
	const crashlytics = getCrashlytics();
	log(crashlytics, '🔥 앱 시작됨');
	setUserId(crashlytics, 'jonghoon');
	setAttributes(crashlytics, { env: REACT_NATIVE_APP_MODE });
	recordError(crashlytics, new Error('🔥 테스트용 오류'));

	console.log('✅ Crashlytics 로그 전송 테스트 완료');
}, []);

 

 

 

2. Google Firebase Analytics 결과 확인

---

💡 Google Firebase Analytics 결과 확인

- 위에 코드에 따라서 실행한 결과를 확인합니다.

 

 

3. Google Firebase Crashlytics

---

💡 Google Firebase Crashlytics

- 위에 코드 내에 강제로 발생시켰던 오류에 대해서 아래와 같이 출력이 되었습니다.

 

 

 

오늘도 감사합니다. 😀