要点
镇里来了个新观察员!ReportingObserver
是一个新 API,可让您
了解您的网站何时使用了已弃用的 API 或遇到
浏览器干预:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
该回调可用于将报告发送给后端或分析服务提供商 以供进一步分析。
这有何用处?到目前为止,
干预警告仅在开发者工具中以控制台消息的形式提供。
特别是,干预措施仅由各种现实因素触发
例如设备和网络条件因此,您甚至可能看不到
在本地开发/测试网站时遇到困难。ReportingObserver
提供
来解决这个问题。当用户实际遇到潜在问题时
我们会收到相关通知
简介
不久之前,我写了一篇博文(“观察您的 Web 应用”)
因为我发现有这么多的 API 用于监控
“stuff”Web 应用中发生的事件。例如,有些 API 可以观察
有关 DOM 的信息:ResizeObserver
、
IntersectionObserver
、MutationObserver
。还有一些 API
效果衡量:PerformanceObserver
。其他
window.onerror
和 window.onunhandledrejection
等 API 甚至可让我们知晓
当出现问题时。
不过,这些模式不会捕获其他类型的警告 现有 API。您的网站使用已弃用的 API 或无法正常运行 不受浏览器干预的影响,开发者工具会首先告知您 简介:
![关于废弃和干预的开发者工具控制台警告。](https://developer.chrome.google.cn/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=5&hl=lv)
用户很自然地会认为 window.onerror
捕获了这些警告。事实并非如此!
这是因为 window.onerror
没有针对警告触发
由用户代理本身直接生成此事件针对运行时错误触发
(JS 异常和语法错误)。
ReportingObserver
选择 Slack。它提供了一种程序化方式
与浏览器发出的警告(例如弃用)有关的通知
和干预措施。您可以将其用作报告工具
睡眠时间减少,想知道用户在你的直播中是否遇到了意外问题
网站。
API
该 API 与其他“观察者”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();
过滤后的报告
您可以对报告进行预先过滤,以便仅观察某些报告类型:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
缓冲报告
buffered: true
选项非常有助于您
创建观察者之前生成的报告:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
这非常适合延迟加载使用
一个 ReportingObserver
。观察器添加得较晚,
不会错过网页加载早期发生的任何事件。
停止观察
有!它有一个 disconnect
方法:
observer.disconnect(); // Stop the observer from collecting reports.
示例
示例 - 向分析服务提供商报告浏览器干预情况:
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
用于捕获 JS 中各种类型的问题。想象一下,一个 API 可以捕获所有内容
出现的问题:
- 浏览器干预
- 弃用
- 违反功能政策。请访问 crbug.com/867471。
- JS 异常和错误(目前由
window.onerror
提供服务)。 - 未处理的 JS promise 拒绝(目前由
window.onunhandledrejection
处理)
我也很期待看到将 ReportingObserver
集成到
工作流程Lighthouse 是一个工具示例
已标记浏览器弃用情况
“避免使用已弃用的 API”审核:
![Lighthouse 审查是否使用了已废弃的 API,可以使用 ReportingObserver。](https://developer.chrome.google.cn/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=5&hl=lv)
Lighthouse 目前使用 DevTools 协议
以爬取控制台消息并向开发者报告这些问题。相反,
不妨切换到 ReportingObserver
提供结构合理的弃用报告以及额外的元数据,例如
anticipatedRemoval
日期。
其他资源: