sentry-javascript icon indicating copy to clipboard operation
sentry-javascript copied to clipboard

Add all Web Vitals to Replay Breadcrumbs

Open jas-kas opened this issue 10 months ago • 1 comments

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 https://github.com/getsentry/sentry-javascript/blob/6f5dd5008ffef3f0898b77b876be13d8520a8c33/packages/replay-internal/src/coreHandlers/performanceObserver.ts#L10 to add CLS, FCP, INP.

these handlers are exposed in browser-utils https://github.com/getsentry/sentry-javascript/blob/6f5dd5008ffef3f0898b77b876be13d8520a8c33/packages/browser-utils/src/metrics/instrument.ts#L92-L133 and the approach can be identical to what we do with LCP.

### Tasks
- [ ] Figure out why LCP breadcrumbs aren't showing up and fix
- [ ] Add CLS Breadcrumb
- [ ] Add FCP breacrumb
- [ ] Add INP breadcrumb
- [ ] Add browser integration tests for new replay breadcrumbs
- [ ] Add docs

jas-kas avatar Apr 16 '24 20:04 jas-kas

cc/ @AbhiPrasad

jas-kas avatar Apr 16 '24 20:04 jas-kas