ReportingObserver API: New look at your code
A new ReportingObserver API is going to help you with deprecated API on your website and also with letting you know when your code runs into a browser intervention.
The ReportingObserver is a part of larger specification: Reporting API
1. What is the actual purpose?
Can you imagine having an important project that went live a couple of days ago and many customers started registering on your new website and the truth is that newly created project has to be stable to keep your financial side of the business flowing. Now, let’s get to the point where your customers are encountering unexpected behaviour of the website because of random errors and you don’t know about that. That’s why we’ve got ReportingObserver API – it allows us to send its report to the backend side where we can see what is happening on our website at the moment, which is really important if we’re having a significant project running live.
The person who visits your product’s website might not be a developer and don’t know what is going on while its encountering unexpected errors. All of the issues will be shown in the console as a console log but if you implement the following API, the things will start working differently.
ReportingObserver code sample:
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
}, { buffered: true });
observer.observe();
2. The main structure of API
We do have other APIs that catches errors like for example, window.onerror. The thing is that window.onerror will not fire warnings for everything! The following API will fire runtime errors like JS exceptions and syntax errors caused by executed code. By using ReportingObserver you have a freedom to customize notifications related to depreciation and interventions’ warnings.
The API is not functioning like a normal ‘observer’. Firstly you need to provide a callback and then you will receive a report as an information. The callback receives an information which is a list of issues that were caused on the page.
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();
You’re getting a couple of nice features to use:
1. Filtered reports
You can filter your reports to observe only to the specific type.
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
2. Buffered reports
If you set a buffered property to true, you’re going to be able to see reports generated before the observer was created.
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
3. Disconnect
If you’d like to stop observing to the reports, you can just disconnect the observer and that’s it!
observer.disconnect();
3. Example usage of the API
Below code is going to present an example usage of the following API. The example shows how you can send the report to your backend server.
const report = new ReportingObserver((reports, observer) => {
for (const report of reports) {
const stringifiedReport = JSON.stringify(report.body);
// Send to the server
receiveReport(stringifiedReport);
}
}, { types: [‘deprecation’], buffered: true });
Summary
Summarizing, ReportingObserver is going to help you to deliver deprecation and intervention warnings straightaway to your door by sending it to your backend implementation and informing you about it. An important part of it is that it will monitor your website and issues 24/7 and report it to you. Fantastic.
ReportingObserver API is going to be shipped in Chrome 69. According to Chrome Platform Status, there are no public signals from Mozilla and Safari to get it done in the near feature but surprise, surprise Edge is supporting the idea of the API and will be shipping it in some time.
To get even more informations on the newly shipped API you can open below links:
