How to get Core Web Vital data to show up? I think I need to enable a specific client integration

[philwolstenholme]

In the sandbox demo (https://try.sentry-demo.com/organizations/poetic-redbird/performance/summary/vitals/?project=29719&transaction=%2Fproductstore) we have this lovely view of the Core Web Vitals:

But in our account it looks a bit sadder:

Even before we ran out of performance credits it looked empty.

We are using the Next.js SDK and I can share the config later on, but before I do that is there any setting I need to turn on for CWV support, or should it just work?

I thought it would just work because https://docs.sentry.io/platforms/javascript/guides/nextjs/performance says:

@sentry/nextjs comes with performance monitoring included. To enable it, you just need to configure your sample rate as detailed below.

But… I did play around with some of the Sentry client integrations to try and get a smaller bundle size (doing this sort of thing) so now I wonder if there's a specific integration that I need to re-enable?

[lforst]

In your screenshot you can read "You have exceeded your performance unit and replay limit. We are dropping any excess events until Sep 4, 2023." on top of the page. Since web vitals are part of performance units (transactions) you will not be able to collect this data.

Additionally, if you disable tracing (e.g. by tree shaking the performance part of the SDK which is doing this sort of thing) you will also not collect web vitals data.

[philwolstenholme]

Thanks @lforst. Even before we exceeded the quota (we are still trying to get the procurement department at work to approve us purchasing Sentry…) no CWV events were showing up, so I think it'll be the tree-shaking causing the issue.

I've just Googled a bit more and can see that there's a BrowserTracing integration which I am not including. I'll double check my list of integrations to make sure there's nothing else important that we are excluding too.

[philwolstenholme]

For anyone who finds this in the future and needs a list of the available client-side integrations (in order to decide what to load/not load), you can find a list of the available integrations here: https://docs.sentry.io/platforms/javascript/configuration/integrations/#available-integrations

[lforst]

Yep the BrowserTracing integration is the important bit!

[csvan]

I have an onprem setup which is also not getting any Web Vitals data - it does seem to record other performance data just fine though. I have gone over the documentation several times and verified that we have set it up correctly. Here is our client config:

    init({
      environment,
      beforeSend: (event) => {
        // eslint-disable-next-line no-param-reassign
        event.extra = {
          ...event.extra,
          tool: getRoot(),
        };

        // eslint-disable-next-line no-param-reassign
        event.tags = {
          ...(event.tags || {}),
          module: 'app-shell',
          tool: getRoot(),
        };

        return event;
      },
      dsn: getDSN(environment),
      normalizeDepth: 10, // Or however deep you want your state context to be.
      integrations: [
        new CaptureConsole({
          levels: ['error'],
        }),
        new BrowserTracing({
          routingInstrumentation: reactRouterV6Instrumentation(useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes),
        }),
        new Replay({
          maskAllText: false,
          blockAllMedia: false,
          networkDetailAllowUrls,
          networkRequestHeaders: allowedHeaders,
          networkResponseHeaders: allowedHeaders,
        }),
      ].filter((item) => !!item),
      // Performance Monitoring˛
      tracesSampleRate: 1.0,
      tracePropagationTargets: networkDetailAllowUrls,
      // Session Replay
      replaysSessionSampleRate: getRoot() === 'login' || getRoot() === 'implicit-login' ? 1.0 : 0.0,
      replaysOnErrorSampleRate: 1.0,
      // Profiling
      profilesSampleRate: 1.0,
    });

Sorry if I missed it, but is this functionality only available for the SaaS offering?

[lforst]

All of the functionality in SaaS is also available for self-hosted! I suggest upgrading your self-hosted instance to the latest version. Maybe we introduced an incompatibility for older versions somewhere.

[DaDlugosch]

I have the same question. I'm using Sentry 24.1.0

[alexandrovas]

same question