Real User Monitoring (RUM): Wir haben 80 % der Probleme erkannt, bevor Nutzer sich beschwerten

// src/lib/rum.ts
import { onLCP, onCLS, onINP, onTTFB, onFCP } from "web-vitals/attribution"

type VitalName = "LCP" | "CLS" | "INP" | "TTFB" | "FCP"

interface VitalReport {
  name: VitalName
  value: number
  rating: "good" | "needs-improvement" | "poor"
  id: string
  metadata: Record<string, string>
  deviceType: string
  connectionType: string
}

export function initRUM() {
  const vitals: Array<{ name: VitalName; fn: (metric: any) => void }> = [
    { name: "LCP", fn: onLCP },
    { name: "CLS", fn: onCLS },
    { name: "INP", fn: onINP },
    { name: "TTFB", fn: onTTFB },
    { name: "FCP", fn: onFCP },
  ]

  vitals.forEach(({ name, fn }) => {
    fn((metric) => {
      sendVital({
        name,
        value: metric.value,
        rating: metric.rating,
        id: metric.id,
        metadata: extractAttribution(metric),
        deviceType: getDeviceType(),
        connectionType: getConnectionType(),
      })
    })
  })
}

function extractAttribution(metric: any): Record<string, string> {
  if (metric.attribution) {
    // Nützliche Debugging-Infos extrahieren
    const { element, url, fcp, ...rest } = metric.attribution
    return {
      ...(element && { lcpElement: element.tagName }),
      ...(url && { lcpUrl: url }),
    }
  }
  return {}
}

function getDeviceType(): string {
  const ua = navigator.userAgent
  if (/Mobi|Android/i.test(ua)) return "mobile"
  if (/Tablet|iPad/i.test(ua)) return "tablet"
  return "desktop"
}

function getConnectionType(): string {
  const conn = (navigator as any).connection
  return conn?.effectiveType ?? "unknown"
}

// sendBeacon für zuverlässige Übermittlung verwenden (überlebt Seitennavigation)
function sendVital(report: VitalReport) {
  const payload = {
    ...report,
    pathname: window.location.pathname,
    timestamp: Date.now(),
  }

  if (navigator.sendBeacon) {
    navigator.sendBeacon("/api/vitals", JSON.stringify(payload))
  } else {
    fetch("/api/vitals", {
      method: "POST",
      body: JSON.stringify(payload),
      keepalive: true,
    })
  }
}

// server/rum.ts
export const reportVital = createServerFn({ method: "POST" }).handler(
  async ({ request, context }) => {
    const data = await request.json()

    // In D1 für Abfragen speichern
    await context.env.DB.prepare(`
      INSERT INTO rum_metrics (
        id, name, value, rating, pathname,
        device_type, connection_type,
        country, metadata, created_at
      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
    `).bind(
      data.id,
      data.name,
      data.value,
      data.rating,
      data.pathname,
      data.deviceType,
      data.connectionType,
      request.cf?.country ?? "unknown",
      JSON.stringify(data.metadata),
      data.timestamp
    ).run()

    return { received: true }
  }
)

export const getRumDashboard = createServerFn({ method: "GET" }).handler(
  async ({}, { context }) => {
    // Gesamtmetriken für die letzten 7 Tage
    const overall = await context.env.DB.prepare(`
      SELECT
        name,
        COUNT(*) as samples,
        APPROX_PERCENTILE(value, 0.5) as p50,
        APPROX_PERCENTILE(value, 0.75) as p75,
        APPROX_PERCENTILE(value, 0.95) as p95,
        SUM(CASE WHEN rating = 'good' THEN 1 ELSE 0 END) * 100.0 / COUNT(*) as good_pct
      FROM rum_metrics
      WHERE created_at > datetime('now', '-7 days')
      GROUP BY name
    `).all()

    // Aufschlüsselung nach Pfad (Top 20 langsamste)
    const byPath = await context.env.DB.prepare(`
      SELECT
        pathname,
        APPROX_PERCENTILE(CASE WHEN name = 'LCP' THEN value END, 0.5) as lcp_p50,
        APPROX_PERCENTILE(CASE WHEN name = 'INP' THEN value END, 0.5) as inp_p50,
        COUNT(*) as pageviews
      FROM rum_metrics
      WHERE created_at > datetime('now', '-7 days')
      GROUP BY pathname
      ORDER BY lcp_p50 DESC
      LIMIT 20
    `).all()

    return { overall: overall.results, slowestPaths: byPath.results }
  }
)

export const checkRumAlerts = createServerFn({ method: "GET" }).handler(
  async ({}, { context }) => {
    const alerts = []

    // Alert, wenn Anteil guter LCP unter den Schwellenwert fällt
    const lcpQuality = await context.env.DB.prepare(`
      SELECT
        COUNT(*) as total,
        SUM(CASE WHEN rating = 'good' THEN 1 ELSE 0 END) * 100.0 / COUNT(*) as good_pct
      FROM rum_metrics
      WHERE name = 'LCP' AND created_at > datetime('now', '-1 hour')
    `).first()

    if (lcpQuality && Number(lcpQuality.good_pct) < 70) {
      alerts.push({
        type: "rum_degradation",
        metric: "LCP",
        goodPct: Math.round(Number(lcpQuality.good_pct)),
        threshold: 70,
        severity: "high",
      })
    }

    // Alert, wenn eine bestimmte Seite p95 LCP > 5 s hat
    const slowPages = await context.env.DB.prepare(`
      SELECT pathname, COUNT(*) as views
      FROM rum_metrics
      WHERE name = 'LCP'
        AND value > 5000
        AND created_at > datetime('now', '-1 hour')
      GROUP BY pathname
      HAVING views > 10
      ORDER BY views DESC
      LIMIT 5
    `).all()

    if (slowPages.results.length > 0) {
      alerts.push({
        type: "slow_pages",
        pages: slowPages.results,
        severity: "medium",
      })
    }

    return alerts
  }
)

-- migrations/rum_metrics.sql
CREATE TABLE IF NOT EXISTS rum_metrics (
  id TEXT PRIMARY KEY,
  name TEXT NOT NULL,         -- LCP, CLS, INP, TTFB, FCP
  value REAL NOT NULL,        -- Metrikwert in ms oder Score
  rating TEXT NOT NULL,       -- good, needs-improvement, poor
  pathname TEXT NOT NULL,     -- URL-Pfad
  device_type TEXT,           -- mobile, desktop, tablet
  connection_type TEXT,       -- 4g, 3g, 2g, slow-2g
  country TEXT,               -- Zweistelliger Ländercode
  metadata TEXT,              -- JSON mit Attributionsdaten
  created_at INTEGER NOT NULL
);

CREATE INDEX idx_rum_name ON rum_metrics(name);
CREATE INDEX idx_rum_created ON rum_metrics(created_at);
CREATE INDEX idx_rum_path ON rum_metrics(pathname);