在正式版应用中查找已弃用的 API。
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 来捕获应用中出现的所有错误:
- 浏览器干预
- 弃用
- 违反功能政策。请参阅 Chromium 问题 867471。
- JS 异常和错误(目前由
window.onerror
服务)。 - 未处理的 JS promise 遭拒(目前由
window.onunhandledrejection
处理)
其他资源: