ReportD

Browser reporting and Web Vitals dashboard. Source on GitHub.

Setup

Add these snippets to your site to start sending data. Replace YOURSITE with a short name for your service.

Web Vitals

Tracks LCP, CLS, INP, FCP, and TTFB using the web-vitals library.

<script type="module">
  import { onCLS, onINP, onLCP, onFCP, onTTFB }
    from 'https://unpkg.com/web-vitals@5?module';

  function send(metric) {
    const body = JSON.stringify(metric);
    navigator.sendBeacon(
      '/analytics/YOURSITE', body
    ) || fetch('/analytics/YOURSITE', {
      body, method: 'POST', keepalive: true
    });
  }

  onCLS(send);
  onFCP(send);
  onINP(send);
  onLCP(send);
  onTTFB(send);
</script>

Browser Reports

Receives CSP violations, deprecation warnings, interventions, crashes, COOP, COEP, and permissions policy violations.

# Reporting API v1 (modern browsers)
Reporting-Endpoints: default="/reporting/YOURSITE"

# CSP with reporting
Content-Security-Policy:
  default-src 'self'; report-to default;

# COOP / COEP
Cross-Origin-Opener-Policy:
  same-origin; report-to="default"
Cross-Origin-Embedder-Policy:
  require-corp; report-to="default"

# Legacy Report-To (older browsers)
Report-To: {"group":"default",
  "max_age":10886400,
  "endpoints":[{"url":"/report/YOURSITE"}]}

API Endpoints

Method Endpoint Description
POST /analytics/{service} Send Web Vitals data
POST /reporting/{service} Reporting API v1 endpoint
POST /report/{service} Legacy Report-To endpoint
GET /view/{service} Dashboard for a service
GET /api/vitals/{service} JSON: p75 summaries + daily time series
GET /api/reports/{service} JSON: report counts + recent violations