Web/API/ReportingObserver

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The ReportingObserver interface of the Reporting API allows you to collect and access reports.

Constructor

ReportingObserver(): Creates a new ReportingObserver object instance, which can be used to collect and access reports.

Properties

This interface has no properties defined on it.

Methods

ReportingObserver.disconnect(): Stops a reporting observer that had previously started observing from collecting reports.
ReportingObserver.observe(): Instructs a reporting observer to start collecting reports in its report queue.
ReportingObserver.takeRecords(): Returns the current list of reports contained in the observer's report queue, and empties the queue.

Events

This interface has no events that fire on it.

Examples

In our [[../../../../../../mdn.github.io/dom-examples/reporting-api/deprecation_report|deprecation_report.html]] example, we create a simple reporting observer to observe usage of deprecated features on our web page:

let options = {
  types: ['deprecation'],
  buffered: true
}

let observer = new ReportingObserver(function(reports, observer) {
  reportBtn.onclick = () => displayReports(reports);
}, options);

We then tell it to start observing reports using ReportingObserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor:

observer.observe();

Later on in the example we deliberately use the deprecated version of MediaDevices.getUserMedia():

if(navigator.mozGetUserMedia) {
  navigator.mozGetUserMedia(
    constraints,
    success,
    failure);
} else {
  navigator.getUserMedia(
    constraints,
    success,
    failure);
}

This causes a deprecation report to be generated; because of the event handler we set up inside the ReportingObserver() constructor, we can now click the button to display the report details.

[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2019/03/20/16561/21a3ed8ed48b5e17e73f1618f7cff1c8/reporting_api_example.png|image of a jolly bearded man with various stats displayed below it about a deprecated feature]]

Note: If you look at the complete source code, you'll notice that we actually call the deprecated getUserMedia() method twice. After the first time we call ReportingObserver.takeRecords(), which returns the first generated report and empties the queue. Because of this, when the button is pressed only the second report is listed.

Specifications

Specification	Status	Comment
Reporting APIThe definition of 'ReportingObserver' in that specification.	Editor's Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`ReportingObserver` Experimental'	Chrome Full support 69	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 56	Safari No support No	WebView Android Full support 69	Chrome Android Full support 69	Firefox Android No support No	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
`ReportingObserver()` constructor Experimental'	Chrome Full support 69	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 56	Safari No support No	WebView Android Full support 69	Chrome Android Full support 69	Firefox Android No support No	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
`disconnect` Experimental'	Chrome Full support 69	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 56	Safari No support No	WebView Android Full support 69	Chrome Android Full support 69	Firefox Android No support No	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
`observe` Experimental'	Chrome Full support 69	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 56	Safari No support No	WebView Android Full support 69	Chrome Android Full support 69	Firefox Android No support No	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
`takeRecords` Experimental'	Chrome Full support 69	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 56	Safari No support No	WebView Android Full support 69	Chrome Android Full support 69	Firefox Android No support No	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
Available in workers Experimental'	Chrome Full support 84	Edge Full support 84	Firefox No support No	IE No support No	Opera Full support 70	Safari No support No	WebView Android Full support 84	Chrome Android Full support 84	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.