perf: add trace for UI startup (#26636) [cherry-pick]

[Gudahtt]

This is a cherry-pick of #26332 and #26636 for v12.2.0, with the TransactionController update removed from #26332.

Follow these steps to manually test:

• Create a personal Sentry account (if you don't have one already) and create a metamask project
• Set the DSN of this project as SENTRY_DSN_DEV in your .metamaskrc file
• Create a new dev build
• Install the build and go through onboarding, ensuring that you opt-in to metrics
• Make a few page navigations

You should see the UI traces in the Sentry performance dashboard on your personal account.

This was cherry-picked to get the benefits described in #26636 (#26332 was partially included only out of necessity). The original description of #26636 is below:

Description

Record a UI Startup Sentry trace to monitor startup times of the UI pages.

In addition:

• Support use of trace utility function in non-asynchronous contexts.
  • Remove getMetaMetricsEnabled check as this is already done in the custom transport before submission.
• Generate default ID if omitted when starting and ending traces.

Related issues

Fixes: #25724

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[metamaskbot]

Builds ready [e1e4021]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1681 ± 56 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	230	2111	1549	446	214
		domContentLoaded	1511	2093	1655	120	57
		load	1524	2112	1681	117	56
		domInteractive	12	93	33	19	9

[codecov]

Codecov Report

Attention: Patch coverage is 61.81818% with 42 lines in your changes missing coverage. Please review.

Project coverage is 70.49%. Comparing base (a60dbcb) to head (19daa9f).

Files with missing lines	Patch %	Lines
ui/index.js	0.00%	23 Missing ⚠️
app/scripts/ui.js	0.00%	10 Missing ⚠️
shared/lib/trace.ts	89.47%	8 Missing ⚠️
app/scripts/lib/setupSentry.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@                 Coverage Diff                 @@
##           Version-v12.2.0   #26925      +/-   ##
===================================================
- Coverage            70.49%   70.49%   -0.00%     
===================================================
  Files                 1400     1400              
  Lines                49611    49687      +76     
  Branches             13647    13655       +8     
===================================================
+ Hits                 34971    35024      +53     
- Misses               14640    14663      +23     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[matthewwalsh0]

Shouldn't impact the build as it's developer only, though it applies the new TraceName enum.

[Gudahtt]

Easier to leave this change in I think, to avoid a type error. The trace utility requires the enum to be used. We could adjust it to remove that requirement, but doesn't seem useful to do so

[danjm]

I have tested this and it works as expected. (But I did not test transactions, as per Matthew's comments above)

[Gudahtt]

I have re-tested this locally with the unnecessary code removed, and it seems to work correctly still

[danjm]

Just retested as well. LGTM

[metamaskbot]

Builds ready [19daa9f]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1742 ± 103 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	245	2334	1681	391	188
		domContentLoaded	1462	2289	1727	205	98
		load	1470	2302	1742	214	103
		domInteractive	13	90	33	19	9

[metamaskbot]

No release label on PR. Adding release label release-12.2.0 on PR, as PR was cherry-picked in branch 12.2.0.