Web vitals board is empty, even if vitals seems to be registered in metrics

[pawelgalazka]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/remix

SDK Version

7.114.0

Framework Version

Remix 2.8.1

Link to Sentry event

https://pagezero.sentry.io/performance/browser/pageloads/?project=4507225764855808&statsPeriod=14d

SDK Setup

import * as Sentry from "@sentry/remix"


Sentry.init({
  dsn: appConfig.sentryDsn,
  environment: appConfig.appEnv,
  debug: appConfig.appEnv !== "production",
  integrations: [
    Sentry.browserTracingIntegration({
      useEffect,
      useLocation,
      useMatches,
    }),
    // Replay is only available in the client
    Sentry.replayIntegration(),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
})

Steps to Reproduce

1. Setup @sentry/remix according to the instructions https://docs.sentry.io/platforms/javascript/guides/remix/manual-setup/#installation
2. Visit the page which has Sentry setup
3. Look up web vitals board in Sentry dashbaord

Expected Result

See items in web vitals performance dashboard

Actual Result

Web vitals performance dashboard is empty, there is no data:

Interestingly when I go to "metric" board, I can see LCP, CLS, INP being registered:

So it seems web vitals are gathered but somehow they are not displayed on web vitals dashboard.

[edwardgou-sentry]

Hi @pawelgalazka , thanks for reporting!

Pageload Web Vitals only show up if your pageload samples have a sufficient amount of data. For example, if you are on a Chrome browser, your pageload must report at least LCP, FCP, and TTFB to be considered good enough data quality to be scored.

You can find the list of required Web Vitals by Browser here: https://docs.sentry.io/product/performance/web-vitals/web-vitals-concepts/#browser-support

It looks like you have some LCP metrics reported, but it's possible you may be missing other web vitals. Can you check if you have any single pageload samples containing LCP, FCP, and TTFB together? (You should be able to check this through discover or metrics)

[pawelgalazka]

Thanks @edwardgou-sentry

Makes sense 👍🏻 I suspected that could be the case, however I couldn't find anything in the docs about it. I was checking https://docs.sentry.io/platforms/javascript/guides/remix/performance/

It could be worth making this case more explicit in the docs.

[Lms24]

@edwardgou-sentry I took a quick look at the linked sentry project and found multiple pageload transactions with reported web vitals. Any chance that there's a problem with the Web Vitals module?

[edwardgou-sentry]

@edwardgou-sentry I took a quick look at the linked sentry project and found multiple pageload transactions with reported web vitals. Any chance that there's a problem with the Web Vitals module?

@Lms24 Took a peek into the linked project, it looks like there are some pageload transactions, but none of them seem to have any cls, which is required to calculate performance score. I'll avoid posting screenshots since its a customer account, but you can filter by has:measurements.cls to verify this.

@pawelgalazka It might be worth updating your sdk to the latest 7.. version to see if that helps. There could be an improvement for cls capture rate in the newer versions.

[vvvhung]

In my case, the Web Vitals Page has only INP score and it shows no data for LCP, FCP, CLS, TTFB. It shows only<< unparameterized >> in the list of page there. But I can find Web Vital for the path / from the Performance -> Frontend tab-> Transaction table. I'm using "@sentry/tracing": "^7.114.0" and "@sentry/vue": "^8.2.1".

[Lms24]

@vvvhung

I'm using "@sentry/tracing": "^7.114.0" and "@sentry/vue": "^8.2.1".

You don't need to use @sentry/tracing at all anymore. Just use @sentry/vue as described here. Also, all @sentry/* SDK packages have to be aligned on the same version.

[vvvhung]

@Lms24 thanks, you are correct, I removed @sentry/tracing and the Web Vitals Page now looks ok.

[getsantry[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀