CodeBlanks Logo Icon CodeBlanks

The Reporting API

JavaScript course · Expert · Lesson 15/63

Learn to collect browser reports with the Reporting API.

The Reporting API

The Reporting API collects warnings and reports produced by the browser. A deprecated API triggers a deprecation, a browser intervention creates an intervention, a page crash creates a crash, and a policy violation creates a violation report. You catch them with ReportingObserver.

You first write a callback; it receives a reports array. Then you create the observer with new ReportingObserver(callback, { types: [...], buffered: true }) and start it with observe(). The callback runs as reports arrive.

ReportingObserver options

The second argument is an options object. The types array tells which report types to listen to: 'deprecation', 'intervention', 'crash' or 'violation'. One array is enough; you do not need a separate observer per type.

Add buffered: true and reports buffered since page load arrive too. This helps you catch warnings that happened while the page was loading. To stop, call disconnect.

Exercise Watch deprecation reports

Create a ReportingObserver. The callback takes reports; for each report log report.type to the console. Pass 'deprecation' as a types value and start with observe.

Show example solution
1. Create with new ReportingObserver((reports) => {...}, { types: ['deprecation'] }).
2. Loop through reports and log report.type.
3. Start with observer.observe().

Example solution:
const observer = new ReportingObserver((reports) => {
  for (const report of reports) {
    console.log(report.type);
  }
}, { types: ['deprecation'] });
observer.observe();

Test yourself

  1. Which of these does the Reporting API not report?

    • Deprecated API usage (deprecation)
    • Browser intervention (intervention)
    • Crash report (crash)
    • The user's browsing history
    Show answer

    The user's browsing history — Correct. The Reporting API does not report browsing history; it only collects browser-originated warnings.

  2. Add the types array

    new ReportingObserver((reports) => {}, { types:____});
    Show answer
    new ReportingObserver((reports) => {}, { types:['deprecation']});
  3. Match report types

    deprecation
    Deprecated API warning
    intervention
    Browser intervention
    crash
    Crash report
    violation
    Policy violation

All lessons in Expert