ReportingObserver：了解代码的运行状况

Philip Walton

要点

镇里来了个新观察员！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 用于监控 “stuff”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 将来能够真正成为 API 用于捕获 JS 中各种类型的问题。想象一下，一个 API 可以捕获所有内容 出现的问题：

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

我也很期待看到将 ReportingObserver 集成到 工作流程Lighthouse 是一个工具示例 已标记浏览器弃用情况 “避免使用已弃用的 API”审核：

Lighthouse 审查是否使用了已废弃的 API，可以使用 ReportingObserver。
有关使用已废弃 API 的 Lighthouse 审核可以使用 ReportingObserver。

Lighthouse 目前使用 DevTools 协议 以爬取控制台消息并向开发者报告这些问题。相反， 不妨切换到 ReportingObserver 提供结构合理的弃用报告以及额外的元数据，例如 anticipatedRemoval日期。

其他资源：