Report
======

The `Report` interface of the Reporting API represents a single report.

Reports can be accessed in a number of ways:

* Via the `ReportingObserver.takeRecords()` method — this returns all reports in an observer's report queue, and then empties the queue.
* Via the `reports` parameter of the callback function passed into the `ReportingObserver()` 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 the `Report-To` HTTP header.
Instance properties
-------------------

`Report.body` Read only 

The body of the report, which is a `ReportBody` object containing the detailed report information.

`Report.type` Read only 

The type of report generated, e.g. `deprecation` or `intervention`.

`Report.url` Read 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 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();
```


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](/en-US/docs/Web/API/Report/reporting_api_example.png)

The report details are displayed via the `displayReports()` function, which takes the observer callback's `reports` parameter as its parameter:


```js
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);
    }
  });
}
```


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

Specifications
--------------

| Specification |
| --- |
| Reporting API # dom-report |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Reporting API