Integrating Zipy with Firebase Crashlytics: A Complete Guide

If you’re using Firebase to capture crashes, ANRs, or freezes in your app, Zipy takes that data to the next level with an easy, seamless integration. 

You can link a Zipy session directly to your crashes, then watch exactly what the user did before things broke.

Along the way, you can spot any network issues or framework errors that triggered the crash or freeze, giving you true end-to-end debugging.

Let's examine the steps required to integrate Zipy with Firebase Crashlytics.

Step-by-Step Guide to Integrating Zipy with Firebase Crashlytics

Zipy supports Firebase Crashlytics integration with React Native, Flutter, as well as Swift, and though the steps to integrate are similar, they aren't identical. Let's divide this into two sections: 

1. For React Native 

2. For Flutter 

we will soon add Swift too.

Integrating Zipy with Firebase Crashlytics In a React Native App

If your app is built with React Native, connecting Zipy with Firebase Crashlytics is a quick way to supercharge your crash reports. Crashlytics will still capture the technical crash details, but by adding Zipy’s session URL, you can watch the exact user actions that led to the crash, like rewinding time to see the bug in action.

Step 1: Create an account on Zipy

The first thing you need to do is to create an account in Zipy if you haven't already. For that, you need to sign up and go through the onboarding flow. 

After filling in all the entries, you will be navigated to the Device selection screen, where you need to select the “Mobile” option.

After that, there are a couple of steps where you will be required to select your Role in your project or organization as well as what you want to achieve using Zipy. Then you will be successfully signed up for Zipy.

Step 2: Install Zipy React Native SDK in your mobile application.

After you have successfully signed up for Zipy, the obvious next step is to install the SDK for Zipy React native in your application. 

For that, go to the terminal of the source code of your application and hit the following command.

‍npm install zipyai-react-native 

Once you have completed the above step, you also need to install the following package:

npm install react-native-fs

After that, the next and final step is to import the Zipy module and initialize it in your source file as below, which you have used as the entry point for your application, e.g., index.js

import zipy from 'zipyai-react-native';
zipy.init('YOUR_API_KEY');

Here, you will get “YOUR_API_KEY” in the project settings section in your Zipy account.

After that, the next step will be to implement “Gesture Capturing” so that when you see the session replay, you come to know the exact gestures, e.g., single taps, double taps, etc, that lead to the screen freeze or crash.

Step 3: Implement Gesture Capturing

Gesture Capture is a Zipy feature that lets you record user gestures inside your React Native app. To turn it on, simply wrap your app with the withGestureCapture wrapper.

For that, first import the “withGestureCapture” in your index file.

import { withGestureCapture } from "zipyai-react-native";

After that, wrap withGestureCapture to your main app.

AppRegistry.registerComponent(appName,()=> withGestureCapture(App));

Once you have done this, it's also good to implement “Screen transition capture”.

Step 4: Implement Screen Transition Capture

To implement this you need to import “ScreenNavigation” from 'zipy-react-native' and add “onStateChange” to your NavigationContainer.

Firstly, import the module,

import { ScreenNavigation } from 'zipyai-react-native';

After that, add onStateChange to your navigation container:

return (  <NavigationContainer onStateChange={ScreenNavigation}>  )

Or

return (  <NavigationContainer onStateChange={(state)=> {ScreenNavigation(state)}}>  )

By the end of this step, you have completed setting up Zipy to debug the ANR or crash captured by Crashlytics. Next, let's head to integrating Zipy with Firebase Crashlytics.

Step 5: Get the Zipy Session URL in Your App

First, you need to grab the current Zipy session URL so it can travel alongside your crash reports.

Zipy provides a handy “getCurrentSessionUrl()” function for this. It dynamically fetches the session link for the exact user session in progress.

Here’s how it should look in your code:

const sessionUrl = zipy.getCurrentSessionUrl();
console.log('Current session URL:', sessionUrl);

This link will later be sent to Firebase Crashlytics, so you can jump straight from a crash report to the full Zipy replay and see exactly what happened before things went wrong.

Step 6: Send the Zipy session URL to Crashlytics

Attach this URL to Firebase as a custom key so it’s included with every crash or ANR report.

crashlytics().setAttribute('ZipySessionURL', a);

That’s it! From now on, each crash or freeze in Crashlytics will include the ZipySessionURL you passed. You can also see this same URL printed in your console (from the earlier console.log()), and opening it in your browser will take you straight to the Zipy session replay for that crash.

Integrating Zipy with Firebase Crashlytics In a Flutter App

If you’re building your app with Flutter, you can still link Zipy session replays to your Firebase Crashlytics reports -  the steps are almost the same as React Native, with a few syntax differences. By passing the Zipy session URL into Crashlytics as a custom key, you’ll be able to trace any crash or ANR back to the exact user session and watch what happened before things went wrong.

Step 1: Create an account on Zipy

Just like we did before in the “Integrating Zipy with Firebase Crashlytics In a React Native App” section, here also we need to follow exactly the same steps to create an account on Zipy.

Step 2:  Install the Zipy Flutter SDK in your mobile application.

After you have successfully signed up for Zipy, the obvious next step is to install the Zipy Flutter SDK in your application. 

For that, firstly, you need to install the Zipy plugin as follows,

flutter pub add zipy_flutter

This will add a line like this to your package's pubspec.yaml and run flutter pub get

dependencies:  zipy_flutter: ^0.1.1 (the version might be different depending on the latest version)

After that, you need to import the Zipy module and initialize it in your “main.dart” or another source file used as the entry point:

import 'package:zipy_flutter/zipy_flutter.dart'; // import
void main() {
WidgetsFlutterBinding.ensureInitialized(); // Initialize the binding.
Zipy.init(key: 'YOUR_API_KEY');
runApp(MyApp());
}

Here, you will get “YOUR_API_KEY” in the project settings section in your Zipy account.

After that, the next step will be to implement “Gesture Capturing” so that when you see the session replay, you come to know the exact gestures, e.g., single taps, double taps, etc, that lead to the screen freeze or crash.

Step 3: Implement Gesture Capturing

To implement Gesture Capturing, you simply need to wrap your application with the ZipyWrapper wrapper as below:

import 'package:zipy_flutter/zipy_flutter.dart';
Future<void> main() async {
    WidgetsFlutterBinding.ensureInitialized();
    Zipy.init(key: 'YOUR_API_KEY');
    runApp(const ZipyWrapper(child: MyApp()));
 }

Or

import 'package:zipy_flutter/zipy_flutter.dart';

  @override
  Widget build(BuildContext context) {
    return ZipyWrapper(
      child: MaterialApp(
        navigatorObservers: [ZipyNavigationObserver()],
        home: const HomeScreen(),
        routes: {
          '/profile': (context) => const ProfileScreen(),
        },
      ),
    );
  }

Next, let's move on to implementing “Screen transition capture”.

Step 4: Implement Screen Transition Capture

To implement this, import the Observer into your material app:

MaterialApp(
        navigatorObservers: [ZipyNavigationObserver()], //need to add this for capturing screen transitions
        home: const HomeScreen(),
        routes: {
          '/profile': (context) => const ProfileScreen(),
        },
      ),

Step 5: Get the Zipy Session URL in Your App

Just like in the React Native example, you’ll start by fetching the session URL that Zipy generates using the getCurrentSessionUrl() function. Print it to the console so you can verify it’s working.

Here’s how it should look in your code:

final sessionUrl = await Zipy.getCurrentSessionURL();
print('Current session URL: $sessionUrl');

This is the same code snippet we used earlier in the React Native section to retrieve the session URL.

Step 6: Send the Zipy session URL to Crashlytics

The syntax here is a bit different from React Native, but the goal is still the same: attach the session URL you retrieved to Firebase as a custom key. This ensures the link is included with every crash or ANR report.

FirebaseCrashlytics.instance.setCustomKey('ZipySessionURL',sessionUrl );

That’s it! From now on, every crash or freeze recorded in Crashlytics for your Flutter app will include the ZipySessionURL you added as a custom key. You’ll also see this same URL printed in your console (from the earlier print() statement), and opening it in your browser will take you directly to the Zipy session replay for that crash.