Report

注意：此功能在 Web Workers 中可用。

Report 接口是 Reporting API 的一部分，代表一个单独的报告。

可以通过多种方式访问报告：

通过 ReportingObserver.takeRecords() 方法 — 该方法会返回观察者报告队列中的所有报告，然后清空队列。
通过在创建新的观察者实例时传递给 ReportingObserver() 构造函数的事件处理函数中的 reports 参数。该参数包含观察者报告队列中当前存在的报告列表。
通过向通过 Reporting-Endpoints HTTP 标头定义的端点发送请求。

实例属性

Report.body 只读: 报告的正文，它是一个 ReportBody 对象，包含详细的报告信息。
Report.type 只读: 生成的报告的类型，例如 deprecation 或 intervention。
Report.url 只读: 生成报告的文档的 URL。

实例方法

此接口没有定义任何方法。

事件

此接口没有触发任何事件。

示例

在我们 deprecation_report.html 示例中，我们创建了一个简单的报告观察者来观察我们网页上已弃用功能的使用情况。

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

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

然后，我们告诉它使用 ReportingObserver.observe() 开始观察报告；这告诉观察者开始在其报告队列中收集报告，并运行构造函数中指定的函数。

observer.observe();

由于我们在 ReportingObserver() 构造函数中设置了事件处理程序，因此现在可以单击按钮来显示报告详细信息。

image of a jolly bearded man with various stats displayed below it about a deprecated feature

报告详细信息通过 displayReports() 函数显示，该函数将观察者回调的 reports 参数作为其参数。

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

reports 参数包含观察者报告队列中所有报告的数组。我们使用 forEach() 循环遍历每个报告，然后使用 for...in 结构遍历报告正文中每个条目，将每个键/值对显示在列表项中。

规范

规范
Reporting API # dom-report

浏览器兼容性

另见

Reporting API
Report-To HTTP 标头

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025 年 4 月 3 日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的页面的问题