TheReport interface of theReporting API represents a single report.

Reports can be accessed in a number of ways:

• Via theReportingObserver.takeRecords() method — this returns all reports in an observer's report queue, and then empties the queue.
• Via thereports parameter of the callback function passed into theReportingObserver() constructor upon creation of a new observer instance. This contains the list of reports currently contained in the observer's report queue.
• By sending requests to the endpoints defined via theReporting-Endpoints HTTP header.

Instance properties

Report.bodyRead only

The body of the report, which is aReportBody object containing the detailed report information.

Report.typeRead only

The type of report generated, e.g.,deprecation orintervention.

Report.urlRead only

The URL of the document that generated the report.

Instance methods

This interface has no methods defined on it.

Events

This interface has no events that fire on it.

Examples

In ourdeprecation_report.html example, we create a simple reporting observer to observe usage of deprecated features on our web page:

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 usingReportingObserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor:

observer.observe();

Because of the event handler we set up inside theReportingObserver() constructor, we can now click the button to display the report details.

The report details are displayed via thedisplayReports() function, which takes the observer callback'sreports parameter as its parameter:

function displayReports(reports) {  const outputElem = document.querySelector(".output");  const list = document.createElement("ul");  outputElem.appendChild(list);  reports.forEach((report, i) => {    let listItem = document.createElement("li");    let textNode = document.createTextNode(      `Report ${i + 1}, type: ${report.type}`,    );    listItem.appendChild(textNode);    let innerList = document.createElement("ul");    listItem.appendChild(innerList);    list.appendChild(listItem);    for (const key in report.body) {      const innerListItem = document.createElement("li");      const keyValue = report.body[key];      innerListItem.textContent = `${key}: ${keyValue}`;      innerList.appendChild(innerListItem);    }  });}

Thereports parameter contains an array of all the reports in the observer's report queue. We loop over each report using aforEach() loop, then iterate over each entry of in the report's body using afor...in structure, displaying each key/value pair inside a list item.

Specifications

Browser compatibility

See also

• Reporting API
• Report-To HTTP header