Introduction to Reporting API

There are many errors that can prevent your users from enjoying the best experiences on your website. CORS errors, deprecations, browser interventions, network errors are just some of the errors that your users may encounter. 

With the reporting API, your browser will now send details of errors or warning directly to your server so that you can get notified and know exactly what errors your users are facing.

Support

The reporting API is still very new with very few browsers supporting it. On chrome, you need to enable the below run time command line flag to use the API.

--enable-features=Reporting

Usage

To use the reporting API, you need to add the Report-To header, which can contain one or more objects which describes an endpoint group for the browser to report errors to

The basic format of the header is as follows

Report-To: {
    "group": "default",
    "max_age": 10000000,
    "include_subdomains": true,
    "endpoints": [{
       "url": "https://yoursite.com/errors-reports"
    }]
}

The group attribute specifies a name to be given to the type of report, its default value is “default”

The max_age attribute is used to define the lifetime to report errors to the endpoint

The include_subdomains attribute is used to specify whether data from the subdomains must be sent to the endpoint or not

The endpoints attribute is an array of urls which are the actual urls that data will be sent to when your user encounters an error or warning. The browser will send data to only one endpoint, so the array can include fallback urls in case your main url is offline.

The reporting API will send the data to your server endpoint in a post message with the following format

POST /error_url 
HTTP/1.1
Host: yoursite.com
Content-Type: content_type
[{  
    "type": "error_type",  
    "age": 10,  
    "url": "url_of_page_where_error_occurred",  
    "user_agent": "
       Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like ....",  
    "body": {    "blocked": "blocked_url",    
             "directive": "script-src",    
             "policy": "script-src 'self'; 
             object-src 'none'",    
             "status": 200,    
             "referrer": "https://evil.com/"  
    }
}, } 
 ...}]

You can find more information about the reporting API here.