通过 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 开发者可以收到相关通知。

背景

不久前，我写了一篇博文（观察 Web 应用），因为我发现有许多 API 可用于监控 Web 应用中发生的“事情”，这让我着迷。例如，有些 API 可以观察有关 DOM 的信息：ResizeObserver、IntersectionObserver、MutationObserver。 PerformanceObserver 会捕获性能测量结果。window.onerror 和 window.onunhandledrejection 等方法甚至可以让我们知道何时出现问题。

不过，还有其他类型的警告无法通过现有 API 捕获。当您的网站使用已弃用的 API 或遇到浏览器干预时，DevTools 会首先向您发出通知：

开发者工具控制台针对弃用和干预措施发出的警告。
开发者工具控制台中由浏览器发起的警告。

人们自然会认为 window.onerror 会捕获这些警告。不会。 这是因为，对于由用户代理本身直接生成的警告，window.onerror 不会触发。它会在代码执行导致运行时错误（JavaScript 异常和语法错误）时触发。

ReportingObserver 填补了这一空白。它提供了一种程序化方式，可让您收到有关浏览器发出的警告（例如弃用和干预）的通知。您可以将其用作报告工具，这样就不用再担心用户在您的线上网站上遇到意外问题了。

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 成为捕获 JavaScript 中所有类型问题的实际 API。想象一下，有一个 API 可以捕获 应用中出现的所有问题：

其他资源：

主打图片由 Sieuwert Otterloo 发布在 Unsplash 上。