ReportingObserver

ReportingObserverReporting API 的一个接口,允许您收集和访问报告。

构造函数

ReportingObserver()

创建一个新的 ReportingObserver 对象实例,可用于收集和访问报告。

实例属性

此接口没有定义任何属性。

实例方法

ReportingObserver.disconnect()

停止之前开始观察的报告观察者收集报告。

ReportingObserver.observe()

指示报告观察者开始在其报告队列中收集报告。

ReportingObserver.takeRecords()

返回观察者报告队列中包含的当前报告列表,并清空队列。

事件

此接口没有在其上触发的事件。

示例

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

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

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

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

js
observer.observe();

在示例中,我们故意使用了已弃用的 MediaDevices.getUserMedia() 版本

js
if (navigator.mozGetUserMedia) {
  navigator.mozGetUserMedia(constraints, success, failure);
} else {
  navigator.getUserMedia(constraints, success, failure);
}

这将导致生成一个弃用报告;由于我们在 ReportingObserver() 构造函数内部设置的事件处理程序,我们现在可以单击按钮来显示报告详细信息。

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

注意:如果您查看 完整的源代码,您会注意到我们实际上调用了两次已弃用的 getUserMedia() 方法。在第一次调用 ReportingObserver.takeRecords() 之后,该方法将返回第一个生成的报告并清空队列。因此,当按下按钮时,只列出了第二个报告。

规范

规范
Reporting API
# interface-reporting-observer

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅