alepha@docs:~/framework/docs/reference/providers$
cat ReactVitalsProvider.md | pretty
1 min read
Last commit:

#ReactVitalsProvider

#Import

typescript 
1import { ReactVitalsProvider } from "alepha/react/vitals";

#Overview

Reports Core Web Vitals per page, as events: react:vital:measured for each finalised metric, and react:lcp:painted when the main content has painted.

Opt-in: inject it from what consumes the events. It is not one of the router's services, or every app would run five observers, one of them with a durationThreshold of 16 ms.

ts 
 1class Vitals { 2  provider = $inject(ReactVitalsProvider); 3  4  measured = $hook({ 5    on: "react:vital:measured", 6    handler: ({ metric, value, path }) => { 7      navigator.sendBeacon("/vitals", JSON.stringify({ metric, value, path })); 8    }, 9  });10}