feat(dashboards): Web Vitals page overview dashboard migration by edwardgou-sentry · Pull Request #105002 · getsentry/sentry

edwardgou-sentry · 2025-12-15T22:42:00Z

Adds config for prebuilt web vitals page overview dashboard
Adds web vital score meters widgets to overview dashboard
Update timeseries order in overview breakdown chart

codecov · 2025-12-15T22:49:19Z

❌ 4 Tests Failed:

Tests completed	Failed	Passed	Skipped
12888	4	12884	10

View the top 3 failed test(s) by shortest run time

PageOverview renders

Stack Traces | 0.028s run time

Error: expect(jest.fn()).toHaveBeenNthCalledWith(n, ...expected)

n: 1
Expected: Anything, ObjectContaining {"query": ObjectContaining {"dataset": "spans", "field": ["p75(measurements.lcp)", "p75(measurements.fcp)", "p75(measurements.cls)", "p75(measurements.ttfb)", "p75(measurements.inp)", "count()"], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"] !transaction:\"<< unparameterized >>\""}}
Received
->     1: "....../organizations/org-slug/events/", {"error": [Function error], "method": "GET", "query": {"dataset": "spans", "environment": [], "field": ["p75(measurements.lcp)", "p75(measurements.fcp)", "p75(measurements.cls)", "p75(measurements.ttfb)", "p75(measurements.inp)", "count()"], "per_page": 50, "project": [], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"]", "referrer": "api.insights.web-vitals.project", "sampling": "NORMAL", "statsPeriod": "14d"}, "skipAbort": undefined, "success": [Function success]}
       2: "....../organizations/org-slug/events/", {"error": [Function error], "method": "GET", "query": {"cursor": "", "dataset": "spans", "environment": [], "field": ["performance_score(measurements.score.lcp)", "performance_score(measurements.score.fcp)", "performance_score(measurements.score.cls)", "performance_score(measurements.score.inp)", "performance_score(measurements.score.ttfb)", "performance_score(measurements.score.total)", "avg(measurements.score.weight.lcp)", "avg(measurements.score.weight.fcp)", "avg(measurements.score.weight.cls)", "avg(measurements.score.weight.inp)", …], "per_page": 50, "project": [], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"]", "referrer": "api.insights.web-vitals.project-scores", "sampling": "NORMAL", "statsPeriod": "14d"}, "skipAbort": undefined, "success": [Function success]}

Number of calls: 2
    at Object.toHaveBeenNthCalledWith (.../webVitals/views/pageOverview.spec.tsx:89:24)
    at Promise.finally.completed (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/jestAdapterInit.js:1559:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/jestAdapterInit.js:1499:10)
    at _callCircusTest (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/jestAdapterInit.js:1009:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/jestAdapterInit.js:949:3)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/jestAdapterInit.js:839:13)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/jestAdapterInit.js:829:11)
    at run (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/jestAdapterInit.js:757:3)
    at runAndTransformResultsToJestFormat (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/jestAdapterInit.js:1920:21)
    at jestAdapter (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/runner.js:101:19)
    at runTestInternal (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/testWorker.js:272:16)
    at runTest (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/testWorker.js:340:7)
    at Object.worker (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/testWorker.js:494:12)

WebVitalsDetailPanel renders correctly with empty results

Stack Traces | 0.09s run time

Error: expect(jest.fn()).toHaveBeenNthCalledWith(n, ...expected)

n: 1
Expected: Anything, ObjectContaining {"query": ObjectContaining {"dataset": "spans", "field": ["p75(measurements.lcp)", "p75(measurements.fcp)", "p75(measurements.cls)", "p75(measurements.ttfb)", "p75(measurements.inp)", "count()"], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"] !transaction:\"<< unparameterized >>\""}}
Received
->     1: "....../organizations/org-slug/events/", {"error": [Function error], "method": "GET", "query": {"dataset": "spans", "environment": [], "field": ["p75(measurements.lcp)", "p75(measurements.fcp)", "p75(measurements.cls)", "p75(measurements.ttfb)", "p75(measurements.inp)", "count()"], "per_page": 50, "project": [], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"]", "referrer": "api.insights.web-vitals.project", "sampling": "NORMAL", "statsPeriod": "14d"}, "skipAbort": undefined, "success": [Function success]}
       2: "....../organizations/org-slug/events/", {"error": [Function error], "method": "GET", "query": {"cursor": "", "dataset": "spans", "environment": [], "field": ["performance_score(measurements.score.lcp)", "performance_score(measurements.score.fcp)", "performance_score(measurements.score.cls)", "performance_score(measurements.score.inp)", "performance_score(measurements.score.ttfb)", "performance_score(measurements.score.total)", "avg(measurements.score.weight.lcp)", "avg(measurements.score.weight.fcp)", "avg(measurements.score.weight.cls)", "avg(measurements.score.weight.inp)", …], "per_page": 50, "project": [], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"]", "referrer": "api.insights.web-vitals.project-scores", "sampling": "NORMAL", "statsPeriod": "14d"}, "skipAbort": undefined, "success": [Function success]}

Number of calls: 3
    at Object.toHaveBeenNthCalledWith (.../webVitals/components/webVitalsDetailPanel.spec.tsx:55:24)

Performance > Widgets > WidgetContainer Best Page Opportunities widget

Stack Traces | 0.143s run time

Error: expect(jest.fn()).toHaveBeenNthCalledWith(n, ...expected)

n: 2
Expected: Anything, ObjectContaining {"query": ObjectContaining {"dataset": "spans", "field": ["project.id", "project", "transaction", "p75(measurements.lcp)", "p75(measurements.fcp)", "p75(measurements.cls)", "p75(measurements.ttfb)", "p75(measurements.inp)", "opportunity_score(measurements.score.total)", "performance_score(measurements.score.total)", …], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"] !transaction:\"<< unparameterized >>\" avg(measurements.score.total):>=0"}}
Received
       1: "....../organizations/org-slug/events/", {"error": [Function error], "method": "GET", "query": {"cursor": "", "dataset": "spans", "environment": [], "field": ["performance_score(measurements.score.lcp)", "performance_score(measurements.score.fcp)", "performance_score(measurements.score.cls)", "performance_score(measurements.score.inp)", "performance_score(measurements.score.ttfb)", "performance_score(measurements.score.total)", "avg(measurements.score.weight.lcp)", "avg(measurements.score.weight.fcp)", "avg(measurements.score.weight.cls)", "avg(measurements.score.weight.inp)", …], "per_page": 50, "project": [], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"]", "referrer": "api.insights.web-vitals.project-scores", "sampling": "NORMAL", "statsPeriod": "14d"}, "skipAbort": undefined, "success": [Function success]}
->     2: "....../organizations/org-slug/events/", {"error": [Function error], "method": "GET", "query": {"dataset": "spans", "environment": [], "field": ["project.id", "project", "transaction", "p75(measurements.lcp)", "p75(measurements.fcp)", "p75(measurements.cls)", "p75(measurements.ttfb)", "p75(measurements.inp)", "opportunity_score(measurements.score.total)", "performance_score(measurements.score.total)", …], "per_page": 4, "project": [], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"] avg(measurements.score.total):>=0", "referrer": "api.insights.web-vitals.transactions-scores", "sampling": "NORMAL", "sort": "-count()", "statsPeriod": "14d"}, "skipAbort": undefined, "success": [Function success]}

Number of calls: 2
    at Object.toHaveBeenNthCalledWith (.../widgets/components/widgetContainer.spec.tsx:946:24)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at listOnTimeout (node:internal/timers:549:9)
    at processTimers (node:internal/timers:523:7)

WebVitalsLandingPage renders

Stack Traces | 0.384s run time

Error: expect(jest.fn()).toHaveBeenNthCalledWith(n, ...expected)

n: 2
Expected: Anything, ObjectContaining {"query": ObjectContaining {"dataset": "spans", "field": ["project.id", "project", "transaction", "p75(measurements.lcp)", "p75(measurements.fcp)", "p75(measurements.cls)", "p75(measurements.ttfb)", "p75(measurements.inp)", "opportunity_score(measurements.score.total)", "performance_score(measurements.score.total)", …], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"] !transaction:\"<< unparameterized >>\" avg(measurements.score.total):>=0"}}
Received
       1: "........./organizations/org-slug/events/", {"error": [Function error], "method": "GET", "query": {"dataset": "spans", "environment": [], "field": ["user.geo.subregion", "count()"], "per_page": 50, "project": [], "query": "has:user.geo.subregion", "referrer": "api.insights.user-geo-subregion-selector", "sampling": "NORMAL", "sort": "-count()", "statsPeriod": "14d"}, "skipAbort": undefined, "success": [Function success]}
->     2: "........./organizations/org-slug/events/", {"error": [Function error], "method": "GET", "query": {"dataset": "spans", "environment": [], "field": ["project.id", "project", "transaction", "p75(measurements.lcp)", "p75(measurements.fcp)", "p75(measurements.cls)", "p75(measurements.ttfb)", "p75(measurements.inp)", "opportunity_score(measurements.score.total)", "performance_score(measurements.score.total)", …], "per_page": 25, "project": [], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"] avg(measurements.score.total):>=0", "referrer": "api.insights.web-vitals.transactions-scores", "sampling": "NORMAL", "sort": "-opportunity_score(measurements.score.total)", "statsPeriod": "14d"}, "skipAbort": undefined, "success": [Function success]}
       3: "........./organizations/org-slug/events/", {"error": [Function error], "method": "GET", "query": {"dataset": "spans", "environment": [], "field": ["p75(measurements.lcp)", "p75(measurements.fcp)", "p75(measurements.cls)", "p75(measurements.ttfb)", "p75(measurements.inp)", "count()"], "per_page": 50, "project": [], "query": "span.op:[ui.interaction.click,ui.interaction.hover,ui.interaction.drag,ui.interaction.press,ui.webvital.cls,ui.webvital.lcp,pageload,\"\"]", "referrer": "api.insights.web-vitals.project", "sampling": "NORMAL", "statsPeriod": "14d"}, "skipAbort": undefined, "success": [Function success]}

Number of calls: 4
    at Object.toHaveBeenNthCalledWith (.../webVitals/views/webVitalsLandingPage.spec.tsx:100:24)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

static/app/views/dashboards/utils/prebuiltConfigs/webVitals/pageSummary.ts

static/app/views/dashboards/utils/prebuiltConfigs/webVitals/webVitals.ts

gggritso

Fractional layout is too risky IMO, but I leave it to you 🙏🏻

static/app/views/dashboards/utils/prebuiltConfigs/webVitals/webVitals.ts

narsaynorath

Code lgtm, but I agree with George, the fractions feel a little odd because I wonder what happens if we get to a state where we can actual copy + move widgets around in the dashboard. Since this is feature flagged it's all good to me for now

edwardgou-sentry · 2025-12-17T16:31:35Z

👍 updated to use integers for the layouts. I'll try to figure out what the solution is with Ben

progress

7ad9c07

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Dec 15, 2025

undo

84a1048

vercel bot deployed to Preview December 16, 2025 00:12 View deployment

edwardgou-sentry marked this pull request as ready for review December 16, 2025 00:48

edwardgou-sentry requested a review from a team as a code owner December 16, 2025 00:48

edwardgou-sentry requested a review from a team December 16, 2025 00:48

cursor bot reviewed Dec 16, 2025

View reviewed changes

static/app/views/dashboards/utils/prebuiltConfigs/webVitals/pageSummary.ts Outdated Show resolved Hide resolved

fix

270c06a

vercel bot deployed to Preview December 16, 2025 03:50 View deployment

cursor bot reviewed Dec 16, 2025

View reviewed changes

static/app/views/dashboards/utils/prebuiltConfigs/webVitals/pageSummary.ts Show resolved Hide resolved

fix

5308769

vercel bot deployed to Preview December 16, 2025 15:32 View deployment

cursor bot reviewed Dec 16, 2025

View reviewed changes

static/app/views/dashboards/utils/prebuiltConfigs/webVitals/webVitals.ts Show resolved Hide resolved

gggritso approved these changes Dec 17, 2025

View reviewed changes

static/app/views/dashboards/utils/prebuiltConfigs/webVitals/webVitals.ts Show resolved Hide resolved

narsaynorath approved these changes Dec 17, 2025

View reviewed changes

change layout to use integers

ee686be

vercel bot deployed to Preview December 17, 2025 15:56 View deployment

edwardgou-sentry merged commit d9e229b into master Dec 17, 2025
48 checks passed

edwardgou-sentry deleted the egou/feat/web-vitals-page-overview-migration-progress branch December 17, 2025 16:31

github-actions bot locked and limited conversation to collaborators Jan 2, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(dashboards): Web Vitals page overview dashboard migration #105002

feat(dashboards): Web Vitals page overview dashboard migration #105002
edwardgou-sentry merged 5 commits intomasterfrom
egou/feat/web-vitals-page-overview-migration-progress

edwardgou-sentry commented Dec 15, 2025

Uh oh!

codecov bot commented Dec 15, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gggritso left a comment

Uh oh!

Uh oh!

narsaynorath left a comment

Uh oh!

edwardgou-sentry commented Dec 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

edwardgou-sentry commented Dec 15, 2025

Uh oh!

codecov bot commented Dec 15, 2025

❌ 4 Tests Failed:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gggritso left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

narsaynorath left a comment

Choose a reason for hiding this comment

Uh oh!

edwardgou-sentry commented Dec 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants