API ReportingObserver: a look at the code of web pages from a new point of view

The material, which we publish today, is devoted to the API ReportingObserver , a mechanism that allows you to learn about the use of outdated features, and that the browser is interfering with the work of the page code. ReportingObserver is part of this W3C specification.

Why do you need it?

Suppose you have an important web project running a couple of days ago. Users, in the set, have already begun to register on its website. Everyone knows that such projects, in order for them, to put it simply, to bring money to companies, must work stably. Now let's think about what happens if your client encounters the wrong behavior of the site, caused by some errors, and you know nothing about it. An error that the developer does not know about, he will not correct, it will appear again and again, and this, ultimately, will negatively affect the business goals of the project.

The site visitor may well not know anything about web development, so when the site starts to behave strangely, it is unlikely to look into the console in order to try to understand the problem, which is expressed as a message starting with [Intervention] or [Deprecation] .
')
Strictly speaking, site visitors should not care about errors. All they need is stability, convenience and predictability. Bugs are a problem for developers, and the API ReportingObserver exists precisely to help developers deal with this problem. Using ReportingObserver you can send reports to the developer on the use of outdated APIs or on interventions in the operation of the browser page. Other error handling tools do not respond to such things.

This is how the work with ReportingObserver looks like:

 const observer = new ReportingObserver((reports, observer) => { for (const report of reports) {   console.log(report.type, report.url, report.body); } }, { buffered: true }); observer.observe(); 

Talk about how to use this API.

API structure ReportingObserver

In browsers, there are APIs designed to catch errors. For example - window.onerror . However, window.onerror does not track absolutely all problem situations that arise during the operation of the page. For example, this tool helps to know about runtime errors caused by javascript exceptions or syntax errors present in the code. However, if you receive a notification about the use of an outdated feature or browser intervention, window.onerror will not respond to such a notification. It is in this situation that ReportingObserver comes in handy.

In order to use the ReportingObserver API, you need to create an appropriate observer object, providing it with a callback, when you call it, it will be sent, in the form of a list, reports on problems encountered on the page. Above, we have already considered the code needed to work with ReportingObserver . Now let's take a look at an example of what data goes into a callback:

 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(); 

When working with ReportingObserver you can filter reports. For example, here is a design that allows you to receive only reports on the use of obsolete features:

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

If, when creating a ReportingObserver object, you pass the buffered: true property to it, it will give you the opportunity to see the reports generated before creating such an object:

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

To stop monitoring reports on the use of obsolete features or on browser interventions in the code, you can disable the observer object:

 observer.disconnect(); 

An example of using the API ReportingObserver

Here is an example of using the Observer ReportingObserver . Here is a diagram of the organization of sending the report to the server:

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

Results

The ReportingObserver API allows the developer to expand the range of information he receives about errors that occur in his projects when working with real users. This API is available in Chrome 69, there is information that this feature will appear in the Edge. It is not yet known whether it is planned to implement something similar in Firefox or Safari.

Details about ReportingObserver can be found here and here .

Dear readers! What are your thoughts on the ReportingObserver API?