ReportingObserver API：以新的角度看待网页代码

该材料（我们今天发布的翻译版）专用于ReportingObserver API，该机制可让您了解过时功能的使用，并且浏览器会干扰页面代码的工作。 ReportingObserver是此 W3C规范的一部分。

为什么需要这个？

假设您有一个几天前启动的重要Web项目。 许多用户已经开始在他的网站上注册。 每个人都知道这样的项目，以便简单地说可以为公司带来资金，应该稳定地工作。 现在，让我们考虑一下，如果您的客户遇到错误的网站行为，其原因是某种错误，而您对此一无所知，该怎么办。 他不会纠正开发人员不知道的错误，错误会一次又一次地显现出来，最终最终会对项目的业务目标产生负面影响。

网站访问者很可能对Web开发一无所知，因此，当网站开始表现异常时，他不太可能查看控制台以尝试理解问题，该信息表示为以[Intervention]或[Deprecation] 。

实际上，站点访问者不应该在意错误。 他们需要的只是稳定性，便利性和可预测性。 错误是开发人员的问题， ReportingObserver API专门用于帮助开发人员解决此问题。 使用ReportingObserver可以将有关过时API的使用或有关对浏览器页面的干扰的报告发送给开发人员。 其他错误处理工具无法响应此类问题。

使用ReportingObserver如下所示：

 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 API结构

浏览器具有旨在捕获错误的API。 例如， window.onerror 。 但是， window.onerror不能绝对跟踪页面操作期间出现的所有问题情况。 例如，此工具可帮助您了解由JavaScript异常或代码中的语法错误引起的运行时错误。 但是，如果您收到有关使用过时功能或浏览器干预的通知，则window.onerror将不会响应此类通知。 在这种情况下， ReportingObserver将派上用场。

为了使用ReportingObserver API，您需要通过为其提供回调来创建相应的观察者对象，当调用该对象时，报告将以页面上遇到的问题列表的形式发送给它。 我们已经审查了使用ReportingObserver所需的代码。 现在，让我们看一下将什么数据发送到回调的示例：

 const observer = new ReportingObserver((reports, observer) => { for (const report of reports) {   // → report.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'   // → report.type === 'deprecation'   // → report.url === 'https://reporting-observer-api-demo.glitch.me'   // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...' } }}); observer.observe(); 

使用ReportingObserver可以过滤报告。 例如，以下设计允许您仅接收有关过时功能使用的报告：

 const observer = new ReportingObserver((reports, observer) => { ... }, {types: ['deprecation']}); 

如果在创建ReportingObserver对象时，将buffered: true属性传递给它，则可以查看在创建此类对象之前生成的报告：

 const observer = new ReportingObserver((reports, observer) => { ... }, {types: ['intervention'], buffered: true}); 

为了停止监视有关过时功能的使用或有关代码中浏览器干预的报告，可以禁用观察者对象：

 observer.disconnect(); 

ReportingObserver API示例

这是使用ReportingObserver观察器对象的示例。 这是向服务器发送报告的组织图：

 const report = new ReportingObserver((reports, observer) => {  for (const report of reports) {     const stringifiedReport = JSON.stringify(report.body);     //        sendReport(stringifiedReport); } }, { types: ['deprecation'], buffered: true }); 

总结

通过ReportingObserver API，开发人员可以扩展他所收到的有关真实用户与他们一起工作时项目中发生的错误的信息。 此API在Chrome 69中可用，有关此功能将在Edge中显示的信息。 是否计划在Firefox或Safari中实现类似功能仍然未知。

有关ReportingObserver详细信息可以在此处和此处找到。

亲爱的读者们！ 您如何看待ReportingObserver API？