Chidera

Setting up React Native firebase performance monitor (First App)

Chidera Paul Ugwuanyi's photo
Chidera Paul Ugwuanyi
·

6 min read

Setting up React Native firebase performance monitor (First App)

I started adding firebase performance monitor on a bunch of React Native Apps. Here's what I found out along the way. And how I was able to resolve them.

The first App I worked on had this firebase package set up

"@react-native-firebase/analytics": "^10.4.0",
"@react-native-firebase/app": "^10.4.0",
"@react-native-firebase/auth": "^10.4.0",
"@react-native-firebase/crashlytics": "^10.4.0",

First thing is to ensure that @react-native-firebase/app is installed and set up;

Next install firebase performance monitor with 

$ npm install @react-native-firebase/perf

It threw this error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: Test@0.0.1
npm ERR! Found: @react-native-firebase/app@10.8.1
npm ERR! node_modules/@react-native-firebase/app
npm ERR!   @react-native-firebase/app@"^10.4.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @react-native-firebase/app@"12.1.0" from @react-native-firebase/perf@12.1.0
npm ERR! node_modules/@react-native-firebase/perf
npm ERR!   @react-native-firebase/perf@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/chidera/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chidera/.npm/_logs/2021-06-12T09_36_35_672Z-debug.log

Technically, @react-native-firebase/app is at v10.4.0 but @react-native-firebase/perf needs @react-native-firebase/app to be at v12.1.0.

Because of possibility of breaking changes and to override the error, I added --legacy-peer-deps

$ npm install @react-native-firebase/perf --legacy-peer-deps

The next step will be to run 

$ cd ios/ && pod install

which I did and got this error: 

...
Installing RNFBPerf 12.1.0
Installing RNFBStorage 10.4.0
Installing nanopb 2.30906.0 (was 2.30908.0)
[!] The 'Pods-Test' target has libraries with conflicting names: libgoogleutilities.a.

[!] NPM package '@react-native-firebase/perf' depends on '@react-native-firebase/app' v12.1.0 but found v10.4.0, this might cause build issues or runtime crashes.
...

After a lot of digging around, I reckoned that the simplest solution is the one looking at me right now, which is 

[!] NPM package '@react-native-firebase/perf' depends on '@react-native-firebase/app' v12.1.0 but found v10.4.0, this might cause build issues or runtime crashes.

In essence, upgrade '@react-native-firebase/app' to v12.1.0

So I went ahead and did it

$ npm install @react-native-firebase/app@12.1.0

After installing, I had to run pod install, obviously with a --repo-update because of this kind of error 

You have either:
 [!] CocoaPods could not find compatible versions for pod "Firebase/CoreOnly":
  In snapshot (Podfile.lock):
    Firebase/CoreOnly (= 7.3.0, ~> 7.3.0)

  In Podfile:
    RNFBApp (from `../node_modules/@react-native-firebase/app`) was resolved to 12.1.0, which depends on
      Firebase/CoreOnly (= 8.0.0)


You have either:
 * out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
 * changed the constraints of dependency `Firebase/CoreOnly` inside your development pod `RNFBApp`.
   You should run `pod update Firebase/CoreOnly` to apply changes you've made.

What cleared the error was

$ pod install --repo-update

P.S: I made the mistake of looking at the end of the error message only because there were actually two errors there. This will haunt me later.

The pod install --repo-update threw another error 

[!] CocoaPods could not find compatible versions for pod "Firebase/CoreOnly":
  In snapshot (Podfile.lock):
    Firebase/CoreOnly (= 7.3.0, ~> 7.3.0)

  In Podfile:
    RNFBApp (from `../node_modules/@react-native-firebase/app`) was resolved to 12.1.0, which depends on
      Firebase/CoreOnly (= 8.1.1)


You have either:
 * changed the constraints of dependency `Firebase/CoreOnly` inside your development pod `RNFBApp`.
   You should run `pod update Firebase/CoreOnly` to apply changes you've made.

After some poking around, I found out that Firebase/CoreOnly previously at v7.3.0 needs to be upgraded to v8.1.1 because the new @react-native-firebase/app@12.1.0 depends on it.

Funny how that this error was contained in the previous error but I didn't see it. Haunted!

So I need to fix it with 

$ pod update Firebase/CoreOnly

Finally got a success message 

Pod installation complete! There are 122 dependencies from the Podfile and 147 total pods installed.

But... if you have trust issues like I did, you can run chief ol

$ pod install

for confirmation, I got

Pod installation complete! There are 122 dependencies from the Podfile and 147 total pods installed.

To complete the set up, I ran 

$ yarn ios

This rebuilds ios, and everything seems fine. 10 - 15 mins later, I could see the ios Performance metric on the App firebase console.

But...... to set up android,

I ran 

$ yarn android

and here's a new error

> Configure project :react-native-firebase_analytics
:react-native-firebase_analytics package.json found at /Users/chidera/Desktop/TestApp/node_modules/@react-native-firebase/analytics/package.json
:react-native-firebase_app package.json found at /Users/chidera/Desktop/TestApp/node_modules/@react-native-firebase/app/package.json
ReactNativeFirebase WARNING: NPM package '@react-native-firebase/analytics' depends on '@react-native-firebase/app' v10.4.0 but found v12.1.0, this might cause build issues or runtime crashes.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.5/userguide/command_line_interface.html#sec:command_line_warnings

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* Where:
Build file '/Users/chidera/Desktop/TestApp/node_modules/@react-native-firebase/analytics/android/build.gradle' line: 71

* What went wrong:
A problem occurred evaluating project ':react-native-firebase_analytics'.
> No signature of method: firebase_json_224ie9k6lcamcbij9e5up8mld$_run_closure1.doCall() is applicable for argument types: (String) values: [analytics_auto_collection_enabled]
  Possible solutions: doCall(java.lang.Object, java.lang.Object), findAll(), findAll(), isCase(java.lang.Object), isCase(java.lang.Object)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
==============================================================================

2: Task failed with an exception.
-----------
* What went wrong:
A problem occurred configuring project ':react-native-firebase_analytics'.
> compileSdkVersion is not specified. Please add it to build.gradle

Key error points are at:

> ReactNativeFirebase WARNING: NPM package '@react-native-firebase/analytics' depends on '@react-native-firebase/app' v10.4.0 but found v12.1.0, this might cause build issues or runtime crashes.

> * What went wrong:
A problem occurred evaluating project ':react-native-firebase_analytics'.
> No signature of method: firebase_json_8dc0dzjhhantm4hghu09dnzn9$_run_closure1.doCall() is applicable for argument types: (String) values: [analytics_auto_collection_enabled]
  Possible solutions: doCall(java.lang.Object, java.lang.Object), findAll(), findAll(), isCase(java.lang.Object), isCase(java.lang.Object)

> * What went wrong:
A problem occurred configuring project ':react-native-firebase_analytics'.
compileSdkVersion is not specified. Please add it to build.gradle;

I need to fix this before proceeding to set up performance monitor for android. Any one got an idea? I guess it's related to firebase analytics.

This is a hard one. So after a lot of looking around github issues and stackoverflow without success, I decided to: Delete the current "@react-native-firebase/analytics": "^10.4.0" from package.json and reinstall latest firebase analytics with

$ npm i @react-native-firebase/analytics

This pushed the version to 12.1.0.

I then ran 

cd android && ./gradlew clean

Then 

$ cd .. && yarn android

I got a successful android build.

I also ran npx pod-install and yarn ios and got a successful ios build.

To continue performance set up for android, go to /android/build.gradle and add 

buildscript {
    dependencies {
        // ...
        classpath 'com.google.firebase:perf-plugin:1.4.0'
    }

Also go to the top of /android/app/build.gradle file and add 

apply plugin: 'com.android.application'
apply plugin: 'com.google.firebase.firebase-perf'

Make sure it is directly under apply plugin: 'com.android.application'

Finally rebuild android

$ yarn android

And everything works fine and in the firebase console, I could see the android performance metric.

If you enjoyed this article, please Like, share and drop your comments .

You can follow me on twitter: @talk2dera

For the second app where I added Firebase Performance, I faced a different issue, and also documented the processes here

ReactReact NativeFirebaseAndroidiOS