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

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

Eric Bidelman
Twitter GitHub 首页

ReportingObserver 可让您了解您的网站何时使用了已弃用的 API 或遇到浏览器干预。这项基本功能最初包含在 Chrome 69 中从 Chrome 84 开始，它可在工作器中使用。

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 或遇到浏览器干预措施时，开发者工具会率先通知您：

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

人们自然会认为 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，用于捕获 JavaScript 中的所有类型问题。假设用一个 API 来捕获应用中出现的所有错误：

其他资源：

主打图片：Unsplash 用户 Sieuwert Otterloo。