This content originally appeared on Bits and Pieces - Medium and was authored by Bhagya Vithana
How Developers Can Fix Bugs and Improve Application Performance with the Reporting API
Today, monitoring has become an essential task for any application. Having a proper monitoring mechanism can help you detect potential issues across your website and notify you as soon as they occur.
Reporting API is one of the most used reporting mechanisms for web applications, and this article will discuss Reporting API in detail to give you a better understanding.
What is Reporting API?
Reporting API provides a uniform reporting method across your websites to report potential violations like CSP violations, deprecation warnings, and network error logging.
It provides consistent reports in the form of JavaScript objects to help developers fix bugs and improve application performance. There are 2 main methods to generate reports using Reporting API.
1. Sending reports via browser
The browser is in charge of delivering the queued reports to the pre-defined endpoint. You can then configure the endpoints you need to send reports independently.
The reports sent by the browser can be retrieved independently of the website’s current status. So, for example, even if the web application is down, we can retrieve the reports and hand them over to the developers.
Sometimes, the delivery of reports may be delayed if the browser is busy with a high-priority task or if the user is connected to a congested network at the time. In addition, if the user is a frequent visitor, the browser may prioritize sending reports to a special source first.
If you’re having trouble seeing reports on your server, go to chrome:/net-internals/#reporting. There, you can double-check everything is set up correctly and that reports are being sent out accurately.
2. Generating reports via the WebDriver
The Reporting API spec defines a Generate Test Report WebDriver extension, which allows you to simulate report generation during automation. Reports generated via WebDriver are observed by any registered ReportObserver objects present in the loaded website.
Reporting Mechanisms / Endpoints
An endpoint is a specified location, usually a URL, from which we can get reports. A single endpoint has a name (usually an ASCII text), a URL, and a non-negative integer representing the number of failed requests. Following are the 2 most used reporting mechanisms.
report-to Header
report-to is a new HTTP header introduced by Reporting API. It is used to specify information about the various endpoints for delivering reports. The reports can then be retrieved by requesting those URLs.
Most of the time, policies use different headers. Therefore, it can be difficult to get the report-to syntax just right. Depending on the policy, the correct syntax may be report-to=main-endpoint or report-to main-endpoint.
After you’ve configured the reporting endpoints header, add a report-to directive to each policy header for which you want to receive violation reports. You can use multiple endpoints for multiple policies or different endpoints for different policies.
Report-To: {
"max_age": 100,
"endpoints": [{
"url": "https://data.exmp/main"
}]Reporting Observers
The ReportingObserver is a JavaScript API that can detect and report simple client-side warnings such as deprecation and intervention.
The ReportingObserver object is created using the ReportingObserver() constructor passing out an options dictionary (allows you to specify the report category) and a callback function as parameters.
const ReportObserver = new ReportingObserver((reports, observer) => {
for (const report of reports) {
// Sending reports.
}
}, {buffered: true});
ReportObserver.observe();Reports are not delivered to a server by default (unless you specify in the callback). Therefore, the ReportingObserver cannot detect more sensitive problems, such as CSP violations and network errors.
Although ReportingObserver and the report-to header overlap, they enable significantly different use cases. Compared to ReportingObserver, the report-to header can catch more error reports (network, CSP, browser failures).
So, when you wish to automatically report errors or capture errors that would be impossible to view in JavaScript, this is the perfect solution.
What do reports look like?
The browser uses a POST request to send reports. It contains a Content-Type: application/reports+json header and the request body contains an array of errors captured.
POST
Content-Type: application/reports+json
Here’s the data you can find in reports:
Example Report
{"age": 20,"body": {"columnNumber": 12,"disposition": "enforce","lineNumber": 11,"message": "CSP VIOLATION","policyId": "csp-violation","sourceFile": "https://demo.site/script.js"},"type": "csp-violation","url": "https://demo.site/","user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"}Report Types
As discussed, Reporting API can identify different types of violations snd to generate separate reports for each violation..
1. CSP violation report
These violation reports are generated when content security policies are violated. It comprises JSON documents that are sent to the specified URI via an HTTP POST request.
This is how a sample CSP violation is defined.
<script src="script.js"></script>
<!-- CSP VIOLATION -->
<script src="https://demo.com/script.js"></script>
2. Depreciation warning report
This indicates that a WebAPI or other browser feature used on the website will be deprecated in a future release. This is indicated in Report.body property with a DeprecationReportBody return value.
3. Intervention report
This indicates that the browser denied a website request, possibly for security or user annoyance reasons. Similar to depreciation warning, this is also indicated in the Report.body property with a InterventionReportBody return value.
4. Network error logging report
The Network Error Logging (NEL) specification specifies a mechanism for collecting client-side network errors from a source. It uses the NEL HTTP response header to collect network errors. But, first, you need to define the Report-To header with a collector.
Report-To: {
...
}, {
"group": "network-errors",
"max_age": 2592000,
"endpoints": [{
"url": "https://analytics.provider.com/networkerrors"
}]
}
GET /index.html HTTP/1.1
NEL: {"report_to": "network-errors", "max_age": 2592000}Conclusion
In this article, I discussed an overview of the Reporting API reporting mechanisms and introduced different types of reports. Although it is still at early stages, it has a huge potential since it allows generating reports using the browser.
However, it’s advisable not to overuse API monitoring. You probably don’t need to keep track of every action in every API with every potential input. Instead, make sure that your API monitors serve as a safety net for spotting problems in your APIs that are most important to your API business.
I hope you have found this useful. Thank you for reading.
Build composable web applications
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favourite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.
Bring your team to Bit Cloud to host and collaborate on components together, and speed up, scale, and standardize development as a team. Try composable frontends with a Design System or Micro Frontends, or explore the composable backend with serverside components.
Learn more
- Building a Composable UI Component Library
- How We Build Micro Frontends
- How we Build a Component Design System
- How to build a composable blog
- The Composable Enterprise: A Guide
- Meet Component-Driven Content: Applicable, Composable
Introduction to Web App Reporting API was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Bhagya Vithana
Bhagya Vithana | Sciencx (2022-05-23T10:08:29+00:00) Introduction to Web App Reporting API. Retrieved from https://www.scien.cx/2022/05/23/introduction-to-web-app-reporting-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.