Merge pull request #4760 from kidroca/kidroca/add-rn-performance-flipper-plugin

Performance tracking with flipper-plugin-performance

Author: marcaaron

.env.example

@@ -10,3 +10,4 @@ USE_NGROK=false
 USE_WEB_PROXY=false
 USE_WDYR=false
 CAPTURE_METRICS=false
+ONYX_METRICS=false

babel.config.js

@@ -1,3 +1,5 @@
+require('dotenv').config();
+
 const defaultPresets = ['@babel/preset-react', '@babel/preset-env', '@babel/preset-flow'];
 const defaultPlugins = [
     // Adding the commonjs: true option to react-native-web plugin can cause styling conflicts
@@ -34,6 +36,27 @@ const metro = {
     ],
 };
 
+/*
+ * We use Flipper, <React.Profiler> and react-native-performance to capture/monitor stats
+ * By default <React.Profiler> is disabled in production as it adds small overhead
+ * When CAPTURE_METRICS is set we're explicitly saying that we want to capture metrics
+ * To enable the <Profiler> for release builds we add these aliases */
+if (process.env.CAPTURE_METRICS) {
+    const path = require('path');
+    const profilingRenderer = path.resolve(
+        __dirname,
+        './node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling',
+    );
+
+    metro.plugins.push(['module-resolver', {
+        root: ['./'],
+        alias: {
+            'ReactNativeRenderer-prod': profilingRenderer,
+            'scheduler/tracing': 'scheduler/tracing-profiling',
+        },
+    }]);
+}
+
 module.exports = ({caller}) => {
     // For `react-native` (iOS/Android) caller will be "metro"
     // For `webpack` (Web) caller will be "@babel-loader"

ios/Podfile.lock

@@ -105,6 +105,8 @@ PODS:
     - OpenSSL-Universal (= 1.1.180)
   - Flipper-Glog (0.3.6)
   - Flipper-PeerTalk (0.0.4)
+  - flipper-plugin-react-native-performance (0.6.0):
+    - React
   - Flipper-RSocket (1.3.1):
     - Flipper-Folly (~> 2.5)
   - FlipperKit (0.75.1):
@@ -412,7 +414,7 @@ PODS:
     - React-Core
   - react-native-document-picker (5.1.0):
     - React-Core
-  - react-native-flipper (0.100.0):
+  - react-native-flipper (0.103.0):
     - React-Core
   - react-native-image-picker (4.0.3):
     - React-Core
@@ -598,6 +600,7 @@ DEPENDENCIES:
   - Flipper-Folly (~> 2.5.3)
   - Flipper-Glog (= 0.3.6)
   - Flipper-PeerTalk (~> 0.0.4)
+  - flipper-plugin-react-native-performance (from `../node_modules/flipper-plugin-react-native-performance/ios`)
   - Flipper-RSocket (~> 1.3)
   - FlipperKit (~> 0.75.1)
   - FlipperKit/Core (~> 0.75.1)
@@ -731,6 +734,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/FBLazyVector"
   FBReactNativeSpec:
     :path: "../node_modules/react-native/React/FBReactNativeSpec"
+  flipper-plugin-react-native-performance:
+    :path: "../node_modules/flipper-plugin-react-native-performance/ios"
   glog:
     :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
   onfido-react-native-sdk:
@@ -877,7 +882,7 @@ SPEC CHECKSUMS:
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   EXHaptics: 337c160c148baa6f0e7166249f368965906e346b
   FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
-  FBReactNativeSpec: 884d4cc2b011759361797a4035c47e10099393b5
+  FBReactNativeSpec: d2bbf7ed8374a5ef7e82afdce19c4e50731f1f0e
   Firebase: 54cdc8bc9c9b3de54f43dab86e62f5a76b47034f
   FirebaseABTesting: 4cb61aeeb50f60680af1c01fff781dfaf9293916
   FirebaseAnalytics: 4751d6a49598a2b58da678cc07df696bcd809ab9
@@ -892,6 +897,7 @@ SPEC CHECKSUMS:
   Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c
   Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
+  flipper-plugin-react-native-performance: c639bbaf0e0444bab8eeb86dad93651c2e13291e
   Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
   FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
@@ -923,7 +929,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 500a59626037be5b3b3d89c5151bc3baa9abf1a9
   react-native-config: d8b45133fd13d4f23bd2064b72f6e2c08b2763ed
   react-native-document-picker: 0e3602a4064da040321bafad6848d8b0edcb1d55
-  react-native-flipper: 1943b82f2e494c77b741eb1ed257b6734a334b83
+  react-native-flipper: 169e8ba429b73ad637ce007337ce4b415e783799
   react-native-image-picker: 4089335b89b625d4e34d53fb249c48a7a791b3ea
   react-native-netinfo: 52cf0ee8342548a485e28f4b09e56b477567244d
   react-native-pdf: 4b5a9e4465a6a3b399e91dc4838eb44ddf716d1f

package-lock.json

@@ -84,7 +84,7 @@
     "react-native-image-picker": "^4.0.3",
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-modal": "^11.10.0",
-    "react-native-onyx": "git+https://github.com/Expensify/react-native-onyx.git#f3b24dd2c947bb4b9b60dc3718dc170f93f751f0",
+    "react-native-onyx": "git+https://github.com/Expensify/react-native-onyx.git#6eadd7f73fca87e6551e43607ec78f645e17ef50",
     "react-native-pdf": "^6.2.2",
     "react-native-performance": "^2.0.0",
     "react-native-permissions": "^3.0.1",
@@ -150,6 +150,7 @@
     "eslint-plugin-detox": "^1.0.0",
     "eslint-plugin-jest": "^24.1.0",
     "flipper-plugin-bridgespy-client": "^0.1.9",
+    "flipper-plugin-react-native-performance": "^0.6.0",
     "html-webpack-plugin": "^4.3.0",
     "jest": "^26.5.2",
     "jest-circus": "^26.5.2",
@@ -159,7 +160,8 @@
     "portfinder": "^1.0.28",
     "pusher-js-mock": "^0.3.3",
     "react-hot-loader": "^4.12.21",
-    "react-native-flipper": "^0.100.0",
+    "react-native-flipper": "^0.103.0",
+    "react-native-performance-flipper-reporter": "^2.0.0",
     "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "16.13.1",
     "rn-async-storage-flipper": "0.0.10",

package.json

@@ -61,4 +61,5 @@ export default {
         UNREAD: '/favicon-unread.png',
     },
     CAPTURE_METRICS: lodashGet(Config, 'CAPTURE_METRICS', false),
+    ONYX_METRICS: lodashGet(Config, 'ONYX_METRICS', false),
 };

src/CONFIG.js

@@ -7,11 +7,13 @@ import ComposeProviders from './ComposeProviders';
 import CONST from '../CONST';
 import Log from '../libs/Log';
 import listenToStorageEvents from '../libs/listenToStorageEvents';
+import {canCaptureOnyxMetrics} from '../libs/canCaptureMetrics';
 
 // Initialize the store when the app loads for the first time
 Onyx.init({
     keys: ONYXKEYS,
     safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
+    captureMetrics: canCaptureOnyxMetrics(),
     initialKeyStates: {
 
         // Clear any loading and error messages so they do not appear on app startup