JavaScript
The Reporting API
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
-
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.
-
Add the types array
new ReportingObserver((reports) => {}, { types:____});
Show answer
new ReportingObserver((reports) => {}, { types:['deprecation']});
-
Match report types
- deprecation
- Deprecated API warning
- intervention
- Browser intervention
- crash
- Crash report
- violation
- Policy violation
Next lesson: Broadcast channel
