automated client-side monitoring for web applications
DESCRIPTION
Shauvik Roy Choudhary , Alex Orso Georgia Institute of Tech nology. Automated Client-Side Monitoring for Web Applications. Motivation. Paradigm shift from Web 1.0 to Web 2.0 Heavy client-side scripts From synchronous to asynchronous Multitude of client-side environments - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/1.jpg)
Automated Client-Side Monitoring for Web Applications
Shauvik Roy Choudhary, Alex OrsoGeorgia Institute of Technology
![Page 2: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/2.jpg)
Motivation
Paradigm shift from Web 1.0 to Web 2.0 Heavy client-side scripts From synchronous to asynchronous Multitude of client-side environments
New problems for testing
2Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 3: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/3.jpg)
Heavy client side scripts
More and more logic pushed to the browser (Javascript, Flash, Silverlight, …)
Little/no information on the server about client-side execution
3Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 4: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/4.jpg)
From synchronous to asynchronous
Concurrency
Non-determinism
Additional complexity of testing environment
4Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 5: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/5.jpg)
Multitude of client-side environments Browsers Browser
Extensions
5
X
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 6: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/6.jpg)
An Example Client Side Configuration
6
http://www.site.comURL:
Local Database
Extensions
Cookies
Page A
File Upload
Page B
Display Stats
Cookies
setCookie(“status”, “uploaded”)
Cookie used to track upload status
If (!getCookie(“status”)) { setCookie(“status”, “display”) reloadPage();}
Cookie used to check if stats should be displayed
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
Developer/Tester needs client-side insight for
errors that might occur only in a particular
context
![Page 7: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/7.jpg)
A normal web application scenario
7
HTTP request
HTTP response
index.html
Internet
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 8: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/8.jpg)
Our monitoring technique
8
HTTP request
HTTP response
index.html
JS Agent
index.html
HTTP response
InternetJS
Agent
Injection policy
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 9: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/9.jpg)
Command and Control
9
JS Agent
HTTP request
Web Application Data
Command request
Monitoring Data Commands
Command response
Monitoring Data
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 10: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/10.jpg)
What can commands do?
Query HTML DOM node (web page elements) Javascript objects, variables, arrays
Notify – Interact with user Display a message (HTML alert or layered dialog)
Update Add/Change a node in the HTML DOM Add more Javascript to page or change existing code
…10Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 11: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/11.jpg)
Sample Command
1. <commands>2. <cmd>3. <id>8de9</id>4. <name>ALERT</name>5. <param>Hello World!</param>6. </cmd>7. <cmd>8. <id>3bsd</id>9. <name>DUMP</name>10. <param>myObj</param>11. <param>myArray</param>12. </cmd>13. </commands>
11Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 12: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/12.jpg)
Sample Command
1. <commands>2. <cmd>3. <id>8de9</id>4. <name>ALERT</name>5. <param>Hello World!</param>6. </cmd>7. <cmd>8. <id>3bsd</id>9. <name>DUMP</name>10. <param>myObj</param>11. <param>myArray</param>12. </cmd>13. </commands>
12
Id:8de9
Alert(Hello
World !)
Id:3bsd
Dump(myObj)Dump(myArra
y)
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 13: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/13.jpg)
Sample Response
1. <responses>2. <resp>3. <id>8de9</id>4. <status>1</status>5. </resp>6. <resp>7. <id>3bsd</id>8. <message>myObj={ "aString":"Howdy",
"anInteger":10,"aBoolean":true
}</message>9. <message>myArray=[1,"foo","web"]</message>10. </resp>11. </responses>
13Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 14: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/14.jpg)
Sample Response
1. <responses>2. <resp>3. <id>8de9</id>4. <status>1</status>5. </resp>6. <resp>7. <id>3bsd</id>8. <message>myObj={ "aString":"Howdy",
"anInteger":10,"aBoolean":true
}</message>9. <message>myArray=[1,"foo","web"]</message>10. </resp>11. </responses>
14Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 15: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/15.jpg)
Sample Response
1. <responses>2. <resp>3. <id>8de9</id>4. <status>1</status>5. </resp>6. <resp>7. <id>3bsd</id>8. <message>myObj={ "aString":"Howdy",
"anInteger":10,"aBoolean":true
}</message>9. <message>myArray=[1,"foo","web"]</message>10. </resp>11. </responses>
15
<script type="text/javascript"> myObj=new Object(); myObj.aString=“Howdy"; myObj.anInteger=10; myObj.aBoolean=true;</script>
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 16: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/16.jpg)
Sample Response
1. <responses>2. <resp>3. <id>8de9</id>4. <status>1</status>5. </resp>6. <resp>7. <id>3bsd</id>8. <message>myObj={ "aString":"Howdy",
"anInteger":10,"aBoolean":true
}</message>9. <message>myArray=[1,"foo","web"]</message>10. </resp>11. </responses>
16
<script type="text/javascript"> myArray=new Array(); myArray[0]=1; myArray[1]=“foo”; myArray[2]=“web”; </script>
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 17: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/17.jpg)
Preliminary evaluation
Goal: Measure agent-injection overhead and JS agent performance
Subjects: 10 applications – sample code, open source projects and commercial websites
17
echo framework
GoogleWeb Toolkit
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 18: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/18.jpg)
Experimental protocol
JSA injection overhead
JSA performance
18
http://www.site.comURL:
Iterate window
object and count
number of visited
elementsShauvik Roy Choudhary, Alex Orso | Georgia Tech
JS Agent
index.html
Main page
Measure time to
Inject the main page
![Page 19: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/19.jpg)
0
50000
100000
150000
Results
JSA injection overhead
JSA performance
19
Application # Objects
Time (ms)
Mail 1286 9
Showcase 4490 30
Chat Client 147 2
Number Guess
144 3
Interactive Test
147 2
Drupal 118 1
Joomla 229 3
Wordpress 176 3
iGoogle 618 6
Amazon.com
314 4
0.1 and 8 milliseconds per page window object iterated in 3-4 ms
Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 20: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/20.jpg)
Application Scenarios
Error Detection and Debugging Logging and Recovery
Metrics Collection Code Coverage Click-streams / User Activity Browser Statistics
Memory Profiling Count variables, arrays, objects
Security checks20Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 21: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/21.jpg)
Summary and future work Summary
General technique for remote monitoring of web applications
Proof-of-concept evaluation Example applications
Future work Complete implementation Investigate applications Additional experimentation
21Shauvik Roy Choudhary, Alex Orso | Georgia Tech
![Page 22: Automated Client-Side Monitoring for Web Applications](https://reader035.vdocuments.mx/reader035/viewer/2022062801/568143b9550346895db044d4/html5/thumbnails/22.jpg)
Thank you !
Any Questions ?
[email protected]://www.cc.gatech.edu/~shauvik
22Shauvik Roy Choudhary, Alex Orso | Georgia Tech