@philiprehberger/web-vitals

Web Vitals calculation utilities and client error capture

Installation

npm install @philiprehberger/web-vitals

Usage

import { getWebVitalRating, calculateWebVitalStats, formatWebVitalValue } from '@philiprehberger/web-vitals';

const rating = getWebVitalRating('LCP', 2100); // 'good'
const stats = calculateWebVitalStats('LCP', [1200, 2500, 3800, 1800]);
console.log(formatWebVitalValue('LCP', stats.p75)); // '2.5s'

Client Error Capture

import { initClientErrorCapture } from '@philiprehberger/web-vitals';

initClientErrorCapture({
  endpoint: '/api/monitoring/errors',
});

API

| Export | Type | Description | |--------|------|-------------| | getWebVitalRating(metric, value) | Function | Returns 'good' \| 'needs-improvement' \| 'poor' for a metric value | | calculateWebVitalStats(metric, values) | Function | Compute p50/p75/p95 percentiles and rating distribution | | calculatePercentile(sortedValues, percentile) | Function | Generic percentile calculation on a sorted array | | formatWebVitalValue(metric, value) | Function | Format a value for display (e.g. 2500 -> '2.5s') | | getRatingLabel(rating) | Function | Convert rating to display label ('Good', 'Needs Improvement', 'Poor') | | getWorstMetric(metrics) | Function | Find the worst-performing metric from a set of stats | | normalizePagePath(url) | Function | Replace dynamic URL segments with [id]/[uuid] placeholders | | initClientErrorCapture(options) | Function | Set up global error and unhandled rejection capture | | WEB_VITALS_THRESHOLDS | Constant | Threshold definitions for all six Core Web Vitals | | WebVitalName | Type | 'LCP' \| 'CLS' \| 'FID' \| 'INP' \| 'FCP' \| 'TTFB' | | WebVitalRating | Type | 'good' \| 'needs-improvement' \| 'poor' | | WebVitalStats | Type | Stats object with percentiles and rating counts | | PageWebVitals | Type | Per-page metrics with worst metric identification | | ClientErrorCaptureOptions | Type | Options: endpoint, headers?, beforeReport? |

Development

npm install
npm run build
npm test

Support

If you find this project useful:

⭐ Star the repo

🐛 Report issues

💡 Suggest features

❤️ Sponsor development

🌐 All Open Source Projects

💻 GitHub Profile

🔗 LinkedIn Profile

License

MIT