Merge pull request #4197 from Expensify/update-staging-from-main

Author: OSBotify

.github/ISSUE_TEMPLATE/Performance.md

@@ -0,0 +1,40 @@
+---
+name: Report a performance issue
+about: Use to report an issue or propose a solution related to app performance
+title: "[Performance] "
+labels: Engineering
+---
+
+If you haven’t already, check out our [contributing guidelines](https://github.com/Expensify/ReactNativeChat/blob/main/CONTRIBUTING.md) for onboarding and email [email protected] to request to join our Slack channel!
+___
+
+## What performance issue do we need to solve?
+e.g. memory consumption, storage read/write times, React native bridge concerns, inefficient React component rendering, etc.
+
+## What is the impact of this on end-users?
+List specific user experiences that will be improved by solving this problem e.g. app boot time, time to for some interaction to complete, etc.
+
+## List any benchmarks that show the severity of the issue
+Please also provide exact steps taken to collect metrics above if any so we can independently verify the results.
+
+## Proposed solution (if any)
+Please list out the steps you think we should take to solve this issue.
+
+## List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)
+Note: These should be the same as the benchmarks collected before any changes.
+
+## Platform:
+Where is this issue occurring?
+
+- [ ] Web
+- [ ] iOS
+- [ ] Android
+- [ ] Desktop App
+- [ ] Mobile Web
+
+**Version Number:**
+**Logs:** https://stackoverflow.com/c/expensify/questions/4856
+**Notes/Photos/Videos:** Any additional supporting documentation
+**Expensify/Expensify Issue URL:**
+
+[View all open jobs on Upwork](https://www.upwork.com/ab/jobs/search/?q=Expensify%20React%20Native&sort=recency&user_location_match=2)

.github/ISSUE_TEMPLATE/Standard.md

@@ -22,11 +22,11 @@ Can the user still use Expensify without this being fixed? Have you informed the
 ## Platform:
 Where is this issue occurring?
 
- Web
- iOS
- Android
- Desktop App
- Mobile Web
+- [ ] Web
+- [ ] iOS
+- [ ] Android
+- [ ] Desktop App
+- [ ] Mobile Web
 
 **Version Number:**
 **Logs:** https://stackoverflow.com/c/expensify/questions/4856

.github/workflows/deployBlocker.yml

@@ -31,7 +31,7 @@ jobs:
         run: |
           echo "DEPLOY_BLOCKER_URL=${{ github.event.pull_request.html_url }}" >> $GITHUB_ENV
           echo "DEPLOY_BLOCKER_NUMBER=${{ github.event.pull_request.number }}" >> $GITHUB_ENV
-          echo "DEPLOY_BLOCKER_TITLE=${{ github.event.pull_request.title }}" >> $GITHUB_ENV
+          echo "DEPLOY_BLOCKER_TITLE=$(sed -e "s/'/'\\\\''/g; s/\`/\\\\\`/g; 1s/^/'/; \$s/\$/'/" <<< ${{ github.event.pull_request.title }})" >> $GITHUB_ENV
 
       - name: Update StagingDeployCash with new deploy blocker
         uses: Expensify/Expensify.cash/.github/actions/createOrUpdateStagingDeploy@main
@@ -54,7 +54,7 @@ jobs:
               channel: '#deployer',
               attachments: [{
                 color: "#DB4545",
-                text: '💥 New E.cash Deploy Blocker: <${{ env.DEPLOY_BLOCKER_URL }}|${{ env.DEPLOY_BLOCKER_TITLE }}>',
+                text: '💥 New E.cash Deploy Blocker: <${{ env.DEPLOY_BLOCKER_URL }}|'+ `${{ env.DEPLOY_BLOCKER_TITLE }}`.replace(/(^'|'$)/gi, '').replace(/'\''/gi,'\'') + '>',
               }]
             }
         env:

README.md

@@ -45,7 +45,7 @@ You can use any IDE or code editing tool for developing on any platform. Use you
 * Changes applied to Javascript will be applied automatically, any changes to native code will require a recompile
 
 ## Running the Android app 🤖
-* To install the Android dependencies, run: `npm install`, then `gradle` will install all linked dependencies
+* To install the Android dependencies, run: `npm install`
 * Make sure you have Java installed `java -version`. If not, install it by running `npm install -g openjdk8`.
 * To run a on a **Development Emulator**: `npm run android`
 * Changes applied to Javascript will be applied automatically, any changes to native code will require a recompile
@@ -248,7 +248,7 @@ localize the following types of data when presented to the user (even accessibil
 - Phones: see [LocalPhoneNumber](https://github.com/Expensify/Expensify.cash/blob/bdfbafe18ee2d60f766c697744f23fad64b62cad/src/libs/LocalePhoneNumber.js#L51-L52)
 
 In most cases, you will be needing to localize data used in a component, if that's the case, there's a HOC [withLocalize](https://github.com/Expensify/Expensify.cash/blob/37465dbd07da1feab8347835d82ed3d2302cde4c/src/components/withLocalize.js).
-It will abstract most of the logic you need (mostly subscribe to the [PREFERRED_LOCALE](https://github.com/Expensify/Expensify.cash/blob/6cf1a56df670a11bf61aa67eeb64c1f87161dea1/src/ONYXKEYS.js#L88) Onyx key)
+It will abstract most of the logic you need (mostly subscribe to the [NVP_PREFERRED_LOCALE](https://github.com/Expensify/Expensify.cash/blob/6cf1a56df670a11bf61aa67eeb64c1f87161dea1/src/ONYXKEYS.js#L88) Onyx key)
 and is the preferred way of localizing things inside components.
 
 Some pointers:

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"
 
@@ -149,8 +150,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001007904
-        versionName "1.0.79-4"
+        versionCode 1001007905
+        versionName "1.0.79-5"
     }
     splits {
         abi {
@@ -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

@@ -21,6 +21,8 @@
 import org.unimodules.adapters.react.ModuleRegistryAdapter;
 import org.unimodules.adapters.react.ReactModuleRegistryProvider;
 import org.unimodules.core.interfaces.SingletonModule;
+import com.facebook.react.bridge.JSIModulePackage;
+import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 
 public class MainApplication extends MultiDexApplication implements ReactApplication {
 
@@ -40,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(
@@ -53,6 +56,11 @@ protected List<ReactPackage> getPackages() {
         protected String getJSMainModuleName() {
           return "index";
         }
+
+        @Override
+        protected JSIModulePackage getJSIModulePackage() {
+          return new ReanimatedJSIModulePackage();
+        }
       };
 
   @Override
@@ -69,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"