Getting started with Reporting API, Network Error Logging & Report URI
This article briefly explains how to enable deprecation, intervention & crash reports as well as network error logging with new browser API. It is pretty much a TL;DR version of scotthelme.co.uk article and reason for writing it in a first place is for me to understand this topic better. I hope you like this short version too and once interested you will subscribe to Scott's blog :)
Reporting API, which is currently in a status of working draft, allows applications to tell browsers to report things like deprecation warnings to a specified url. Currently Reporting API supports following reporting types:
- Deprecation - reports soon to be deprecated api. For example
WebSQL is deprecated and will be removed in Chrome 97 around January 2020.
- Intervention - reports when browser blocks request due to security or performance reasons.
A request to play audio was blocked because it was not triggered by user activation (such as a click).
- Crashes - reports browser crashes & when possible provides a reason. At the time of writing this only
oomreason was supported.
In order to enable reporting api you need to set a response header like following:
For deprecation/intervention/crash report types you should use
default for group name, so we can leave it alone.
max_age tells browser to remember to send requests to specified endpoints for given time in seconds (in the example it is set to 7 days). You can specify multiple endpoints if you wish.
Network error logging
Network error logging, which is also in a status of working draft, allows to report issues with:
unreachable, name_not_resolved, ...
timed_out, refused, ...
cert.name_invalid, cert.authority_invalid, ...
response.invalid, response.redirect_loop, ...
Full list with descriptions can be found on the specification page.
In order to enable network error logging you need to set a response header like following:
As you can see there is no endpoints property.
Report-To should be specified for this header, because
NEL uses endpoints from it to report data.
Working with reports &
You could build your own dashboard which handles reports for mentioned APIs. Sample report data structure is shown on previously mentioned specification pages. However there is a free to use service called Report URI which already handles these and other type of reports. It takes 5-10 minutes to set it up and as long as it is easy for you to add headers to your site, it should be very easy to start gathering data from Reporting & Network Error Logging APIs. It took it just about 30 minutes for me to add it to my site & I encourage you to do the same.
Thanks for reading & have fun.