DEV Community

Cover image for Integrating Firebase Analytics and Crashlytics in React Native
Sergiu
Sergiu

Posted on

Integrating Firebase Analytics and Crashlytics in React Native

#reactnative #firebase #typescript

I decided to write this tutorial after Client ask me to integrate Crashlytics and Analytics from Firebase, and I din't find something decent and clear on how to integrate and https://rnfirebase.io/analytics/ dosen't provide the totaly right and updated, clear code. And migration to v22 also dosn't help a lot.

Integrating Firebase Analytics and Crashlytics in React Native (v0.72+)

This tutorial walks you through how to integrate Firebase Analytics and Crashlytics into a React Native app using Expo SDK 52+ and React Native Firebase packages. The focus is Android, with no native code changes required.

Prerequisites

  • React Native app using Expo SDK 52+
  • Create a Firebase project at https://console.firebase.google.com
  • Download google-services.json from Firebase console and place it in your project root

Install Packages 

yarn add @react-native-firebase/app @react-native-firebase/analytics @react-native-firebase/crashlytics
Enter fullscreen mode Exit fullscreen mode

Firebase Configuration File

Create a firebase.json file in the root of your project with the following config:

{ "react-native": { "crashlytics_debug_enabled": true, "crashlytics_disable_auto_disabler": true, "crashlytics_auto_collection_enabled": true, "crashlytics_is_error_generation_on_js_crash_enabled": true, "crashlytics_javascript_exception_handler_chaining_enabled": true, "analytics_auto_collection_enabled": true, "analytics_collection_deactivated": false } }
Enter fullscreen mode Exit fullscreen mode

This enables automatic crash logging, JS error chaining, and analytics collection.

Create a TrackingService Class 

// tracking/TrackingService.ts import { getAnalytics, logEvent, logScreenView, } from '@react-native-firebase/analytics'; import { getCrashlytics, setAttributes, setCrashlyticsCollectionEnabled, setUserId, } from '@react-native-firebase/crashlytics'; interface EventParams { [key: string]: string | number | boolean; } class TrackingService { // Logs crash or error events (e.g., exceptions) static async recordError(error: Error, context: Record<string, string> = {}) { const crashlytics = getCrashlytics(); if (context && Object.keys(context).length > 0) { await crashlytics.setAttributes(context); // Add custom error context } await crashlytics.recordError(error); // Report the error to Firebase if (__DEV__) { console.error('Tracked error:', error, context); } } // Log any custom event (e.g., "checkout", "screen_loaded") static async logEvent(eventName: string, params: EventParams = {}) { const analytics = getAnalytics(); await logEvent(analytics, eventName, params); if (__DEV__) { console.log('Tracked event:', eventName, params); } } // Tracks screen transitions static async logScreenView(screenName: string) { const analytics = getAnalytics(); await logScreenView(analytics, { screen_name: screenName, }); if (__DEV__) { console.log('Tracked screen view:', screenName); } } // Add device/user context to crash reports (e.g., ID, session, role) static async setDeviceContext(context: Record<string, string>) { const crashlytics = getCrashlytics(); await setCrashlyticsCollectionEnabled(crashlytics, true); await setAttributes(crashlytics, context); // Add custom context data await setUserId(crashlytics, context.deviceId); // Optional: set user ID } } export default TrackingService;
Enter fullscreen mode Exit fullscreen mode

Usage Examples 

import TrackingService from './tracking/TrackingService'; // Record a handled error TrackingService.recordError(new Error('Something went wrong'), { screen: 'Home', deviceId: 'T12345', }); // Log a custom event TrackingService.logEvent('voucher_redeemed', { id: 'abc123', discount: 20, }); // Log screen view TrackingService.logScreenView('PaymentSuccess'); // Set context on app start or login TrackingService.setDeviceContext({ deviceId: 'T12345', role: 'admin', });
Enter fullscreen mode Exit fullscreen mode

P.S. And YES this tutorial is written using AI, but it use my code after a lot of changes and fixes.

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.