files/en-us/web/api/deprecationreportbody/index.md
{{APIRef("Reporting API")}}{{AvailableInWorkers}}{{SeeCompatTable}}
The DeprecationReportBody interface of the Reporting API represents the body of a deprecation report.
A deprecation report is generated when a deprecated feature (for example a deprecated API method) is used on a document being observed by a {{domxref("ReportingObserver")}}. In addition to the support of this API, receiving useful deprecation warnings relies on browser vendors adding these warnings for deprecated features.
{{InheritanceDiagram}}
An instance of DeprecationReportBody is returned as the value of {{domxref("Report.body")}} when {{domxref("Report.Type")}} is deprecation. The interface has no constructor.
This interface also inherits properties from {{domxref("ReportBody")}}.
NavigatorGetUserMedia. This can be used to group reports by deprecated feature.null.null otherwise.null otherwise.null otherwise.This interface also inherits methods from {{domxref("ReportBody")}}.
InterventionReportBody object.In our deprecation_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 using {{domxref("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();
Because of the event handler we set up inside the ReportingObserver() constructor, we can now click the button to display the report details.
The report details are displayed via the displayReports() function, which takes the observer callback's reports parameter as its parameter:
function displayReports(reports) {
const outputElem = document.querySelector(".output");
const list = document.createElement("ul");
outputElem.appendChild(list);
reports.forEach((report, i) => {
const listItem = document.createElement("li");
const textNode = document.createTextNode(
`Report ${i + 1}, type: ${report.type}`,
);
listItem.appendChild(textNode);
const innerList = document.createElement("ul");
listItem.appendChild(innerList);
list.appendChild(listItem);
for (const [key, value] of Object.entries(report.body)) {
const innerListItem = document.createElement("li");
innerListItem.textContent = `${key}: ${value}`;
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 basic for loop, then iterate over each entry of in the report's body (a DeprecationReportBody instance) using a for...in structure, displaying each key/value pair inside a list item.
{{Specifications}}
{{Compat}}