Investigate and Experiment with soft navigation web vitals

[Lms24]

Problem Statement

Today, our SDK collects web vitals via the web-vitals npm packages. Web vitals don't optimally model to SPA-like web applications, where users can "soft-navigate" between pages without actually navigating (i.e. loading a new page) from a browser's PoV.

Solution Brainstorm

Chromium is starting experimentation with soft-navigation-based web vitals: https://developer.chrome.com/docs/web-platform/soft-navigations-experiment

https://developer.chrome.com/blog/new-soft-navigations-origin-trial

While it will likely take some time to get this stable (if ever) we should do some investigation and experimentation around how we can support these. Better web vitals for SPAs would be a huge improvement and more insightful for Sentry users building SPAs.

We can start experimentation once web-vitals introduces support (https://github.com/GoogleChrome/web-vitals/pull/308) for the experimental mode.

Additional Context

Tip: React with 👍 to help prioritize this improvement. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.

[linear[bot]]

JS-1019

[logaretm]

Adding this from the updated blog post:

The following are some of the changes that sites owners need to consider after enabling this feature:

• CLS and INP metrics may be sliced by soft navigation URL, rather than be measured over the duration of the whole page lifecycle.
• The largest-contentul-paint entry is already finalized on an interaction, so is only used to measure for the initial "hard" navigation LCP so no additional logic is needed to change how that is measured.
• The new interaction-contentful-paint metric will be emitted from interactions, which may be used to measure LCP for soft navigations.
• To attribute soft navigations to the correct URL, the new navigationID attribute on your performance entries may need to be considered in your application code using these entries.
• Not all users will support this soft navigation API, particularly for older Chrome versions, and for those using other browsers. Be aware that some users may not report soft-navigation metrics, even if they report Core Web Vitals metrics.
• As an experimental new feature that is not enabled by default, sites should test this feature for unintended side-effects.

I have setup an SPA app locally and also prepped Soft Nav Webvitals reporting in it with Chrome Canary and started seeing some numbers, I haven't connected it to sentry yet as I am not sure how the pipeline will react to it.

Will run some tests and post my findings here.