通过 ReportingObserver API 了解代码的运行状况

在正式版应用中查找已弃用的 API。

ReportingObserver 会在您的网站使用已弃用的 API 或运行时通知您 转变为浏览器干预。最初的基本功能是 已推出 Chrome 69从 Chrome 84 开始，该版本可在 worker 中使用。

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

使用回调将报告发送到后端或分析提供程序，以获取 分析。

这有何用处？在此 API 推出之前，弃用和干预警告 仅在开发者工具中作为控制台消息提供。尤其是干预措施， 只会由设备和网络等各种实际约束条件触发 条件。因此，您甚至可能在开发/测试时都看不到这些消息 本地网站。ReportingObserver 提供了解决此问题的方法。时间 用户在大范围中遇到潜在问题， 。

背景

不久之前，我写了一篇博文（观察您的 Web 应用） 因为我发现有这么多的 API 用于监控 “stuff”Web 应用中发生的事件。例如，有些 API 可以观察 DOM 相关信息： ResizeObserver, IntersectionObserver, MutationObserver。 PerformanceObserver 捕获性能测量值。方法包括 window.onerror 和 window.onunhandledrejection 您甚至可以在出现问题时通知我们。

不过，还有一些其他类型的警告， 现有 API。您的网站使用已弃用的 API 或遇到 浏览器干预，DevTools 会第一个告诉您 ：

关于废弃和干预的开发者工具控制台警告。
开发者工具控制台中由浏览器发起的警告
。

用户很自然地会认为 window.onerror 捕获了这些警告。但事实并非如此。 这是因为 window.onerror 不会针对 用户代理本身它针对运行时错误（JavaScript 异常和 语法错误）。

ReportingObserver 选择 Slack。它提供了一种程序化方式 有关浏览器发出的警告（例如弃用和 干预。您可以将其用作报告工具，减少损失 您一直都在想着用户在您的实际网站上是否遇到了意料之外的问题。

API

ReportingObserver 与其他 Observer API（例如 IntersectionObserver和ResizeObserver。为其提供回调；它给出了 个人信息。回调收到的信息是问题列表 该网页引起的以下错误：

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    // → report.type === 'deprecation'
    // → report.url === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
    // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
    // → report.body.lineNumber === 11
    // → report.body.columnNumber === 22
    // → report.body.sourceFile === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.anticipatedRemoval === <JS_DATE_STR> or null
  }
});

observer.observe();

过滤后的报告

您可以对报告进行预先过滤，以便仅观察某些报告类型。目前， 有两种报告类型：'deprecation' 和 'intervention'。

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['deprecation']});

缓冲报告

使用 buffered: true 选项可查看 在创建观察器实例之前生成的：

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

这个选项非常适合延迟加载使用 ReportingObserver。观察器添加得很晚，但您不会错过 之前发生的任何事件

停止观察

使用 disconnect() 方法停止观察：

observer.disconnect();

示例

向分析服务提供商报告浏览器干预情况

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    sendReportToAnalytics(JSON.stringify(report.body));
  }
}, {types: ['intervention'], buffered: true});

observer.observe();

在 API 即将被移除时收到通知

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    if (report.type === 'deprecation') {
      sendToBackend(`Using a deprecated API in ${report.body.sourceFile} which will be
                     removed on ${report.body.anticipatedRemoval}. Info: ${report.body.message}`);
    }
  }
});

observer.observe();

总结

ReportingObserver为发现和监控数据提供了额外的方式 您的 Web 应用中的潜在问题甚至还是一款非常实用的工具 代码库健康状况（或缺少代码库）。将报告发送到后端 更新代码，提高利润！

未来工作

我希望 ReportingObserver 将来能够成为 捕获所有类型的问题。想象一下，一个 API 可以捕获所有内容 出现的问题：

其他资源：

主打图片，作者 修韦特·奥特鲁 （在 Unspin 中）。