Add all Web Vitals to Replay Breadcrumbs

[jas-kas]

Summary from Abhi:

In my opinion short term I think we can just add more breadcrumbs for CLS, FCP like we do with LCP (we should dedupe so this is created regardless of using performance or replay). I assume CLS is the most important, so perhaps we can focus on that and skip FCP considering idk how useful FCP is for a replay where you can already visually see how page is being painted.

Update

sentry-javascript/packages/replay-internal/src/coreHandlers/performanceObserver.ts

Line 10 in 6f5dd50

export function setupPerformanceObserver(replay: ReplayContainer): () => void {

to add CLS, FCP, INP.

these handlers are exposed in browser-utils

sentry-javascript/packages/browser-utils/src/metrics/instrument.ts

Lines 92 to 133 in 6f5dd50

	/**
	* Add a callback that will be triggered when a CLS metric is available.
	* Returns a cleanup callback which can be called to remove the instrumentation handler.
	*
	* Pass `stopOnCallback = true` to stop listening for CLS when the cleanup callback is called.
	* This will lead to the CLS being finalized and frozen.
	*/
	export function addClsInstrumentationHandler(
	callback: (data: { metric: Metric }) => void,
	stopOnCallback = false,
	): CleanupHandlerCallback {
	return addMetricObserver('cls', callback, instrumentCls, _previousCls, stopOnCallback);
	}
	/**
	* Add a callback that will be triggered when a LCP metric is available.
	* Returns a cleanup callback which can be called to remove the instrumentation handler.
	*
	* Pass `stopOnCallback = true` to stop listening for LCP when the cleanup callback is called.
	* This will lead to the LCP being finalized and frozen.
	*/
	export function addLcpInstrumentationHandler(
	callback: (data: { metric: Metric }) => void,
	stopOnCallback = false,
	): CleanupHandlerCallback {
	return addMetricObserver('lcp', callback, instrumentLcp, _previousLcp, stopOnCallback);
	}
	/**
	* Add a callback that will be triggered when a FID metric is available.
	* Returns a cleanup callback which can be called to remove the instrumentation handler.
	*/
	export function addFidInstrumentationHandler(callback: (data: { metric: Metric }) => void): CleanupHandlerCallback {
	return addMetricObserver('fid', callback, instrumentFid, _previousFid);
	}
	/**
	* Add a callback that will be triggered when a FID metric is available.
	*/
	export function addTtfbInstrumentationHandler(callback: (data: { metric: Metric }) => void): CleanupHandlerCallback {
	return addMetricObserver('ttfb', callback, instrumentTtfb, _previousTtfb);
	}

and the approach can be identical to what we do with LCP.

Tasks

Beta Give feedback

1. Figure out why LCP breadcrumbs aren't showing up and fix
2. Add CLS Breadcrumb
3. Add FCP breacrumb
4. Add INP breadcrumb
5. Add browser integration tests for new replay breadcrumbs
6. Add docs

[jas-kas]

cc/ @AbhiPrasad