@sailfish-rrweb/rrweb-plugin-performance-record

rrweb plugin that captures browser performance metrics and emits them through rrweb's plugin pipeline.

Metrics

| Metric | Source | Notes | |---|---|---| | FCP — First Contentful Paint | web-vitals onFCP | | | LCP — Largest Contentful Paint | web-vitals onLCP | | | TBT — Total Blocking Time | PerformanceObserver({type:'longtask', buffered:true}) summing max(0, duration − 50) | Field approximation — emitted at load. web-vitals does not expose TBT (lab-only in Lighthouse). | | DCL — DOMContentLoaded | performance.getEntriesByType('navigation')[0].domContentLoadedEventEnd | ms since performance.timeOrigin. | | LOAD — load event | performance.getEntriesByType('navigation')[0].loadEventEnd | ms since performance.timeOrigin. |

FCP and LCP re-emit on SPA soft-navigations (via web-vitals' native support for history API / BFCache). TBT, DCL, and LOAD are emitted once per hard load.

Usage

import { getRecordPerformancePlugin } from '@sailfish-rrweb/rrweb-plugin-performance-record';

const { name, observer } = getRecordPerformancePlugin({
  getPageVisitUuid: () => sessionStorage.getItem('pageVisitUUID'),
});

const teardown = observer(
  (payload) => {
    // payload: { metric, value, rating?, navigationType?, pageVisitUuid, href, timestamp }
    sendToYourBackend(payload);
  },
  window,
  { getPageVisitUuid: () => sessionStorage.getItem('pageVisitUUID') },
);

// Later: teardown();