Can I use the browser Navigation Timing API for Ajax events in single page apps? If not, what's a good tool?

Question

We\'ve got a single page app built with Knockout and Backbone which makes Ajax calls to the server and does some complex data caching and DOM rendering. We\'re really like t

Answer 1

There are two ways to do it

1. Resource Timing API
2. Wrapping XMLHTTPRequest

Lets see the differences between them.

1. Resource Timing API

Browsers add supports for Resource Timing API recently. Resource Timing API basically has timing information about each and every resources loaded from app. It may be css, javascript or AJAX requests. You can get list of resources details as

  performance.getEntriesByType('resource');

It will return array of object where you can find AJAX requests by initiatorType which is equal to xmlhttprequest. But there are some limitation.

1. By default, maximum resource size is 150. Above array only have maximum of 150 resources. If you want more, you can increase buffer size as performance.setResourceTimingBufferSize(500).
2. You will not get information about whether the AJAX requests is succeed or failed.

2. Wrapping XMLHTTPRequest

If you can wrap your XMLHTTPRequest API, you will get all information that you need from timing, status code and byte size. But you have to write lot of code and ofcourse test, test and test.

[Disclaimer] I work for atatus.com where we help you to measure page load time, AJAX timing and custom transaction. Also you can see session traces about how each and every resources perform.