通过 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 相关信息: ResizeObserverIntersectionObserver, MutationObserverPerformanceObserver 捕获性能测量值。方法包括 window.onerrorwindow.onunhandledrejection 您甚至可以在出现问题时通知我们。

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

<ph type="x-smartling-placeholder">
</ph> 关于废弃和干预的开发者工具控制台警告。
开发者工具控制台中由浏览器发起的警告

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

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

API

ReportingObserver 与其他 Observer API(例如 IntersectionObserverResizeObserver。为其提供回调;它给出了 信息。回调收到的信息是问题列表 该网页引起的以下错误:

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 可以捕获所有内容 出现的问题:

其他资源

主打图片,作者 修韦特·奥特鲁 (在 Unsplash 网站上)