W3cubDocs

/Web APIs

ReportingObserver

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.

Instance properties

This interface has no properties defined on it.

Instance 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 deprecation_report.html example, we create a simple reporting observer to observe usage of deprecated features on our web page:

js

const options = {
  types: ["deprecation"],
  buffered: true,
};

const observer = new ReportingObserver((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:

js

observer.observe();

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

js

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.

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
ReportingObserver 69 79 No No 56 16.4 69 69 No 48 16.4 10.0
ReportingObserver 69 79 No No 56 16.4 69 69 No 48 16.4 10.0
disconnect 69 79 No No 56 16.4 69 69 No 48 16.4 10.0
observe 69 79 No No 56 16.4 69 69 No 48 16.4 10.0
takeRecords 69 79 No No 56 16.4 69 69 No 48 16.4 10.0
worker_support 84 84 No No 70 No 84 84 No No No 14.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ReportingObserver