perf: add trace for UI startup

app/scripts/lib/createTracingMiddleware.ts

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { MESSAGE_TYPE } from '../../../shared/constants/app';
-import { trace } from '../../../shared/lib/trace';
+import { trace, TraceName } from '../../../shared/lib/trace';
 
 export default function createTracingMiddleware() {
   return async function tracingMiddleware(
@@ -14,12 +14,16 @@ export default function createTracingMiddleware() {
 
     if (method === MESSAGE_TYPE.ETH_SEND_TRANSACTION) {
       req.traceContext = await trace({
-        name: 'Transaction',
+        name: TraceName.Transaction,
         id,
         tags: { source: 'dapp' },
       });
 
-      await trace({ name: 'Middleware', id, parentContext: req.traceContext });
+      await trace({
+        name: TraceName.Middleware,
+        id,
+        parentContext: req.traceContext,
+      });
     }
 
     next();

app/scripts/lib/ppom/ppom-middleware.ts

@@ -15,7 +15,7 @@ import { PreferencesController } from '../../controllers/preferences';
 import { AppStateController } from '../../controllers/app-state';
 import { LOADING_SECURITY_ALERT_RESPONSE } from '../../../../shared/constants/security-provider';
 import { getProviderConfig } from '../../../../ui/ducks/metamask/metamask';
-import { trace, TraceContext } from '../../../../shared/lib/trace';
+import { trace, TraceContext, TraceName } from '../../../../shared/lib/trace';
 import {
   generateSecurityAlertId,
   handlePPOMError,
@@ -110,19 +110,21 @@ export function createPPOMMiddleware<
 
       const securityAlertId = generateSecurityAlertId();
 
-      trace({ name: 'PPOM Validation', parentContext: req.traceContext }, () =>
-        validateRequestWithPPOM({
-          ppomController,
-          request: req,
-          securityAlertId,
-          chainId,
-        }).then((securityAlertResponse) => {
-          updateSecurityAlertResponse(
-            req.method,
+      trace(
+        { name: TraceName.PPOMValidation, parentContext: req.traceContext },
+        () =>
+          validateRequestWithPPOM({
+            ppomController,
+            request: req,
             securityAlertId,
-            securityAlertResponse,
-          );
-        }),
+            chainId,
+          }).then((securityAlertResponse) => {
+            updateSecurityAlertResponse(
+              req.method,
+              securityAlertId,
+              securityAlertResponse,
+            );
+          }),
       );
 
       const loadingSecurityAlertResponse: SecurityAlertResponse = {

app/scripts/lib/transaction/util.ts

@@ -24,7 +24,7 @@ import {
   LOADING_SECURITY_ALERT_RESPONSE,
   SECURITY_PROVIDER_EXCLUDED_TRANSACTION_TYPES,
 } from '../../../../shared/constants/security-provider';
-import { endTrace } from '../../../../shared/lib/trace';
+import { endTrace, TraceName } from '../../../../shared/lib/trace';
 
 export type AddTransactionOptions = NonNullable<
   Parameters<TransactionController['addTransaction']>[1]
@@ -77,7 +77,7 @@ export async function addDappTransaction(
     securityAlertResponse,
   };
 
-  endTrace({ name: 'Middleware', id: actionId });
+  endTrace({ name: TraceName.Middleware, id: actionId });
 
   const { waitForHash } = await addTransactionOrUserOperation({
     ...request,
@@ -89,7 +89,7 @@ export async function addDappTransaction(
 
   const hash = (await waitForHash()) as string;
 
-  endTrace({ name: 'Transaction', id: actionId });
+  endTrace({ name: TraceName.Transaction, id: actionId });
 
   return hash;
 }

app/scripts/ui.js

@@ -25,6 +25,7 @@ import { isManifestV3 } from '../../shared/modules/mv3.utils';
 import { checkForLastErrorAndLog } from '../../shared/modules/browser-runtime.utils';
 import { SUPPORT_LINK } from '../../shared/lib/ui-utils';
 import { getErrorHtml } from '../../shared/lib/error-utils';
+import { endTrace, trace, TraceName } from '../../shared/lib/trace';
 import ExtensionPlatform from './platforms/extension';
 import { setupMultiplex } from './lib/stream-utils';
 import { getEnvironmentType, getPlatform } from './lib/util';
@@ -44,6 +45,24 @@ let extensionPort;
 start().catch(log.error);
 
 async function start() {
+  const startTime = performance.now();
+
+  const traceContext = trace({
+    name: TraceName.UIStartup,
+    startTime: performance.timeOrigin,
+  });
+
+  trace({
+    name: TraceName.LoadScripts,
+    startTime: performance.timeOrigin,
+    parentContext: traceContext,
+  });
+
+  endTrace({
+    name: 'Load Scripts',
+    timestamp: performance.timeOrigin + startTime,
+  });
+
   // create platform global
   global.platform = new ExtensionPlatform();
 
@@ -75,6 +94,7 @@ async function start() {
           // in later version we might try to improve it by reviving same streams.
           updateUiStreams();
         } else {
+          endTrace({ name: TraceName.BackgroundConnect });
           initializeUiWithTab(activeTab);
         }
         await loadPhishingWarningPage();
@@ -190,18 +210,30 @@ async function start() {
 
     extensionPort.onMessage.addListener(messageListener);
     extensionPort.onDisconnect.addListener(resetExtensionStreamAndListeners);
+
+    trace({
+      name: TraceName.BackgroundConnect,
+      parentContext: traceContext,
+    });
   } else {
     const messageListener = async (message) => {
       if (message?.data?.method === 'startUISync') {
+        endTrace({ name: TraceName.BackgroundConnect });
         initializeUiWithTab(activeTab);
         extensionPort.onMessage.removeListener(messageListener);
       }
     };
+
     extensionPort.onMessage.addListener(messageListener);
+
+    trace({
+      name: TraceName.BackgroundConnect,
+      parentContext: traceContext,
+    });
   }
 
   function initializeUiWithTab(tab) {
-    initializeUi(tab, connectionStream, (err, store) => {
+    initializeUi(tab, connectionStream, traceContext, (err, store) => {
       if (err) {
         // if there's an error, store will be = metamaskState
         displayCriticalError('troubleStarting', err, store);
@@ -277,7 +309,7 @@ async function queryCurrentActiveTab(windowType) {
   return { id, title, origin, protocol, url };
 }
 
-function initializeUi(activeTab, connectionStream, cb) {
+function initializeUi(activeTab, connectionStream, traceContext, cb) {
   connectToAccountManager(connectionStream, (err, backgroundConnection) => {
     if (err) {
       cb(err, null);
@@ -289,6 +321,7 @@ function initializeUi(activeTab, connectionStream, cb) {
         activeTab,
         container,
         backgroundConnection,
+        traceContext,
       },
       cb,
     );