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
- [x] Figure out why LCP breadcrumbs aren't showing up and fix
- [x] Add CLS Breadcrumb
- [x] Add FCP breacrumb
- [x] Add INP breadcrumb
- [x] Add browser integration tests for new replay breadcrumbs
- [ ] Add docs

[jas-kas]

cc/ @AbhiPrasad