cherry-pick 9ac1488

MetaMask · Oct 16, 2024 · edb5b29 · edb5b29
1 parent e7ae695
commit edb5b29
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 27 deletions.
diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js
@@ -127,6 +127,7 @@ import { SnapsExecutionWebView } from '../../../lib/snaps';
 import OptionsSheet from '../../UI/SelectOptionSheet/OptionsSheet';
 import FoxLoader from '../../../components/UI/FoxLoader';
 import { AppStateEventProcessor } from '../../../core/AppStateEventListener';
+import { trace, TraceName, TraceOperation } from '../../../util/trace';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -335,7 +336,15 @@ const App = (props) => {
       setOnboarded(!!existingUser);
       try {
         if (existingUser) {
-          await Authentication.appTriggeredAuth();
+          await trace(
+            {
+              name: TraceName.BiometricAuthentication,
+              op: TraceOperation.BiometricAuthentication,
+            },
+            async () => {
+              await Authentication.appTriggeredAuth();
+            },
+          );
           // we need to reset the navigator here so that the user cannot go back to the login screen
           navigator.reset({ routes: [{ name: Routes.ONBOARDING.HOME_NAV }] });
         } else {

diff --git a/app/components/Views/LockScreen/index.js b/app/components/Views/LockScreen/index.js
@@ -22,6 +22,7 @@ import {
 import Routes from '../../../constants/navigation/Routes';
 import { CommonActions } from '@react-navigation/native';
 import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics';
+import { trace, TraceName, TraceOperation } from '../../../util/trace';
 
 const LOGO_SIZE = 175;
 const createStyles = (colors) =>
@@ -134,10 +135,19 @@ class LockScreen extends PureComponent {
       // Retrieve the credentials
       Logger.log('Lockscreen::unlockKeychain - getting credentials');
 
-      await Authentication.appTriggeredAuth({
-        bioStateMachineId,
-        disableAutoLogout: true,
-      });
+      await trace(
+        {
+          name: TraceName.BiometricAuthentication,
+          op: TraceOperation.BiometricAuthentication,
+        },
+        async () => {
+          await Authentication.appTriggeredAuth({
+            bioStateMachineId,
+            disableAutoLogout: true,
+          });
+        },
+      );
+
       this.setState({ ready: true });
       Logger.log('Lockscreen::unlockKeychain - state: ready');
     } catch (error) {

diff --git a/app/components/Views/Login/index.js b/app/components/Views/Login/index.js
@@ -59,6 +59,12 @@ import { LoginViewSelectors } from '../../../../e2e/selectors/LoginView.selector
 import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
 import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics';
 import { downloadStateLogs } from '../../../util/logs';
+import {
+  trace,
+  endTrace,
+  TraceName,
+  TraceOperation,
+} from '../../../util/trace';
 
 const deviceHeight = Device.getDeviceHeight();
 const breakPoint = deviceHeight < 700;
@@ -245,6 +251,10 @@ class Login extends PureComponent {
   fieldRef = React.createRef();
 
   async componentDidMount() {
+    trace({
+      name: TraceName.LoginToPasswordEntry,
+      op: TraceOperation.LoginToPasswordEntry,
+    });
     this.props.metrics.trackEvent(MetaMetricsEvents.LOGIN_SCREEN_VIEWED);
     BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
 
@@ -368,7 +378,15 @@ class Login extends PureComponent {
     );
 
     try {
-      await Authentication.userEntryAuth(password, authType);
+      await trace(
+        {
+          name: TraceName.AuthenticateUser,
+          op: TraceOperation.AuthenticateUser,
+        },
+        async () => {
+          await Authentication.userEntryAuth(password, authType);
+        },
+      );
 
       Keyboard.dismiss();
 
@@ -436,7 +454,15 @@ class Login extends PureComponent {
     const { current: field } = this.fieldRef;
     field?.blur();
     try {
-      await Authentication.appTriggeredAuth();
+      await trace(
+        {
+          name: TraceName.BiometricAuthentication,
+          op: TraceOperation.BiometricAuthentication,
+        },
+        async () => {
+          await Authentication.appTriggeredAuth();
+        },
+      );
       const onboardingWizard = await StorageWrapper.getItem(ONBOARDING_WIZARD);
       if (!onboardingWizard) this.props.setOnboardingWizardStep(1);
       this.props.navigation.replace(Routes.ONBOARDING.HOME_NAV);
@@ -455,6 +481,7 @@ class Login extends PureComponent {
   };
 
   triggerLogIn = () => {
+    endTrace({ name: TraceName.LoginToPasswordEntry });
     this.onLogin();
   };
 

diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js
@@ -49,6 +49,7 @@ import { OnboardingSelectorIDs } from '../../../../e2e/selectors/Onboarding/Onbo
 import Routes from '../../../constants/navigation/Routes';
 import { selectAccounts } from '../../../selectors/accountTrackerController';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
+import { trace, TraceName, TraceOperation } from '../../../util/trace';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -275,24 +276,33 @@ class Onboarding extends PureComponent {
   };
 
   onPressCreate = () => {
-    const action = async () => {
-      const { metrics } = this.props;
-      if (metrics.isEnabled()) {
-        this.props.navigation.navigate('ChoosePassword', {
-          [PREVIOUS_SCREEN]: ONBOARDING,
-        });
-        this.track(MetaMetricsEvents.WALLET_SETUP_STARTED);
-      } else {
-        this.props.navigation.navigate('OptinMetrics', {
-          onContinue: () => {
-            this.props.navigation.replace('ChoosePassword', {
+    const action = () => {
+      trace(
+        {
+          name: TraceName.CreateNewWalletToChoosePassword,
+          op: TraceOperation.CreateNewWalletToChoosePassword,
+        },
+        () => {
+          const { metrics } = this.props;
+          if (metrics.isEnabled()) {
+            this.props.navigation.navigate('ChoosePassword', {
               [PREVIOUS_SCREEN]: ONBOARDING,
             });
             this.track(MetaMetricsEvents.WALLET_SETUP_STARTED);
-          },
-        });
-      }
+          } else {
+            this.props.navigation.navigate('OptinMetrics', {
+              onContinue: () => {
+                this.props.navigation.replace('ChoosePassword', {
+                  [PREVIOUS_SCREEN]: ONBOARDING,
+                });
+                this.track(MetaMetricsEvents.WALLET_SETUP_STARTED);
+              },
+            });
+          }
+        },
+      );
     };
+
     this.handleExistingUser(action);
   };
 

diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx
@@ -96,6 +96,7 @@ import {
 } from '../../../selectors/notifications';
 import { ButtonVariants } from '../../../component-library/components/Buttons/Button';
 import { useListNotifications } from '../../../util/notifications/hooks/useNotifications';
+
 const createStyles = ({ colors, typography }: Theme) =>
   StyleSheet.create({
     base: {

diff --git a/app/store/index.ts b/app/store/index.ts
@@ -9,6 +9,9 @@ import { Authentication } from '../core';
 import LockManagerService from '../core/LockManagerService';
 import ReadOnlyNetworkStore from '../util/test/network-store';
 import { isE2E } from '../util/test/utils';
+import { trace, endTrace, TraceName, TraceOperation } from '../util/trace';
+import StorageWrapper from './storage-wrapper';
+
 import thunk from 'redux-thunk';
 
 import persistConfig from './persistConfig';
@@ -24,7 +27,7 @@ const pReducer = persistReducer<RootState, any>(persistConfig, rootReducer);
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, import/no-mutable-exports
 let store: Store<RootState, any>, persistor;
-const createStoreAndPersistor = async () => {
+const createStoreAndPersistor = async (appStartTime: number) => {
   // Obtain the initial state from ReadOnlyNetworkStore for E2E tests.
   const initialState = isE2E
     ? await ReadOnlyNetworkStore.getState()
@@ -46,6 +49,24 @@ const createStoreAndPersistor = async () => {
     middlewares.push(createReduxFlipperDebugger());
   }
 
+  const jsStartTime = performance.now();
+
+  trace({
+    name: TraceName.LoadScripts,
+    op: TraceOperation.LoadScripts,
+    startTime: appStartTime,
+  });
+
+  endTrace({
+    name: TraceName.LoadScripts,
+    timestamp: appStartTime + jsStartTime,
+  });
+
+  trace({
+    name: TraceName.CreateStore,
+    op: TraceOperation.CreateStore,
+  });
+
   store = configureStore({
     reducer: pReducer,
     middleware: middlewares,
@@ -54,10 +75,19 @@ const createStoreAndPersistor = async () => {
 
   sagaMiddleware.run(rootSaga);
 
+  endTrace({ name: TraceName.CreateStore });
+
+  trace({
+    name: TraceName.StorageRehydration,
+    op: TraceOperation.StorageRehydration,
+  });
+
   /**
    * Initialize services after persist is completed
    */
-  const onPersistComplete = () => {
+  const onPersistComplete = async () => {
+    endTrace({ name: TraceName.StorageRehydration });
+
     /**
      * EngineService.initalizeEngine(store) with SES/lockdown:
      * Requires ethjs nested patches (lib->src)
@@ -73,6 +103,7 @@ const createStoreAndPersistor = async () => {
      * - TypeError: undefined is not an object (evaluating 'TokenListController.tokenList')
      * - V8: SES_UNHANDLED_REJECTION
      */
+
     store.dispatch({
       type: 'TOGGLE_BASIC_FUNCTIONALITY',
       basicFunctionalityEnabled:
@@ -83,7 +114,17 @@ const createStoreAndPersistor = async () => {
       store.dispatch({
         type: 'FETCH_FEATURE_FLAGS',
       });
-    EngineService.initalizeEngine(store);
+
+    await trace(
+      {
+        name: TraceName.EngineInitialization,
+        op: TraceOperation.EngineInitialization,
+      },
+      () => {
+        EngineService.initalizeEngine(store);
+      },
+    );
+
     Authentication.init(store);
     AppStateEventProcessor.init(store);
     LockManagerService.init(store);
@@ -93,7 +134,16 @@ const createStoreAndPersistor = async () => {
 };
 
 (async () => {
-  await createStoreAndPersistor();
+  const appStartTime = await StorageWrapper.getItem('appStartTime');
+
+  await trace(
+    {
+      name: TraceName.UIStartup,
+      op: TraceOperation.UIStartup,
+      startTime: appStartTime,
+    },
+    async () => await createStoreAndPersistor(appStartTime),
+  );
 })();
 
 export { store, persistor };
diff --git a/app/util/trace.ts b/app/util/trace.ts
@@ -16,6 +16,32 @@ export enum TraceName {
   Middleware = 'Middleware',
   NestedTest1 = 'Nested Test 1',
   NestedTest2 = 'Nested Test 2',
+  NotificationDisplay = 'Notification Display',
+  PPOMValidation = 'PPOM Validation',
+  Signature = 'Signature',
+  LoadScripts = 'Load Scripts',
+  SetupStore = 'Setup Store',
+  LoginToPasswordEntry = 'Login to Password Entry',
+  AuthenticateUser = 'Authenticate User',
+  BiometricAuthentication = 'Biometrics Authentication',
+  EngineInitialization = 'Engine Initialization',
+  CreateStore = 'Create Store',
+  CreateNewWalletToChoosePassword = 'Create New Wallet to Choose Password',
+  StorageRehydration = 'Storage Rehydration',
+  UIStartup = 'Custom UIStartup',
+}
+
+export enum TraceOperation {
+  LoadScripts = 'custom.load.scripts',
+  SetupStore = 'custom.setup.store',
+  LoginToPasswordEntry = 'custom.login.to.password.entry',
+  BiometricAuthentication = 'biometrics.authentication',
+  AuthenticateUser = 'custom.authenticate.user',
+  EngineInitialization = 'custom.engine.initialization',
+  CreateStore = 'custom.create.store',
+  CreateNewWalletToChoosePassword = 'custom.create.new.wallet',
+  StorageRehydration = 'custom.storage.rehydration',
+  UIStartup = 'custom.ui.startup',
 }
 
 const ID_DEFAULT = 'default';
@@ -42,6 +68,7 @@ export interface TraceRequest {
   parentContext?: TraceContext;
   startTime?: number;
   tags?: Record<string, number | string | boolean>;
+  op?: string;
 }
 
 export interface EndTraceRequest {
@@ -151,13 +178,20 @@ function startSpan<T>(
   request: TraceRequest,
   callback: (spanOptions: StartSpanOptions) => T,
 ) {
-  const { data: attributes, name, parentContext, startTime, tags } = request;
+  const {
+    data: attributes,
+    name,
+    parentContext,
+    startTime,
+    tags,
+    op,
+  } = request;
   const parentSpan = (parentContext ?? null) as Span | null;
 
   const spanOptions: StartSpanOptions = {
     attributes,
     name,
-    op: OP_DEFAULT,
+    op: op || OP_DEFAULT,
     // This needs to be parentSpan once we have the withIsolatedScope implementation in place in the Sentry SDK for React Native
     // Reference PR that updates @sentry/react-native: https://github.com/getsentry/sentry-react-native/pull/3895
     parentSpanId: parentSpan?.spanId,