In the following some ideas are given in order to proceed with the work of monitoring the end user experience. The Javascript file which captures the timings on the browser's side is called JS-File.

First Steps (JS-file)

• After the publicInit Method, the most important functions are traceSynchronousRequests() and traceAllAjaxRequests() where all other functions are triggered from. 
• the second part of the script is a library for taking a screenshot which is only for debugging purposes.
• The measured data are all saved in the sessionStorage and sent back to the server
  
  

Testing

Example Apps for testing the overall behavior

• DVD-Store: There are no Ajax-Requests as the webapp is quite static. Therefore you cannot test the XMLHTTPRequest-Hook but only traced pageload timings.
• Example Applications on Tomcat (available in my Gitorious Repository): Testing opportunity with some different Apps which are built with various apps ( Vaadin, ExtJS, Spring, Wicket, etc.).

Testing of the JS-file

• The JS-file should be tested separately. This can be done either with "headless" JavaScript testing in the console (only JavaScript engine running, no UI,  for example with PhantomJS) or you can use a testing framework such as JSTestDriver or Jasmine which can test the behavior of the script on different browsers. I wrote a test case with JSTestDriver in order to test the Ajax hook. 

ToDo's:

• The hook in the inspectIT Agent for inserting the JavaScript file does not work with all Application Servers. Especially, if static content ( for example static html files) is requested, the hook does not fire at all. Here, a more generic solution must be found. However, for development and testing purposes, JBoss 6.2 or Tomcat 7 works
  • testing of configuration parameters and their dependencies
• We need  exhaustive test cases for the JS-File which are tricky to implement. I would suggest to check the sessionStorage for correct results after simulating different user interactions.
• The function getDomPath does not always deliver correct results.
• A big problem is the Correlation ID: How to map the server ID with the user-action ID ?:
  • Approach: Use Cookies where the current User-Action ID is stored. For every user-request (sync and async), the ID will be sent to in the Cookie-Header to the server. 
    • Setting a new header field does not work because they can only be customized in case of Ajax requests, not for synchronous requests. 
    • Does this approach work reliably ? Testing is needed...
• RessourceTiming does not seem to work anymore. Probably, Chrome API changed ?

Further Steps

The JS-File sends the gathered data back to the server. However, these data are currently only printed on the console. However, the measured data must be send from the server to the CMR where they should be displayed in the UI.