webvitals_exporter

README

webvitals_exporter

Report Web Vitals from Next.js to Prometheus

Report Web Vitals

The exporter exposes a /vitals endpoint where results can be reportet.

with Next.js

Export a reportWebVitals function from your _app.js/ts

export function reportWebVitals(metric) {
    const body = JSON.stringify(metric)
    const url = 'http://{ADRESS_TO_SERVER}:2113/vitals'

    // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
    if (navigator.sendBeacon) {
        navigator.sendBeacon(url, body)
    } else {
        fetch(url, { body, method: 'POST', keepalive: true })
    }
}

For further documentation visit https://nextjs.org/docs/advanced-features/measuring-performance

Documentation

Index

• Variables
• func HandleWebVital(write http.ResponseWriter, req *http.Request)
• func StartServer(port string)
• type Label
• type Vital
• type WebVitalPayload
• type WebVitals

Variables

var Vitals = WebVitals{
	TTFB: createVital("TTFB", "Time To First Byte"),
	FCP:  createVital("FCP", "First Contentful Paint"),
	LCP:  createVital("LCP", "Largest Contentful Paint"),
	FID:  createVital("FID", "First Input Delay"),
	CLS:  createVital("ClS", "Cumulative Layout Shift"),
}

Functions

func HandleWebVital

func HandleWebVital(write http.ResponseWriter, req *http.Request)

func StartServer

func StartServer(port string)

Types

type Label

type Label string

const (
	Custom   Label = "custom"
	WebVital Label = "web-vital"
)

type Vital

type Vital = *prometheus.SummaryVec

type WebVitalPayload

type WebVitalPayload struct {
	Id        string  `json:"id"`
	Label     Label   `json:"label"`
	Name      string  `json:"name"`
	StartTime float64 `json:"startTime"`
	Value     float64 `json:"value"`
}

type WebVitals

type WebVitals struct {
	TTFB *prometheus.SummaryVec
	FCP  *prometheus.SummaryVec
	LCP  *prometheus.SummaryVec
	FID  *prometheus.SummaryVec
	CLS  *prometheus.SummaryVec
}