在正式版应用中查找已弃用的 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 相关信息:
ResizeObserver
,
IntersectionObserver
,
MutationObserver
。
PerformanceObserver
捕获性能测量值。方法包括
window.onerror
和
window.onunhandledrejection
您甚至可以在出现问题时通知我们。
不过,还有一些其他类型的警告, 现有 API。您的网站使用已弃用的 API 或遇到 浏览器干预,DevTools 会第一个告诉您 :
![关于废弃和干预的开发者工具控制台警告。](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=5&hl=sv)
用户很自然地会认为 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 可以捕获所有内容
出现的问题:
- 浏览器干预
- 弃用
- 违反功能政策。请参阅 Chromium 问题 #867471。
- JS 异常和错误(目前由
window.onerror
提供服务)。 - 未处理的 JS promise 拒绝(目前由
window.onunhandledrejection
处理)
其他资源: