perf: add Long Task detection and TBT calculation#39715
Open
perf: add Long Task detection and TBT calculation#39715
Conversation
MajorLift
had a problem deploying
to
pr-comment
GitHub Actions
Failure
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| return '6-10'; | ||
| } | ||
| if (count <= 25) { | ||
| return '25-25'; |
There was a problem hiding this comment.
Typo in bucket label returns incorrect value
Medium Severity
The bucketizeCount function returns '25-25' for counts in the 11-25 range, but this appears to be a typo. The expected bucket label following the pattern ('0', '1-5', '6-10', then '26-50', '50+') is '11-25'. This will cause incorrect Sentry tag filtering as the bucket label is nonsensical.
| observer.observe({ type: 'longtask', buffered: true }); | ||
| } catch (error) { | ||
| console.warn('[Performance] Failed to setup Long Task observer:', error); | ||
| } |
There was a problem hiding this comment.
Failed observe() leaves observer in broken state
Medium Severity
If observer.observe() throws (e.g., on Firefox/Safari where longtask entry type isn't supported), the observer variable remains set from the successful new PerformanceObserver() call. The catch block logs a warning but doesn't reset observer to null. On subsequent calls, the if (observer) guard at line 89 returns early, thinking observation is already active. This silently prevents any future retry attempts and no metrics are ever collected on unsupported browsers.
Contributor
Builds ready [235440d]
UI Startup Metrics (1362 ± 103 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Contributor
✨ Files requiring CODEOWNER review ✨🧪 @MetaMask/qa (1 files, +58 -10)
👨🔧 @MetaMask/wallet-integrations (1 files, +58 -10)
|
Contributor
Builds ready [8c12157]
UI Startup Metrics (1375 ± 84 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
MajorLift
force-pushed
the
jongsun/perf/260202-tbt-longtask
branch
from
82df629 to
b2cee13
Compare
`PerformanceObserver` for `longtask` entries is supported on `chrome-extension://` pages, unlike paint-based metrics (LCP, FCP). - `setupLongTaskObserver` with configurable sample rate - `calculateTBT` / `getTBTRating` based on Lighthouse thresholds - `reportLongTaskMetricsToSentry` for production instrumentation - `exposeLongTaskMetricsForTesting` for E2E stateHooks access - Add `LongTaskMetrics` / `LongTaskMetricsWithTBT` to `global.d.ts` Co-authored-by: Cursor <cursoragent@cursor.com>
Collect `getLongTaskMetricsWithTBT()` from stateHooks in `PageLoadBenchmark.collectMetrics()`. Add `longTaskCount`, `longTaskTotalDuration`, `longTaskMaxDuration`, `tbt` to benchmark constants. Co-authored-by: Cursor <cursoragent@cursor.com>
MajorLift
force-pushed
the
jongsun/perf/260202-tbt-longtask
branch
from
b2cee13 to
c468f35
Compare
7 tasks
Contributor
Builds ready [c468f35]
UI Startup Metrics (1422 ± 110 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
Contributor
Builds ready [352c993]
⚡ Performance Benchmarks (1410 ± 115 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
MajorLift
force-pushed
the
jongsun/perf/260202-tbt-longtask
branch
from
352c993 to
b1b106f
Compare
Contributor
Builds ready [b1b106f]
⚡ Performance Benchmarks (1456 ± 100 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
- Use `type` instead of `interface` per ESLint rules - Use `T[]` instead of `Array<T>` per array-type rule - Fix Prettier formatting on `setMeasurement` call - Add missing JSDoc `@param` for `bucketizeCount` function
Add `NumericBenchmarkMetrics` type that excludes object-typed properties (`memoryUsage`, `longTaskMetrics`) for statistical aggregation. Update `BenchmarkSummary` to use this type for mean/min/max/p95/p99/stddev fields.
MajorLift
force-pushed
the
jongsun/perf/260202-tbt-longtask
branch
from
059ee1c to
d804821
Compare
Contributor
Builds ready [d804821]
⚡ Performance Benchmarks (1385 ± 112 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add performance observer utilities for Core Web Vitals measurement:
setupLongTaskObserver(): Observes main thread blocking >50ms with 10% samplingcalculateTBT(): Derives Total Blocking Time from Long Task entriesgetTBTRating(): Returns Lighthouse-based rating (good/needs-improvement/poor)reportLongTaskMetricsToSentry(): Reports metrics to Sentry traces with breadcrumbsMotivation
Power users with large token lists and many accounts experience significantly more Long Tasks, causing UI jank. This instrumentation provides visibility into main thread blocking to:
Example Output
Long Task Metrics (per run)
{ "longTaskMetrics": { "count": 12, "totalDuration": 847, "maxDuration": 156, "tbt": 247, "tbtRating": "needs-improvement" } }Benchmark Summary (aggregated)
TBT Thresholds (Lighthouse-based)
Test plan
yarn test:unit ui/helpers/utils/performance-observers.test.tsRelated
Resolves: MetaMask/MetaMask-planning#6734
Related epic: MetaMask/MetaMask-planning#6741
CHANGELOG entry
CHANGELOG entry: None - Internal performance instrumentation only