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.

An Introduction to WebWorkers

JavaScript is single threaded, all your code runs on the main thread. Now if you run some CPU intensive task like compressing a large file, the browser will become unresponsive while it performs the task. To overcome this, we use WebWorkers.

WebWorkers are external JavaScript files that run in a separate thread, so that you main thread can remain free to process user input.

Continue reading An Introduction to WebWorkers

Introduction to IndexedDB

Relational Databases like MySQL are great for storing , updating and reading data. Though they come with two disadvantages. 

  • Since the databases reside on the server, fetching and updating data depends on the quality of the user’s internet connection. If the user has slow internet, it will take much longer to data to be fetched and updated.
  • Also when the user loses connectivity, there is no way to connect to the database until the connection is restored

IndexedDB is a JavaScript-based object-oriented database which runs client-side on your browser, so it works in bad networks or when the user is offline. IndexedDB stores data as key value pairs, key can be any string, value can be any object. IndexedDB also indexes  data stored so that you can perform high performance searches on the data. IndexedDB also supports transactions

Continue reading Introduction to IndexedDB

An introduction to ES6

ES6 also know as ECMAScript 2015 and JavaScript 6 is the 6th major release of the ECMAScript language specification.

ECMAScript is a Standard for scripting languages and JavaScript is the most popular implementation of the ECMAScript Standard. ES6 introduces some new features which makes programming in JavaScript better.

Continue reading An introduction to ES6