要点
镇里来了个新观察员!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 用于监控 Web 应用中发生的“事物”,这让我很有意思。例如,有 API 可以观察有关 DOM 的信息:ResizeObserver
、IntersectionObserver
、MutationObserver
。以下 API 可用于捕获性能测量值:PerformanceObserver
。window.onerror
和 window.onunhandledrejection
等其他 API 甚至会在出现问题时通知我们。
不过,还有一些现有 API 无法捕获的其他类型的警告。当您的网站使用已弃用的 API 或遭到浏览器干预时,开发者工具会首先通知您:
用户很自然地会认为 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
成为真正用于在 JS 中捕获所有类型问题的 API。假设有一个 API 可以捕获您应用中所有出错的地方:
- 浏览器干预
- 弃用
- 违反功能政策。请访问 crbug.com/867471。
- JS 异常和错误(目前由
window.onerror
提供服务)。 - 未处理的 JS promise 拒绝(目前由
window.onunhandledrejection
处理)
我也很期待看到将 ReportingObserver
集成到其工作流中的工具。Lighthouse 是一个工具示例,该工具会在您运行其“避免已弃用的 API”审核时标记浏览器弃用情况:
Lighthouse 目前使用 DevTools 协议抓取控制台消息并向开发者报告这些问题。不过,改用 ReportingObserver
以获取结构合理的弃用报告以及 anticipatedRemoval
日期等其他元数据可能会很有趣。
其他资源: