chore: cherry-pick custom spans PR (#12031)

## **Description**

Cherry pick: #11935

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/components/Nav/App/index.js

@@ -131,6 +131,7 @@ import OptionsSheet from '../../UI/SelectOptionSheet/OptionsSheet';
 import FoxLoader from '../../../components/UI/FoxLoader';
 import { AppStateEventProcessor } from '../../../core/AppStateEventListener';
 import MultiRpcModal from '../../../components/Views/MultiRpcModal/MultiRpcModal';
+import { trace, TraceName, TraceOperation } from '../../../util/trace';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -354,7 +355,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 {

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) {