ReportingObserver：了解代码的运行状况

Philip Walton
Philip Walton
Twitter GitHub 首页

要点

镇上来了个新观察者！ReportingObserver 是一种新 API，可让您了解网站何时使用了已废弃的 API 或遇到浏览器干预：

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

observer.observe();

该回调可用于将报告发送到后端或分析服务提供商以进行进一步分析。

为什么它有用？到目前为止，弃用和干预警告仅以控制台消息的形式在开发者工具中提供。具体而言，干预仅由各种现实约束条件（例如设备和网络条件）触发。因此，在本地开发/测试网站时，您甚至可能永远都不会看到这些消息。ReportingObserver 可以解决这个问题。当用户在实际遇到潜在问题时 我们可以收到相关通知

简介

不久前，我写了一篇博文（“观察您的 Web 应用”），因为我发现它有很多 API 来监控 Web 应用中发生的“事物”，非常有趣。例如，以下 API 可以观察 DOM 的相关信息：ResizeObserver、IntersectionObserver、MutationObserver。以下 API 可用于捕获性能测量值：PerformanceObserver。window.onerror 和 window.onunhandledrejection 等其他 API 甚至会在出现问题时通知我们。

不过，还存在这些现有 API 无法捕获的其他类型的警告。当您的网站使用已废弃的 API 或针对浏览器干预运行时，开发者工具会首先告诉您：

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

人们自然会认为 window.onerror 捕获了这些警告。但事实并非如此！ 这是因为，如果用户代理本身直接生成警告，系统不会触发 window.onerror。它会针对因执行代码而导致的运行时错误（JS 异常和语法错误）触发。

ReportingObserver 提取 Slack。它提供了一种编程方式，可让您在收到浏览器发出的警告（例如弃用和干预）时收到通知。您可以将其用作报告工具，而无需担心用户是否在您的实际网站上遇到了意外问题。

API

该 API 与其他“观察者”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();

过滤出的报告

您可以对报告进行预过滤，以便仅观察某些报告类型：

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

缓冲报告

如果您想查看在观察器创建之前生成的报告，buffered: true 选项非常有用：

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

非常适用于延迟加载使用 ReportingObserver 的库等情况。观察器会延迟添加，但您不会错过网页加载早期发生的任何变化。

停止观察

有！它有一个 disconnect 方法：

observer.disconnect(); // Stop the observer from collecting reports.

示例

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

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 将来能够成为真正用于捕获 JS 中所有类型问题的 API。假设用一个 API 来捕获应用中出现的所有错误：

  • 浏览器干预
  • 弃用
  • 违反功能政策。请访问 crbug.com/867471。
  • JS 异常和错误（目前由 window.onerror 服务）。
  • 未处理的 JS promise 遭拒（目前由 window.onunhandledrejection 处理）

此外，我对将 ReportingObserver 集成到其工作流中的工具感到非常兴奋。Lighthouse 就是一个工具，该工具会在您运行“避免已废弃的 API”审核时标记浏览器弃用情况：

针对使用已废弃 API 的 Lighthouse 审核可以使用 ReportingObserver。
针对使用已弃用 API 的 Lighthouse 审核可以使用 ReportingObserver。

Lighthouse 目前使用 DevTools 协议来爬取控制台消息并向开发者报告这些问题。您可以改用 ReportingObserver 来查看结构合理的废弃报告和其他元数据（例如 anticipatedRemoval 日期）。

其他资源：