[No QA] Add React Native Firebase Performance monitoring

android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply plugin: "com.google.firebase.firebase-perf"
 apply from: '../../node_modules/react-native-unimodules/gradle.groovy'
 apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
 
@@ -233,6 +234,9 @@ dependencies {
         implementation jscFlavor
     }
 
+    implementation platform("com.google.firebase:firebase-bom:20.0.2")
+    implementation "com.google.firebase:firebase-perf"
+
     // GIF support
     implementation 'com.facebook.fresco:fresco:2.3.0'
     implementation 'com.facebook.fresco:animated-gif:2.3.0'

android/app/src/debug/AndroidManifest.xml

@@ -4,5 +4,10 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning">
+        <meta-data
+            android:name="firebase_performance_logcat_enabled"
+            android:value="true"
+        />
+    </application>
 </manifest>

android/app/src/main/java/com/expensify/chat/ExpensifyAppPackage.java

@@ -0,0 +1,29 @@
+package com.expensify.chat;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class ExpensifyAppPackage implements ReactPackage {
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new StartupTimer(reactContext));
+
+        return modules;
+    }
+
+}

android/app/src/main/java/com/expensify/chat/MainApplication.java

@@ -42,6 +42,7 @@ protected List<ReactPackage> getPackages() {
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // packages.add(new MyReactNativePackage());
           packages.add(new PlaidPackage());
+          packages.add(new ExpensifyAppPackage());
 
           // Add unimodules
           List<ReactPackage> unimodules = Arrays.<ReactPackage>asList(
@@ -76,6 +77,11 @@ public void onCreate() {
           FirebaseCrashlytics.getInstance().setCrashlyticsCollectionEnabled(false);
       }
 
+      // Start the "js_load" custom performance tracing metric. This timer is stopped by a native
+      // module in the JS so we can measure total time starting in the native layer and ending in
+      // the JS layer.
+      StartupTimer.start();
+
       // Increase SQLite DB write size
       try {
         Field field = CursorWindow.class.getDeclaredField("sCursorWindowSize");

android/app/src/main/java/com/expensify/chat/StartupTimer.java

@@ -0,0 +1,39 @@
+package com.expensify.chat;
+import android.util.Log;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.google.firebase.perf.FirebasePerformance;
+import com.google.firebase.perf.metrics.Trace;
+
+public class StartupTimer extends ReactContextBaseJavaModule {
+    StartupTimer(ReactApplicationContext context) {
+        super(context);
+    }
+
+    private static Trace trace = null;
+
+    @Override
+    public String getName() {
+        return "StartupTimer";
+    }
+
+    @ReactMethod
+    public void stop() {
+        if (trace == null) {
+            return;
+        }
+
+        trace.stop();
+    }
+
+    public static void start() {
+        if (BuildConfig.DEBUG) {
+            Log.d("StartupTimer", "Metric tracing disabled in DEBUG");
+        } else {
+            trace = FirebasePerformance.getInstance().newTrace("js_loaded");
+            trace.start();
+        }
+    }
+}

android/build.gradle

@@ -18,7 +18,8 @@ buildscript {
     dependencies {
         classpath("com.android.tools.build:gradle:4.1.0")
         classpath("com.google.gms:google-services:4.3.4")
-        classpath("com.google.firebase:firebase-crashlytics-gradle:2.3.0")
+        classpath("com.google.firebase:firebase-crashlytics-gradle:2.7.1")
+        classpath("com.google.firebase:perf-plugin:1.4.0")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"

ios/ExpensifyCash/AppDelegate.m

@@ -5,6 +5,7 @@
 #import <React/RCTLinkingManager.h>
 #import <React/RCTRootView.h>
 #import <Firebase.h>
+#import "RCTStartupTimer.h"
 
 #import "RNBootSplash.h"
 
@@ -74,6 +75,10 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 
   [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // <- initialization using the storyboard file name
 
+  // Start the "js_load" custom performance tracing metric. This timer is stopped by a native
+  // module in the JS so we can measure total time starting in the native layer and ending in
+  // the JS layer.
+  [RCTStartupTimer start];
   return YES;
 }
 

ios/ExpensifyCash/RCTStartupTimer.h

@@ -0,0 +1,19 @@
+//
+//  RCTStartupTimer.h
+//  ExpensifyCash
+//
+//  Created by Marc Glasser on 7/21/21.
+//
+#import <React/RCTBridgeModule.h>
+#import <FirebasePerformance/FIRPerformance.h>
+
+#ifndef RCTStartupTimer_h
+#define RCTStartupTimer_h
+
+
+#endif /* RCTStartupTimer_h */
+
+@interface RCTStartupTimer : NSObject <RCTBridgeModule>
++ (void)start;
+
+@end

ios/ExpensifyCash/RCTStartupTimer.m

@@ -0,0 +1,33 @@
+//
+//  RCTStartupTimer.m
+//  ExpensifyCash
+//
+//  Created by Marc Glasser on 7/21/21.
+//
+
+#import "RCTStartupTimer.h"
+
+@implementation RCTStartupTimer
+
+static FIRTrace *trace = nil;
+
++ (void)start {
+  #if DEBUG
+    // We don't want to record this on debug since it will skew the metrics we collect
+    NSLog(@"[StartupTimer] Metric tracing disabled in DEBUG");
+  #else
+    trace = [FIRPerformance startTraceWithName:@"js_loaded"];
+  #endif
+}
+
+RCT_EXPORT_METHOD(stop)
+{
+  if (trace) {
+    [trace stop];
+  }
+}
+
+// To export a module named StartupTimer
+RCT_EXPORT_MODULE(StartupTimer);
+
+@end