feat: Add performance tracing infrastructure (#11132)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->
- Add initial tracing and performance metrics infrastructure.
Add the `trace`, `endTrace` methods, to be used anywhere in the mobile
code to generate a Sentry traces. Implementation is almost same as we
have in the extension. The only difference is in extension
`withIsolatedScope`, in mobile `withScope` is used because
`@sentry/browser` version mismatch in `@sentry/react-native`. This is
also noted in the `trace.ts` file.
- Add developer options to settings (similar settings [added in
extension](https://github.com/MetaMask/metamask-extension/blob/e858167bb1fee33d4d0be1ab2f8e1ce2b11c7945/ui/pages/settings/developer-options-tab/developer-options-tab.tsx#L50)
)
This adds an easily accessible development action menu where devs wants
to test some functionality locally. Specifically this PR adds generating
nested traces in Sentry.
- New environment variables:
`MM_ENABLE_SETTINGS_PAGE_DEV_OPTIONS` : Needs to be set to `true` in
order to show `Developer Options` in the settings page
`MM_SENTRY_DSN_DEV` : This is explicitly set for `test-metamask` project
and the expected value is in the `.js.env.example`

## **Related issues**

Fixes: MetaMask/mobile-planning#1877

## **Manual testing steps**

1. Go to settings page tab `Developer Options`
2. Tab `Generate Trace Test`
3. Open
`https://metamask.sentry.io/traces/?project=273496&statsPeriod=15m`, in
this link you will be able to see traces that have been send to
`test-metamask` in last 15 minutes
4. See `Developer Test` trace is triggered

## **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**

- [X] 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).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] 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**

- [X] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [X] 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.

.js.env.example

@@ -84,5 +84,11 @@ export GOOGLE_SERVICES_B64=""
 export FEATURES_ANNOUNCEMENTS_ACCESS_TOKEN=
 export FEATURES_ANNOUNCEMENTS_SPACE_ID=
 
-#Multichain Feature flag
+# Enables the Settings Page - Developer Options
+export MM_ENABLE_SETTINGS_PAGE_DEV_OPTIONS="true"
+
+# The endpoint used to submit errors and tracing data to Sentry for dev environment.
+# export MM_SENTRY_DSN_DEV=
+
+# Multichain Feature flag
 export MULTICHAIN_V1=""

app/components/Nav/Main/MainNavigator.js

@@ -18,6 +18,7 @@ import NotificationsView from '../../Views/Notifications';
 import NotificationsDetails from '../../Views/Notifications/Details';
 import OptIn from '../../Views/Notifications/OptIn';
 import AppInformation from '../../Views/Settings/AppInformation';
+import DeveloperOptions from '../../Views/Settings/DeveloperOptions';
 import Contacts from '../../Views/Settings/Contacts';
 import Wallet from '../../Views/Wallet';
 import Asset from '../../Views/Asset';
@@ -314,6 +315,14 @@ const SettingsFlow = () => (
       component={AppInformation}
       options={AppInformation.navigationOptions}
     />
+    {process.env.MM_ENABLE_SETTINGS_PAGE_DEV_OPTIONS === 'true' && (
+      <Stack.Screen
+        name={Routes.SETTINGS.DEVELOPER_OPTIONS}
+        component={DeveloperOptions}
+        options={DeveloperOptions.navigationOptions}
+      />
+    )}
+
     <Stack.Screen
       name="ContactsSettings"
       component={Contacts}

app/components/Views/Settings/DeveloperOptions/DeveloperOptions.styles.ts

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+  return StyleSheet.create({
+    wrapper: {
+      backgroundColor: colors.background.default,
+      flex: 1,
+      padding: 24,
+      paddingBottom: 48,
+    },
+    heading: {
+      marginTop: 16,
+    },
+    desc: {
+      marginTop: 8,
+    },
+    accessory: {
+      marginTop: 16,
+    },
+  });
+};
+
+export default styleSheet;

app/components/Views/Settings/DeveloperOptions/SentryTest.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback } from 'react';
+import { strings } from '../../../../../locales/i18n';
+import { useTheme } from '../../../../util/theme';
+import Text, {
+  TextVariant,
+  TextColor,
+} from '../../../../component-library/components/Texts/Text';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+  ButtonWidthTypes,
+} from '../../../../component-library/components/Buttons/Button';
+import { trace, TraceName } from '../../../../util/trace';
+import { sleep } from '../../../../util/testUtils';
+import { useStyles } from '../../../../component-library/hooks';
+import styleSheet from './DeveloperOptions.styles';
+
+function GenerateTrace() {
+  const theme = useTheme();
+  const { styles } = useStyles(styleSheet, { theme });
+
+  const handleGenerateTraceTest = useCallback(async () => {
+    await trace(
+      {
+        name: TraceName.DeveloperTest,
+        data: { 'test.data.number': 123 },
+        tags: { 'test.tag.number': 123 },
+      },
+      async (context) => {
+        await trace(
+          {
+            name: TraceName.NestedTest1,
+            data: { 'test.data.boolean': true },
+            tags: { 'test.tag.boolean': true },
+            parentContext: context,
+          },
+          () => sleep(1000),
+        );
+
+        await trace(
+          {
+            name: TraceName.NestedTest2,
+            data: { 'test.data.string': 'test' },
+            tags: { 'test.tag.string': 'test' },
+            parentContext: context,
+          },
+          () => sleep(500),
+        );
+      },
+    );
+  }, []);
+
+  return (
+    <>
+      <Text
+        color={TextColor.Alternative}
+        variant={TextVariant.BodyMD}
+        style={styles.desc}
+      >
+        {strings('app_settings.developer_options.generate_trace_test_desc')}
+      </Text>
+      <Button
+        variant={ButtonVariants.Secondary}
+        size={ButtonSize.Lg}
+        label={strings('app_settings.developer_options.generate_trace_test')}
+        onPress={handleGenerateTraceTest}
+        width={ButtonWidthTypes.Full}
+        style={styles.accessory}
+      />
+    </>
+  );
+}
+
+export default function SentryTest() {
+  const theme = useTheme();
+  const { styles } = useStyles(styleSheet, { theme });
+
+  return (
+    <>
+      <Text
+        color={TextColor.Default}
+        variant={TextVariant.HeadingLG}
+        style={styles.heading}
+      >
+        {'Sentry'}
+      </Text>
+      <GenerateTrace />
+    </>
+  );
+}