refactor: add performance tracing infrastructure

[matthewwalsh0]

Description

Add initial tracing and performance metrics infrastructure.

Specifically:

• Add the trace method, to be used anywhere in the client to generate a Sentry trace to monitor and analyse performance metrics.
• Add buttons to the developer settings as an easy mechanism to generate Sentry errors (in the UI or background) and traces.
• Add the Sentry.browserTracingIntegration to automatically generate traces for each page navigation, including nested spans for any HTTP requests.
• Update the Sentry debugging documentation in the README.

Note that the previously used browserProfilingIntegration does not generate transactions or traces itself, but rather attempts to add profiling data to any generated transactions. This does not appear to be compatible given it requires the Self-Profiling API object which is only available in Chrome and in our case, the UI. In addition, it requires the js-profiling document policy which also appears to currently not be supported in browser extensions.

Sentry also provides React specific automated instrumentation via @sentry/react and the Sentry.reactRouterV5BrowserTracingInstrumentation integration, but this should be pursued in a separate ticket if needed given the required further refactor.

Related issues

Fixes: #2711

Manual testing steps

1. Enable metrics in the settings.
2. Login to Sentry account.
3. Go to Traces or Performance section.
4. Note new transactions or traces named popup.html with nested spans including HTTP requests.

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.

[DDDDDanica]

Notes: to update the document for sentry debugging:
https://github.com/MetaMask/metamask-extension/blob/develop/development/README.md#debugging-in-sentry

[metamaskbot]

Builds ready [3e09194]

• 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
  • common: 0, 1, 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 (305 ± 285 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	59	114	85	17	8
		domContentLoaded	9	49	21	11	5
		load	39	1950	305	593	285
		domInteractive	8	49	21	11	5

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 6.32 KiB (0.09%)
• common: 301 Bytes (0.00%)

[sonarcloud]

Quality Gate passed

Issues
7 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [f1895b6]

• 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
  • common: 0, 1, 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 (63 ± 8 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	72	142	97	17	8
		domContentLoaded	9	77	23	14	7
		load	45	122	63	16	8
		domInteractive	9	77	23	14	7

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 6.46 KiB (0.09%)
• common: 843 Bytes (0.01%)

[metamaskbot]

Missing release label release-12.2.0 on PR. Adding release label release-12.2.0 on PR and removing other release labels(release-12.4.0), as PR was cherry-picked in branch 12.2.0.