How to Add Web Vitals Widgets to a Sentry Dashboard
This guide explains how to add Web Vitals (LCP, INP, CLS) to a Sentry dashboard using the current UI where the Transactions dataset is deprecated and Web Vitals live on transaction spans.
Goal: Create dashboard widgets that closely match Insights → Web Vitals, filtered per microservice/URL so you get individual scores rather than overall app scores.
Steps:
| import { instrumentDurableObjectWithSentry } from '@sentry/cloudflare'; | |
| import { getActiveSpan, spanToTraceHeader, continueTrace, startSpan } from '@sentry/cloudflare'; | |
| const MyDurableObject = instrumentDurableObjectWithSentry( | |
| (env) => ({ dsn: env.SENTRY_DSN }), | |
| class { | |
| constructor(state, env) { | |
| this.state = state; | |
| this.env = env; | |
| } |
| Cypress.Commands.add('loginBySFDXSessionID', () => { | |
| cy.exec('sfdx force:org:display -u koala --json | sed -r "s/[[:cntrl:]][[0-9]{1,3}m//g"') | |
| .then((response) => { | |
| const result = JSON.parse(response.stdout).result; | |
| const sessionId = result.accessToken; | |
| const instanceUrl = result.instanceUrl; | |
| cy.request(`${instanceUrl}/secur/frontdoor.jsp?sid=${sessionId}`); | |
| cy.visit(`${instanceUrl}/lightning/setup/SetupOneHome/home`); | |
| }); |
| const { SF_username, SF_password, SF_login_url, SF_frontdoor_url, SF_start_url, SF_base_url } = Cypress.env() | |
| Cypress.Commands.add('loginBySFWebUI', () => { | |
| cy.intercept('POST', `${SF_base_url}/aura?preloadActions`).as('auraPreloadActions') | |
| cy.intercept('POST', `${SF_base_url}/aura?r=0&ui-global-components-one-one-controller.One.getCurrentSetupApp=1`).as('getCurrentSetupApp') | |
| cy.session([SF_username, SF_password], () => { | |
| cy.log('Logging in to SalesForce') | |
| cy.request({ | |
| method: 'POST', |