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
|
export function setupPerformanceObserver(replay: ReplayContainer): () => void { |
to add CLS, FCP, INP.
these handlers are exposed in browser-utils
|
/** |
|
* 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