chore: Sentry Performance Tracing for Onboarding Flows

app/actions/multiSrp/index.ts

@@ -18,6 +18,12 @@ import { store } from '../../store';
 
 ///: BEGIN:ONLY_INCLUDE_IF(seedless-onboarding)
 import ReduxService from '../../core/redux';
+import {
+  bufferedEndTrace,
+  bufferedTrace,
+  TraceName,
+  TraceOperation,
+} from '../../util/trace';
 import { selectSeedlessOnboardingLoginFlow } from '../../selectors/seedlessOnboardingController';
 ///: END:ONLY_INCLUDE_IF(seedless-onboarding)
 
@@ -77,10 +83,37 @@ export async function importNewSecretRecoveryPhrase(mnemonic: string) {
     // on Error, wallet should notify user that the newly added seed phrase is not synced properly
     // user can try manual sync again (phase 2)
     const seed = new Uint8Array(inputCodePoints.buffer);
-    await SeedlessOnboardingController.addNewSeedPhraseBackup(
-      seed,
-      newKeyring.id,
-    );
+    let addSeedPhraseSuccess = false;
+    try {
+      bufferedTrace({
+        name: TraceName.OnboardingAddSrp,
+        op: TraceOperation.OnboardingSecurityOp,
+      });
+      await SeedlessOnboardingController.addNewSeedPhraseBackup(
+        seed,
+        newKeyring.id,
+      );
+      addSeedPhraseSuccess = true;
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+
+      bufferedTrace({
+        name: TraceName.OnboardingAddSrpError,
+        op: TraceOperation.OnboardingError,
+        tags: { errorMessage },
+      });
+      bufferedEndTrace({
+        name: TraceName.OnboardingAddSrpError,
+      });
+
+      throw error;
+    } finally {
+      bufferedEndTrace({
+        name: TraceName.OnboardingAddSrp,
+        data: { success: addSeedPhraseSuccess },
+      });
+    }
   }
   ///: END:ONLY_INCLUDE_IF(seedless-onboarding)
 

app/components/UI/OptinMetrics/index.js

@@ -47,6 +47,8 @@ import Icon, {
   IconSize,
   IconColor,
 } from '../../../component-library/components/Icons/Icon';
+import { setupSentry } from '../../../util/sentry/utils';
+import { flushBufferedTraces, discardBufferedTraces } from '../../../util/trace';
 
 const createStyles = ({ colors }) =>
   StyleSheet.create({
@@ -330,6 +332,8 @@ class OptinMetrics extends PureComponent {
       // and disable analytics
       clearOnboardingEvents();
       await metrics.enable(false);
+      await setupSentry(); // Re-setup Sentry with enabled: false
+      discardBufferedTraces();
     }, 200);
     this.continue();
   };
@@ -346,6 +350,8 @@ class OptinMetrics extends PureComponent {
     } = this.props;
 
     await metrics.enable();
+    await setupSentry(); // Re-setup Sentry with enabled: true
+    await flushBufferedTraces();
 
     // Handle null case for marketing consent
     if (

app/components/Views/AccountBackupStep1/index.js

@@ -40,6 +40,8 @@ import Icon, {
   IconName,
   IconSize,
 } from '../../../component-library/components/Icons/Icon';
+import { TraceName, bufferedEndTrace } from '../../../util/trace';
+import { useMetrics } from '../../hooks/useMetrics';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -105,6 +107,7 @@ const AccountBackupStep1 = (props) => {
   const [hasFunds, setHasFunds] = useState(false);
   const { colors } = useTheme();
   const styles = createStyles(colors);
+  const { isEnabled: isMetricsEnabled } = useMetrics();
 
   const track = (event, properties) => {
     const eventBuilder = MetricsEventBuilder.createEventBuilder(event);
@@ -164,13 +167,23 @@ const AccountBackupStep1 = (props) => {
     // Get onboarding wizard state
     const onboardingWizard = await StorageWrapper.getItem(ONBOARDING_WIZARD);
     !onboardingWizard && props.setOnboardingWizardStep(1);
-    props.navigation.navigate('OptinMetrics', {
-      onContinue: () => {
-        props.navigation.navigate('OnboardingSuccess', {
-          showPasswordHint: false,
-        });
-      },
-    });
+
+    bufferedEndTrace({ name: TraceName.OnboardingNewSrpCreateWallet });
+    bufferedEndTrace({ name: TraceName.OnboardingJourneyOverall });
+
+    if (isMetricsEnabled()) {
+      props.navigation.navigate('OnboardingSuccess', {
+        showPasswordHint: false,
+      });
+    } else {
+      props.navigation.navigate('OptinMetrics', {
+        onContinue: () => {
+          props.navigation.navigate('OnboardingSuccess', {
+            showPasswordHint: false,
+          });
+        },
+      });
+    }
   };
 
   const showRemindLater = () => {

app/components/Views/AccountStatus/index.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 import { View, Image, TouchableOpacity, ScrollView } from 'react-native';
 import Text from '../../../component-library/components/Texts/Text';
 import {
@@ -28,6 +28,14 @@ import { PREVIOUS_SCREEN } from '../../../constants/navigation';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import { IMetaMetricsEvent } from '../../../core/Analytics/MetaMetrics.types';
+import {
+  bufferedEndTrace,
+  bufferedTrace,
+  TraceName,
+  TraceOperation,
+} from '../../../util/trace';
+import { getTraceTags } from '../../../util/sentry/tags';
+import { store } from '../../../store';
 
 import AccountStatusImg from '../../../images/already_exist.png';
 
@@ -38,6 +46,7 @@ interface AccountStatusProps {
 interface AccountRouteParams {
   accountName?: string;
   oauthLoginSuccess?: boolean;
+  onboardingTraceCtx?: string;
 }
 
 const AccountStatus = ({ type = 'not_exist' }: AccountStatusProps) => {
@@ -48,6 +57,8 @@ const AccountStatus = ({ type = 'not_exist' }: AccountStatusProps) => {
   const accountName = (route.params as AccountRouteParams)?.accountName;
   const oauthLoginSuccess = (route.params as AccountRouteParams)
     ?.oauthLoginSuccess;
+  const onboardingTraceCtx = (route.params as AccountRouteParams)
+    ?.onboardingTraceCtx;
 
   useLayoutEffect(() => {
     const marginLeft = 16;
@@ -81,15 +92,45 @@ const AccountStatus = ({ type = 'not_exist' }: AccountStatusProps) => {
     trackOnboarding(MetricsEventBuilder.createEventBuilder(event).build());
   };
 
+  useEffect(() => {
+    const traceName = type === 'found'
+      ? TraceName.OnboardingNewSocialAccountExists
+      : TraceName.OnboardingExistingSocialAccountNotFound;
+
+    bufferedTrace({
+      name: traceName,
+      op: TraceOperation.OnboardingUserJourney,
+      tags: getTraceTags(store.getState()),
+      parentContext: onboardingTraceCtx,
+    });
+    return () => {
+      bufferedEndTrace({ name: traceName });
+    };
+  }, [onboardingTraceCtx, type]);
+
   const navigateNextScreen = (
     targetRoute: string,
     previousScreen: string,
     metricEvent: string,
   ) => {
+    const nextScenarioTraceName = type === 'found'
+      ? TraceName.OnboardingExistingSocialLogin
+      : TraceName.OnboardingNewSocialCreateWallet;
+    bufferedTrace({
+      name: nextScenarioTraceName,
+      op: TraceOperation.OnboardingUserJourney,
+      tags: {
+        ...getTraceTags(store.getState()),
+        source: 'account_status_redirect',
+      },
+      parentContext: onboardingTraceCtx,
+    });
+
     navigation.dispatch(
       StackActions.replace(targetRoute, {
         [PREVIOUS_SCREEN]: previousScreen,
         oauthLoginSuccess,
+        onboardingTraceCtx,
       }),
     );
     track(

app/components/Views/ChoosePassword/index.js

@@ -74,6 +74,12 @@ import Routes from '../../../constants/navigation/Routes';
 import { withMetricsAwareness } from '../../hooks/useMetrics';
 import fox from '../../../animations/Searching_Fox.json';
 import LottieView from 'lottie-react-native';
+import {
+  TraceName,
+  bufferedEndTrace,
+  bufferedTrace,
+  TraceOperation,
+} from '../../../util/trace';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -224,6 +230,7 @@ class ChoosePassword extends PureComponent {
   };
 
   mounted = true;
+  passwordSetupAttemptTraceCtx = null;
 
   confirmPasswordInput = React.createRef();
   // Flag to know if password in keyring was set or not
@@ -267,6 +274,16 @@ class ChoosePassword extends PureComponent {
   };
 
   async componentDidMount() {
+    const { route } = this.props;
+    const onboardingTraceCtx = route.params?.onboardingTraceCtx;
+    if (onboardingTraceCtx) {
+      this.passwordSetupAttemptTraceCtx = bufferedTrace({
+        name: TraceName.OnboardingPasswordSetupAttempt,
+        op: TraceOperation.OnboardingUserJourney,
+        parentContext: onboardingTraceCtx,
+      });
+    }
+
     const authData = await Authentication.getType();
     const previouslyDisabled = await StorageWrapper.getItem(
       BIOMETRY_CHOICE_DISABLED,
@@ -311,6 +328,10 @@ class ChoosePassword extends PureComponent {
 
   componentWillUnmount() {
     this.mounted = false;
+    if (this.passwordSetupAttemptTraceCtx) {
+      bufferedEndTrace({ name: TraceName.OnboardingPasswordSetupAttempt });
+      this.passwordSetupAttemptTraceCtx = null;
+    }
   }
 
   setSelection = () => {
@@ -364,6 +385,9 @@ class ChoosePassword extends PureComponent {
       this.setState({ loading: false });
 
       if (authType.oauth2Login) {
+        bufferedEndTrace({ name: TraceName.OnboardingNewSocialCreateWallet });
+        bufferedEndTrace({ name: TraceName.OnboardingJourneyOverall });
+
         if (this.props.metrics.isEnabled()) {
           this.props.navigation.reset({
             index: 0,
@@ -424,6 +448,17 @@ class ChoosePassword extends PureComponent {
         wallet_setup_type: 'new',
         error_type: error.toString(),
       });
+
+      const onboardingTraceCtx = this.props.route.params?.onboardingTraceCtx;
+      if (onboardingTraceCtx) {
+        bufferedTrace({
+          name: TraceName.OnboardingPasswordSetupError,
+          op: TraceOperation.OnboardingUserJourney,
+          parentContext: onboardingTraceCtx,
+          tags: { errorMessage: error.toString() },
+        });
+        bufferedEndTrace({ name: TraceName.OnboardingPasswordSetupError });
+      }
     }
   };
 

app/components/Views/ImportFromSecretRecoveryPhrase/index.js

@@ -89,6 +89,12 @@ import SeedphraseModal from '../../UI/SeedphraseModal';
 import { wordlist } from '@metamask/scure-bip39/dist/wordlists/english';
 import { LoginOptionsSwitch } from '../../UI/LoginOptionsSwitch';
 import { useMetrics } from '../../hooks/useMetrics';
+import {
+  TraceName,
+  bufferedEndTrace,
+  bufferedTrace,
+  TraceOperation,
+} from '../../../util/trace';
 
 const MINIMUM_SUPPORTED_CLIPBOARD_VERSION = 9;
 
@@ -115,6 +121,7 @@ const ImportFromSecretRecoveryPhrase = ({
 
   const seedPhraseInputRefs = useRef([]);
   const { toastRef } = useContext(ToastContext);
+  const passwordSetupAttemptTraceCtxRef = useRef(null);
 
   const passwordInput = React.createRef();
   const confirmPasswordInput = React.createRef();
@@ -266,6 +273,13 @@ const ImportFromSecretRecoveryPhrase = ({
     termsOfUse();
   }, [termsOfUse]);
 
+  useEffect(() => () => {
+    if (passwordSetupAttemptTraceCtxRef.current) {
+      bufferedEndTrace({ name: TraceName.OnboardingPasswordSetupAttempt });
+      passwordSetupAttemptTraceCtxRef.current = null;
+    }
+  }, []);
+
   const updateBiometryChoice = async (biometryChoice) => {
     await updateAuthTypeStorageFlags(biometryChoice);
     setBiometryChoice(biometryChoice);
@@ -483,6 +497,15 @@ const ImportFromSecretRecoveryPhrase = ({
       return;
     }
     setCurrentStep(currentStep + 1);
+    // Start the trace when moving to the password setup step
+    const onboardingTraceCtx = route.params?.onboardingTraceCtx;
+    if (onboardingTraceCtx) {
+      passwordSetupAttemptTraceCtxRef.current = bufferedTrace({
+        name: TraceName.OnboardingPasswordSetupAttempt,
+        op: TraceOperation.OnboardingUserJourney,
+        parentContext: onboardingTraceCtx,
+      });
+    }
   };
 
   const isContinueButtonDisabled = () =>
@@ -562,6 +585,9 @@ const ImportFromSecretRecoveryPhrase = ({
         });
         !onboardingWizard && setOnboardingWizardStep(1);
 
+        bufferedEndTrace({ name: TraceName.OnboardingExistingSrpImport });
+        bufferedEndTrace({ name: TraceName.OnboardingJourneyOverall });
+
         if (isMetricsEnabled()) {
           navigation.reset({
             index: 1,
@@ -604,6 +630,17 @@ const ImportFromSecretRecoveryPhrase = ({
           wallet_setup_type: 'import',
           error_type: error.toString(),
         });
+
+        const onboardingTraceCtx = route.params?.onboardingTraceCtx;
+        if (onboardingTraceCtx) {
+          bufferedTrace({
+            name: TraceName.OnboardingPasswordSetupError,
+            op: TraceOperation.OnboardingUserJourney,
+            parentContext: onboardingTraceCtx,
+            tags: { errorMessage: error.toString() },
+          });
+          bufferedEndTrace({ name: TraceName.OnboardingPasswordSetupError });
+        }
       }
     }
   };