Reporting API Playground - Free Online Tool | IconVault

Learn the Reporting API: attach a real ReportingObserver, watch live reports, and build a Report-To header. Free, runs in your browser.

All tools

Reporting API

ReportingObserver with Report-To header builder

5 of 5 free uses left
ReportingObserverChecking…

Report types to observe

Simulate a report

Triggered by deprecated platform APIs.

Real reports only arrive if the browser emits them (try loading this page's deprecated features, or visit a site with CSP/NEL headers). Samples are clearly marked so the log never lies.

Reports log

No reports yet. Start the observer or inject a sample.

Report-To header builder

# HTTP response header
Report-To: {"group":"default","max_age":10886400,"priority":1,"endpoints":[{"url":"https://reports.example.com/reports"}],"include_subdomains":true}
Reporting-Endpoints: default="https://reports.example.com/reports"

# Express / Node
res.setHeader("Reporting-Endpoints", 'default="https://reports.example.com/reports"');

About this tool

IconVault's Reporting API Playground lets you work with the Reporting API hands-on. Attach a real ReportingObserver with buffered observation for the report types you choose (deprecation, intervention, network-error, crash, security, permissions-policy) and watch genuine reports land in a live log as the browser emits them. A sample injector adds realistic example reports, clearly marked as simulated, and a header builder generates a complete Report-To configuration with max_age, priority, and server snippets. It is free and runs fully in your browser.

The Reporting API is how browsers tell you about deprecations, interventions, CSP violations, and network errors without console spam. Learning it from docs is hard because reports only appear when real events occur, so this lab pairs the live observer with annotated samples showing the exact body shape of each report type. The Report-To and Reporting-Endpoints builder turns theory into deployable server config you can copy into Express or Nginx.

Frequently asked questions

Popular searches

reporting apireporting api tutorialreporting api javascriptreportingobserverreportingobserver examplereport-to headerreport-to header generatorreporting-endpointsreporting endpoints headerreporting api demoreporting api playgrounddeprecation reportintervention reportnetwork error loggingnel headernetwork-error reportcrash report apicsp reportcontent security policy reportingpermissions policy reportreporting api browser supportreporting api chromereportingobserver bufferedreportingobserver typesreport type deprecationreport type interventionhow to use reporting apireporting api mdnreport to header examplereport-to max_agereporting endpoint priorityinclude_subdomains report-toexpress report-to headernginx report-to headercollect browser reportsbrowser telemetry apideprecation warnings javascriptchrome deprecation reportlarge layout shift interventionscroll anchoring interventionreport sampling fractionreporting api typescriptlearn reporting apireporting api code sampleinteractive reporting demoreporting log viewerreport body formatsecurity report apiweb reporting apimonitor deprecations sitefrontend observability apireporting api vs console

More tools

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →