perf: FMP spans for tokens and nfts tabs

app/scripts/controllers/app-state-controller.test.ts

@@ -5,6 +5,7 @@ import {
   ORIGIN_METAMASK,
   POLLING_TOKEN_ENVIRONMENT_TYPES,
 } from '../../../shared/constants/app';
+import { AccountOverviewTabKey } from '../../../shared/constants/app-state';
 import { AppStateController } from './app-state-controller';
 import type {
   AllowedActions,
@@ -209,9 +210,11 @@ describe('AppStateController', () => {
 
   describe('setDefaultHomeActiveTabName', () => {
     it('sets the default home tab name', () => {
-      appStateController.setDefaultHomeActiveTabName('testTabName');
+      appStateController.setDefaultHomeActiveTabName(
+        AccountOverviewTabKey.Activity,
+      );
       expect(appStateController.store.getState().defaultHomeActiveTabName).toBe(
-        'testTabName',
+        AccountOverviewTabKey.Activity,
       );
     });
   });

app/scripts/controllers/app-state-controller.ts

@@ -26,6 +26,7 @@ import {
 import { DEFAULT_AUTO_LOCK_TIME_LIMIT } from '../../../shared/constants/preferences';
 import { LastInteractedConfirmationInfo } from '../../../shared/types/confirm';
 import { SecurityAlertResponse } from '../lib/ppom/types';
+import { AccountOverviewTabKey } from '../../../shared/constants/app-state';
 import type {
   Preferences,
   PreferencesControllerGetStateAction,
@@ -35,7 +36,7 @@ import type {
 export type AppStateControllerState = {
   timeoutMinutes: number;
   connectedStatusPopoverHasBeenShown: boolean;
-  defaultHomeActiveTabName: string | null;
+  defaultHomeActiveTabName: AccountOverviewTabKey | null;
   browserEnvironment: Record<string, string>;
   popupGasPollTokens: string[];
   notificationGasPollTokens: string[];
@@ -326,7 +327,9 @@ export class AppStateController extends EventEmitter {
    *
    * @param defaultHomeActiveTabName - the tab name
    */
-  setDefaultHomeActiveTabName(defaultHomeActiveTabName: string | null): void {
+  setDefaultHomeActiveTabName(
+    defaultHomeActiveTabName: AccountOverviewTabKey | null,
+  ): void {
     this.store.updateState({
       defaultHomeActiveTabName,
     });

shared/constants/app-state.ts

@@ -0,0 +1,26 @@
+import { TraceName } from '../lib/trace';
+import { MetaMetricsEventName } from './metametrics';
+
+export enum AccountOverviewTabKey {
+  Tokens = 'tokens',
+  Nfts = 'nfts',
+  Activity = 'activity',
+}
+
+export const ACCOUNT_OVERVIEW_TAB_KEY_TO_METAMETRICS_EVENT_NAME_MAP = {
+  [AccountOverviewTabKey.Tokens]: MetaMetricsEventName.TokenScreenOpened,
+  [AccountOverviewTabKey.Nfts]: MetaMetricsEventName.NftScreenOpened,
+  [AccountOverviewTabKey.Activity]: MetaMetricsEventName.ActivityScreenOpened,
+} as const;
+
+export const ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAMES_ARRAY_MAP = {
+  [AccountOverviewTabKey.Tokens]: [
+    TraceName.AccountOverviewAssetListTab,
+    TraceName.AccountOverviewAssetListTabFCP,
+  ],
+  [AccountOverviewTabKey.Nfts]: [
+    TraceName.AccountOverviewNftsTab,
+    TraceName.AccountOverviewNftsTabFMP,
+  ],
+  [AccountOverviewTabKey.Activity]: [TraceName.AccountOverviewActivityTab],
+} as const;

shared/lib/trace.ts

@@ -9,7 +9,30 @@ import { log as sentryLogger } from '../../app/scripts/lib/setupSentry';
  * The supported trace names.
  */
 export enum TraceName {
+  /**
+   * `AccountList` component renders (FCP).
+   */
   AccountList = 'Account List',
+  /**
+   * `TokenList` component renders (FCP).
+   */
+  AccountOverviewAssetListTabFCP = 'Account Overview - Asset List Tab - First Contentful Paint',
+  /**
+   * `TokenList` component loading message disappears (FMP).
+   */
+  AccountOverviewAssetListTab = 'Account Overview - Asset List Tab',
+  /**
+   * `NftsTab` component loading spinner disappears or no-Nfts banner renders.
+   */
+  AccountOverviewNftsTabFMP = 'Account Overview - Nfts Tab - First Meaningful Paint',
+  /**
+   * `NftsTab` component fully loads, including all resources.
+   */
+  AccountOverviewNftsTab = 'Account Overview - Nfts Tab',
+  /**
+   * `TransactionList` component renders (FCP).
+   */
+  AccountOverviewActivityTab = 'Account Overview - Activity Tab',
   BackgroundConnect = 'Background Connect',
   DeveloperTest = 'Developer Test',
   FirstRender = 'First Render',
@@ -27,6 +50,10 @@ export enum TraceName {
   UIStartup = 'UI Startup',
 }
 
+export enum TraceOperation {
+  ComponentLoad = 'custom.ui.component_load',
+}
+
 const log = createModuleLogger(sentryLogger, 'trace');
 
 const ID_DEFAULT = 'default';
@@ -90,6 +117,11 @@ export type TraceRequest = {
    * Custom tags to associate with the trace.
    */
   tags?: Record<string, number | string | boolean>;
+
+  /**
+   * Custom operation name to associate with the trace.
+   */
+  op?: TraceOperation | typeof OP_DEFAULT;
 };
 
 /**
@@ -111,6 +143,10 @@ export type EndTraceRequest = {
    * Override the end time of the trace.
    */
   timestamp?: number;
+  /**
+   * Custom tags to associate with the trace.
+   */
+  tags?: Record<string, number | string | boolean>;
 };
 
 export function trace<T>(request: TraceRequest, fn: TraceCallback<T>): T;
@@ -155,6 +191,13 @@ export function endTrace(request: EndTraceRequest) {
     return;
   }
 
+  if ('tags' in request) {
+    pendingTrace.request.tags = Object.assign(
+      pendingTrace.request.tags ?? {},
+      request.tags,
+    );
+  }
+
   pendingTrace.end(timestamp);
 
   tracesByKey.delete(key);
@@ -165,6 +208,17 @@ export function endTrace(request: EndTraceRequest) {
   logTrace(pendingRequest, startTime, endTime);
 }
 
+/**
+ * End multiple pending traces.
+ *
+ * @param requests - The data necessary to identify and end the pending traces.
+ */
+export function endTraces(...requests: EndTraceRequest[]) {
+  for (const request of requests) {
+    endTrace(request);
+  }
+}
+
 function traceCallback<T>(request: TraceRequest, fn: TraceCallback<T>): T {
   const { name } = request;
 
@@ -224,6 +278,17 @@ function startTrace(request: TraceRequest): TraceContext {
   );
 }
 
+/**
+ * Start multiple traces.
+ *
+ * @param requests - The data necessary to identify and start the pending traces.
+ */
+export function startTraces(...requests: EndTraceRequest[]) {
+  for (const request of requests) {
+    startTrace(request);
+  }
+}
+
 function startSpan<T>(
   request: TraceRequest,
   callback: (spanOptions: StartSpanOptions) => T,
@@ -234,7 +299,7 @@ function startSpan<T>(
   const spanOptions: StartSpanOptions = {
     attributes,
     name,
-    op: OP_DEFAULT,
+    op: request.op ?? OP_DEFAULT,
     parentSpan,
     startTime,
   };

ui/components/app/assets/nfts/nfts-tab/nfts-tab.js

@@ -39,6 +39,7 @@ import {
 } from '../../../../../../shared/constants/metametrics';
 import { getCurrentLocale } from '../../../../../ducks/locale/locale';
 import Spinner from '../../../../ui/spinner';
+import { endTrace, TraceName } from '../../../../../../shared/lib/trace';
 
 export default function NftsTab() {
   const useNftDetection = useSelector(getUseNftDetection);
@@ -84,6 +85,8 @@ export default function NftsTab() {
         referrer: ORIGIN_METAMASK,
       },
     });
+    endTrace({ name: TraceName.AccountOverviewNftsTabFMP });
+    endTrace({ name: TraceName.AccountOverviewNftsTab });
   }, [
     nftsLoading,
     showNftBanner,
@@ -93,6 +96,17 @@ export default function NftsTab() {
     currentLocale,
   ]);
 
+  useEffect(() => {
+    if (nftsLoading) {
+      return;
+    }
+    if (nftsStillFetchingIndication) {
+      endTrace({ name: TraceName.AccountOverviewNftsTabFMP });
+    } else {
+      endTrace({ name: TraceName.AccountOverviewNftsTab });
+    }
+  }, [nftsLoading, nftsStillFetchingIndication]);
+
   if (!hasAnyNfts && nftsStillFetchingIndication) {
     return (
       <Box className="nfts-tab__loading">

ui/components/app/assets/token-list/token-list.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode, useEffect, useMemo } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import TokenCell from '../token-cell';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
@@ -19,6 +19,7 @@ import {
 import { useAccountTotalFiatBalance } from '../../../../hooks/useAccountTotalFiatBalance';
 import { getConversionRate } from '../../../../ducks/metamask/metamask';
 import { useNativeTokenBalance } from '../asset-list/native-token/use-native-token-balance';
+import { endTrace, TraceName } from '../../../../../shared/lib/trace';
 
 type TokenListProps = {
   onTokenClick: (arg: string) => void;
@@ -66,6 +67,16 @@ export default function TokenList({
     contractExchangeRates,
   ]);
 
+  useEffect(() => {
+    endTrace({ name: TraceName.AccountOverviewAssetListTabFCP });
+  }, []);
+
+  useEffect(() => {
+    if (!loading) {
+      endTrace({ name: TraceName.AccountOverviewAssetListTab });
+    }
+  }, [loading]);
+
   return loading ? (
     <Box
       display={Display.Flex}

ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js

@@ -18,6 +18,15 @@ import Popover from '../../../ui/popover';
 import Box from '../../../ui/box';
 import Button from '../../../ui/button';
 import DetectedTokenDetails from '../detected-token-details/detected-token-details';
+import {
+  trace,
+  endTrace,
+  TraceOperation,
+} from '../../../../../shared/lib/trace';
+import {
+  ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAMES_ARRAY_MAP,
+  AccountOverviewTabKey,
+} from '../../../../../shared/constants/app-state';
 
 const DetectedTokenSelectionPopover = ({
   tokensListDetected,
@@ -64,7 +73,15 @@ const DetectedTokenSelectionPopover = ({
       <Button
         className="detected-token-selection-popover__import-button"
         type="primary"
-        onClick={onImport}
+        onClick={() => {
+          for (const traceName of ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAMES_ARRAY_MAP[
+            AccountOverviewTabKey.Tokens
+          ]) {
+            endTrace({ name: traceName, tags: { 'ui.event.abort': true } });
+            trace({ name: traceName, op: TraceOperation.ComponentLoad });
+          }
+          onImport();
+        }}
         disabled={selectedTokens.length === 0}
       >
         {t('importWithCount', [`(${selectedTokens.length})`])}

ui/components/app/transaction-list/transaction-list.component.js

@@ -4,6 +4,7 @@ import React, {
   useCallback,
   Fragment,
   useContext,
+  useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
@@ -53,6 +54,7 @@ import { getMultichainAccountUrl } from '../../../helpers/utils/multichain/block
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
 import { getMultichainNetwork } from '../../../selectors/multichain';
+import { endTrace, TraceName } from '../../../../shared/lib/trace';
 
 const PAGE_INCREMENT = 10;
 
@@ -258,6 +260,11 @@ export default function TransactionList({
   // Check if the current account is a bitcoin account
   const isBitcoinAccount = useSelector(isSelectedInternalAccountBtc);
   const trackEvent = useContext(MetaMetricsContext);
+
+  useEffect(() => {
+    endTrace({ name: TraceName.AccountOverviewActivityTab });
+  }, []);
+
   const multichainNetwork = useMultichainSelector(
     getMultichainNetwork,
     selectedAccount,

ui/components/multichain/account-list-menu/account-list-menu.tsx

@@ -68,6 +68,7 @@ import {
   getOriginOfCurrentTab,
   getSelectedInternalAccount,
   getUpdatedAndSortedAccounts,
+  getDefaultHomeActiveTabName,
   ///: BEGIN:ONLY_INCLUDE_IF(solana)
   getIsSolanaSupportEnabled,
   ///: END:ONLY_INCLUDE_IF
@@ -114,7 +115,16 @@ import {
   AccountConnections,
   MergedInternalAccount,
 } from '../../../selectors/selectors.types';
-import { endTrace, TraceName } from '../../../../shared/lib/trace';
+import {
+  endTrace,
+  trace,
+  TraceName,
+  TraceOperation,
+} from '../../../../shared/lib/trace';
+import {
+  AccountOverviewTabKey,
+  ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAMES_ARRAY_MAP,
+} from '../../../../shared/constants/app-state';
 ///: BEGIN:ONLY_INCLUDE_IF(solana)
 import {
   SOLANA_WALLET_NAME,
@@ -251,6 +261,9 @@ export const AccountListMenu = ({
       ),
     [updatedAccountsList, allowedAccountTypes],
   );
+  const defaultHomeActiveTabName: AccountOverviewTabKey = useSelector(
+    getDefaultHomeActiveTabName,
+  );
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   const addSnapAccountEnabled = useSelector(getIsAddSnapAccountEnabled);
   ///: END:ONLY_INCLUDE_IF
@@ -340,6 +353,12 @@ export const AccountListMenu = ({
             location: 'Main Menu',
           },
         });
+        for (const traceName of ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAMES_ARRAY_MAP[
+          defaultHomeActiveTabName
+        ]) {
+          endTrace({ name: traceName, tags: { 'ui.event.abort': true } });
+          trace({ name: traceName, op: TraceOperation.ComponentLoad });
+        }
         dispatch(setSelectedAccount(account.address));
       };
     },

ui/components/multichain/account-overview/account-overview-btc.test.tsx

@@ -9,7 +9,7 @@ import {
 } from './account-overview-btc';
 
 const defaultProps: AccountOverviewBtcProps = {
-  defaultHomeActiveTabName: '',
+  defaultHomeActiveTabName: null,
   onTabClick: jest.fn(),
   setBasicFunctionalityModalOpen: jest.fn(),
   onSupportLinkClick: jest.fn(),

ui/components/multichain/account-overview/account-overview-eth.test.tsx

@@ -22,7 +22,7 @@ describe('AccountOverviewEth', () => {
   });
   it('shows all tabs', () => {
     const { queryByTestId } = render({
-      defaultHomeActiveTabName: '',
+      defaultHomeActiveTabName: null,
       onTabClick: jest.fn(),
       setBasicFunctionalityModalOpen: jest.fn(),
       onSupportLinkClick: jest.fn(),