It is a true fact that performance experienced by real world users has direct impact on our application adoption rate.Good performance increases retention and conversion rates. Our primary aim should be to deliver value to an user, and make sure that they get the best possible user experience that delights them, and keeps them coming back for more. In this regard, monitoring user behaviour becomes imperative as it provides key metrics for web application performance. While developing web applications, developers test in their local environments, and also do user acceptance testing. But what happens once the application goes out onto the real world? The case I’m making here talks about analysing application performance once its in the hands of real users. This is where real user monitoring a.k.a R.U.M comes in picture. R.U.M captures performance metrics such as bandwidth and page/view load times, user location, device type, carrier speed, application errors, Ajax request and application usage along with custom performance metrics that provides actionable business intelligence. In R.U.M, we can then visualize performance over time for key metrics based on different average, geometric mean, median or percentile calculations. The performance data can be drilled down further on the basis of geography, device, error encountered, speed etc.

1. Home
Brewing
R.U.M
Image source: http://en.wikipedia.org/wiki/Samuel_Adams_%28beer%29#mediaviewer/File:Samadams.jpg

2. Making
developers
happy since eternity
Image source: http://en.wikipedia.org/wiki/List_of_rum_producers#mediaviewer/File:Rum_display_in_liquor_store.jpg

3. Real
User
Monitoring
What is
Image source: https://www.flickr.com/photos/madmask/421679860/in/gallery-zrav-72157623823227993/

4. Real User Monitoring
It is a technology for collecting performance
metrics directly from the browser of an end
user and sending it to a collection point for
analysis.

5. Image source: http://blog-assets.newrelic.com/wp-content/uploads/Sam-image-1.png

6. Real
User
Monitoring
Why
Image source: https://www.flickr.com/photos/tonythemisfit/3293309513

7. There’s
Money
in the metrics
Image source: https://www.flickr.com/photos/epsos/8463683689

8. Expectations
Image source: https://www.flickr.com/photos/frosch50/13026387874

9. Performance
is
differentiator
Image source: https://www.flickr.com/photos/johnnieb/2289615538

10. Real
User
Monitoring
How
Image source: https://www.flickr.com/photos/pennuja/5386712834

11. Visualization
Core Module
Error Page
Load
Ajax
Call
Custom
Analytic Engine
Back End
Front End

12. Page
Load
performance
Image source: https://www.flickr.com/photos/telexa/2436798809

13. Measuring Page Load Performance
1. Request (Link clicked)
2. Request reaches server
3. Server finishes execution
4. Browser Receives HTML
5. HTML processing finished
6. Page Rendered
Network Server DOM Processing Page Rendering

14. Cookies
Image source: https://www.flickr.com/photos/seriousbri/4020277369

15. Cookies
Network = Time between beforeunload event and first byte received.
DOM Processing
Page Rendering
= Time between first byte received & DOMContentLoaded event.
= Time between DOMContentLoaded event & load event.

16. Performance
timing Api
Image source: https://www.flickr.com/photos/eflon/5079163335

17. window.performance.timing
redirect
App
Cache
Prompt
for
unload
DNS TCP Request Response Processing onLoad
unload

18. AJAX
Call
performance
Image source: https://www.flickr.com/photos/respres/2544979655

19. AJAX call performance
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","remoteResource.txt",true);
xmlhttp.send();

20. Measuring AJAX Call Performance
0 1 2 3 4
Unsent Opened Headers
Received
Loading Done
Ready State value
Time to first byte = Time between when send method is called and
when first time ready state value is 3 (Loading)
Downloading Time = Time between first time ready state value is 3
(Loading) and when it is 4 (Done)

21. Monkey Patching
Image source: https://www.flickr.com/photos/epsos/8463683689

22. Monkey Patching XMLHttpRequest
_XMLHttpRequest = window.XMLHttpRequest;
// Monkey Patched XMLHttpRequest Version
window.XMLHttpRequest = function() {
var req = new _XMLHttpRequest;
// Monkey Patched version of open() and send() methods
return req;
};

23. Monkey Patching XMLHttpRequest
_open = req.open;
req.open = function(type, url, async) {
req.addEventListener('readystatechange', function() {
// Log timing for every state change
}, false);
req.addEventListener('loadend', function(event) {
// Send all timing data to remote server
}, false);
return _open.apply(req, arguments);
};

24. Monkey Patching XMLHttpRequest
_send = req.send;
req.send = function() {
// Log timing when send is called
return _send.apply(req, arguments);
}

25. Performance
getEntriesByType
Api
Image source: https://www.flickr.com/photos/ericflexyourhead/14083106147

26. HTML5 Performance Api
window.performance.getEntriesByType('resource')
Redirect
App
Cache
DNS TCP Request Response

27. Error
handling
Image source: http://en.wikipedia.org/wiki/Coccinellidae#mediaviewer/File:Coccinella_magnifica01.jpg

28. window.onError
Error Message
Line Number
File Name
Stack trace
Char number
Work for cross origin scripts

29. try catch block
Error Message
Line Number
File Name
Stack trace
Char number
Work for cross origin scripts

30. Wrapper for Reporting Error
function wrapper(fn) {
return function() {
try{
return fn.apply(this,arguments);
}catch(e) {
repportError(e);
throw e;
}
};
}

31. Wrapper for Reporting Error
var wrappedFunction = wrapper(function(){
// function definition
});

32. Challenges
in error tracking
Image source: https://www.flickr.com/photos/chrismatos/6784152671

33. Challenges in Error Tracking
● Different browsers provide different stack trace information.
● Steps to reproduce Error.
● Need to manually wrap each function.

34. Challenges in Error Tracking
Different browser provides different stack trace information.
Tracekit.js / Stacktrace.js are well tested libraries which abstract
this.

35. Challenges in Error Tracking
Steps to reproduce error.
Capture last X events in array like Input or click event and report
them back along with error information.

36. Challenges in Error Tracking
document.querySelector('input').addEventListener('change',
function(e){
// Adding it to the event array
});

37. Challenges in Error Tracking
Need to manually wrap each function.
Using instrumentation at build time or script serving time it can be
automated.

38. Instrumenting
JavaScript
Image source: http://combathelo.blogspot.in/2010/05/multi-page-displays-wep-gun-submode.html

39. JavaScript Engine Building Blocks
Parser
Runtime
Syntax Tree
Source Code VM

40. Abstract Syntax Tree
Number
var a = 1 ;
Equal Sign
Identifier
Keyword
Variable
Declaration
Identifier
Literal
Constant

41. Instrumentation
Esprima
(Parser)
Instrumentor
Escodegen
(Generator)
JavaScript
code
Transformed
JavaScript AST
Transformed
code
JavaScript
AST

42. Instrumentation
Welcome Falafel library

43. Analysis
&
Visualization
Image source: http://monster-solutions.net/2014/07/03/elk-stack-logging-solutions-now-available/

44. Analysis & Visualization
● Elastic Search
● Log Stash
● Kibana

45. Other
use cases
of R.U.M
Image source: http://monster-solutions.net/2014/07/03/elk-stack-logging-solutions-now-available/

46. Image source: https://www.flickr.com/photos/opensourceway/5556249000

47. Feedback: http://bit.ly/jsfoo-rum-feedback
Slides: http://bit.ly/jsfoo-rum-slides
@ankit0rastogi
Image source: https://www.flickr.com/photos/theilluminated/5386099858