Reporting API Demo

The Reporting API is a web platform standard that allows browsers to automatically send reports about issues on your website—such as CSP violations, deprecated API usage, network errors, browser interventions, and crashes—to a specified endpoint. It provides a unified mechanism for collecting client-side error and warning data, helping developers monitor and improve their site's health, security, and compatibility.

Add the Reporting-Endpoints HTTP response header to your site:
Reporting-Endpoints: main="https://your-server.com/reports"
Then reference it in your CSP header using report-to main (modern) or the legacy report-uri directive. For deprecation and other report types, use the Report-To header (older) or configure via Reporting-Endpoints (newer spec). Ensure your endpoint server accepts POST requests with Content-Type: application/reports+json.

report-uri is the legacy CSP directive that specifies a single URL for CSP violation reports. report-to is the modern replacement that references a named endpoint group defined in the Report-To or Reporting-Endpoints header, supporting multiple endpoints, load balancing, and failure handling. Browsers are gradually deprecating report-uri in favor of report-to, but many still support both for backward compatibility.

The Reporting API supports multiple report types: CSP Violation (csp-violation) for blocked resources; Deprecation (deprecation) for use of deprecated web platform features; Network Error Logging (network-error) via NEL; Intervention (intervention) when the browser overrides certain behaviors; and Crash (crash) reports for page crashes. Each type has its own JSON schema structure.

Use tools like this demo to understand report formats, then: (1) Set up a test endpoint using a service like report-uri.com or your own server; (2) Add the appropriate headers to a test page; (3) Trigger a CSP violation by adding an inline script when your policy disallows it; (4) Use document.write() to trigger a deprecation report; (5) Check Chrome DevTools under Application → Reporting API to see pending reports; (6) Monitor your endpoint server logs for incoming POST requests.

The Reporting API is supported in Chromium-based browsers (Chrome, Edge, Opera, Brave) from version 69+. Firefox has partial support for CSP reporting via report-uri but limited support for the full Reporting API. Safari supports CSP violation reporting via report-uri but does not yet fully implement the Reporting API spec. Always provide fallback mechanisms and check Can I Use for the latest compatibility data.

A deprecation report is generated when your website uses a web platform feature that is scheduled for removal. Examples include document.write(), synchronous XMLHttpRequest, deprecated shadow DOM APIs, and legacy TLS versions. These reports help you proactively find and fix issues before browser updates break your site. They include an anticipatedRemoval date so you know how urgently action is needed.

Reports may contain personally identifiable information (PII) such as IP addresses, user agents, and full URLs with query parameters. To comply with GDPR and other privacy regulations: (1) Host your reporting endpoint on a server you control; (2) Strip or hash IP addresses before storage; (3) Avoid collecting unnecessary URL query parameters; (4) Implement data retention policies; (5) Update your privacy policy to disclose report collection; (6) Consider using services with built-in GDPR compliance features.