Web vitals (LCP, CLS, FID) not sent in most case with load transaction

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
  • Hoped this fix had work, but using latest version doesn’t: https://github.com/getsentry/sentry-javascript/issues/3803
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• Provide a link to the affected event from your Sentry account

Package + Version

• @sentry/integrations 6.10.0
• @sentry/tracing 6.10.0
• @sentry/vue 6.10.0

Description

Summary

In our project, using vuejs, we don’t receive the web vitals LCP, CLS and FID in most case.

Investigation

We have enabled the debug and seems that thoses webvitals are added to the transaction only when the user click, use the keyboard or switch tab for instance. So the transaction in most case is already sent to the sentry server. (unless we click quickly after the page is loaded)

packages/tracing/src/browser/web-vitals/getLCP.ts:76

    ['keydown', 'click'].forEach(type => {
      addEventListener(type, stopListening, { once: true, capture: true });
    });

    onHidden(stopListening, true);

Debug logs

Sentry Logger [Log]: Integration installed: InboundFilters logger.js?f0b6:31 Sentry Logger [Log]: Integration installed: FunctionToString logger.js?f0b6:31 Sentry Logger [Log]: Integration installed: TryCatch logger.js?f0b6:31 Sentry Logger [Log]: Global Handler attached: onerror logger.js?f0b6:31 Sentry Logger [Log]: Global Handler attached: onunhandledrejection logger.js?f0b6:31 Sentry Logger [Log]: Integration installed: GlobalHandlers logger.js?f0b6:31 Sentry Logger [Log]: Integration installed: LinkedErrors logger.js?f0b6:31 Sentry Logger [Log]: Integration installed: UserAgent logger.js?f0b6:31 Sentry Logger [Log]: Integration installed: Breadcrumbs logger.js?f0b6:31 Sentry Logger [Log]: Integration installed: CaptureConsole logger.js?f0b6:31 Sentry Logger [Log]: Integration installed: Dedupe logger.js?f0b6:44 Sentry Logger [Warn]: [Tracing] You need to define tracingOrigins in the options. logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] Starting pageload transaction on scope logger.js?f0b6:31 Sentry Logger [Log]: Setting idle transaction on scope. Span ID: 956e1442589f33c1 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] starting pageload transaction - home logger.js?f0b6:31 Sentry Logger [Log]: Starting heartbeat logger.js?f0b6:31 Sentry Logger [Log]: pinging Heartbeat -> current counter: 0 logger.js?f0b6:31 Sentry Logger [Log]: Integration installed: BrowserTracing logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] pushActivity: 9f6d4c3eeddc52a7 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] new activities count 1 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] pushActivity: a25303d5cc71b1de logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] new activities count 2 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] popActivity a25303d5cc71b1de logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] new activities count 1 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] pushActivity: a62cca7658533ea9 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] new activities count 2 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] popActivity a62cca7658533ea9 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] new activities count 1 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] Finishing loadData transaction: loadData - home. logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] popActivity 9f6d4c3eeddc52a7 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] new activities count 0 logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] finishing IdleTransaction 2021-07-23T15:27:46.636Z pageload logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] Adding & adjusting spans using Performance API logger.js?f0b6:31 Sentry Logger [Log]: [Measurements] Adding FP logger.js?f0b6:31 Sentry Logger [Log]: [Measurements] Adding FCP logger.js?f0b6:31 Sentry Logger [Log]: [Measurements] Adding TTFB logger.js?f0b6:31 Sentry Logger [Log]: [Measurements] Normalized fcp from 1937.1000000014901 to 1925.6000518798828 (-11.499948121607304) logger.js?f0b6:31 Sentry Logger [Log]: [Measurements] Normalized fp from 1937.1000000014901 to 1925.6000518798828 (-11.499948121607304) logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] flushing IdleTransaction logger.js?f0b6:31 Sentry Logger [Log]: [Measurements] Adding measurements to transaction { “fp”: { “value”: 1925.6000518798828 }, “mark.fp”: { “value”: 1627054063.8981 }, “fcp”: { “value”: 1925.6000518798828 }, “mark.fcp”: { “value”: 1627054063.8981 }, “connection.rtt”: { “value”: 50 }, “connection.downlink”: { “value”: 8.2 }, “ttfb”: { “value”: 10.900020599365234 }, “ttfb.requestTime”: { “value”: 4.400014877319336 } } logger.js?f0b6:31 Sentry Logger [Log]: [Tracing] Finishing pageload transaction: home. logger.js?f0b6:31 Sentry Logger [Log]: [Measurements] Adding FID logger.js?f0b6:31 Sentry Logger [Log]: [Measurements] Adding LCP

Hypothetical solution

I’m not sure this is the right call, however I’ve tried to add “true” in :

• getLCP(function(){}, true) in _trackLCP
• getFID(function(){}, true) in _trackFID
• getCLS(function(){}, true) in _trackCLS

It does seems to solve our issue. The metrics are attached (multiple time on js, is that an issue ??) to the transaction and sent with the loadpage transation.

An other solution could be to send the metrics after and update the transaction server side ?

Also, may be, it is possible that this is a configuration issue on our part.

Thanks a lot !

[AbhiPrasad]

Hey @ymenard-aramis, thanks for your patience. We recently cut a beta, could you give it a try to see if your web vitals collections improve? @sentry/tracing @ 6.12.0-beta.2.

Then in your SDK init, please opt in to the new option:

Sentry.init({
  integrations: [
    // other options
    new Integrations.BrowserTracing({
      _metricOptions: {
        _reportAllChanges: true,
      },
    });
  ],
});

[AbhiPrasad]

It’s still under a flag as the instructions here: https://github.com/getsentry/sentry-javascript/issues/3833#issuecomment-909652059, but should work on latest release 6.14.0.