1. Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5

2. Errors in web applications  Web application “crash” 2 document.getElementById(tableName).rows;

3. Errors in web applications  Exceptions thrown by development tools 3

4. Errors in web applications  Functionality errors 4 From github.com/hadsontable Issues#1910 Expected dragging down Buggy dragging down

5. Web debugging tools  Debugging and testing JavaScript programs Record replay Mugshot[1], Jalangi[2] 5 ~~~~ Trace ~~~~ Record Replay [1] Mugshot : Deterministic Capture and Replay for JavaScript Applications (OSDI 2010) [2] Jalangi: a selective record-replay and dynamic analysis framework for JavaScript (Esec/Fse13)

6. Motivation  A real-world bug example 1. click 2. input a white space 3. click

7. Motivation  However, the error can be triggered by a long execution 7 … Error-related events are interleaved with irrelevant ones input a white space

8. Goal Reproducibility High reduction rate 8 Record Reduce ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ ~~~ Replay

9.  Dynamic slicing Basic idea 9 e 1 : click … e 2 : mousemove … e 3 : mouseover … e 4 : mouseover … e 5 : keydown … e 6 : keypress … e 7 : keyup …... e n : click… Slicing criteria: error-related assertions; e 1 : click … e 2 : mousemove … e 4 : mouseover … e 6 : keypress … e n : click… Error-related events

10.  Source code of TODOList Challenges 10 e1. Clicking add button e2. Clicking save button div id:title id:save click:onSave

11. e2. Clicking save button  Missing dependencies without knowing the DOM semantics Challenge 1 11 e1. Clicking add button div id:title id:save click:onSave

12. e2. Clicking save button  Missing dependencies without fine-grained DOM dependency model. E.g. line 8 depends on line 3 Challenge 2 12 e1. Clicking add button Reading node title div id:title id:save Modifying the subtree

13. e2. Clicking save button div titlesave popup  Dynamic feature and event-driven feature onAdd happends before onSave Challenge 3 13 e1. Clicking add button The click event handler onSave is registered during onAdd click:onSave

14. Overview-Slicing based analysis 14 ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ Replay JavaScript analysis DOM analysis Building Event Dependency Graph Event slicing JS+DOM analysis Original event trace ~~~~ ~~~~ ~~~~ Error-related event trace

15.  Def-Use relation: The use of a variable depends on its last definition 15 1.n:= 2; 2.x:= ( x mod n ) + 1; 3.… 4.… 5.foo (x) Source code Error-related variable JavaScript dependency analysis

16. e2. Clicking save button  Example TODOList 16 e1. Clicking add button JavaScript dependency analysis However, the DOM dependencies are missing! Line 8 doesn’t use any variables modified by line 3 Missing DOM dependencies

17. e2. Clicking save button div title save 17 e1. Clicking add button DOM dependency analysis DOM dependencies Observation: Accessing DOM node depends on the last modifications to its related nodes  Example TODOList

18.  Case 1. Accessing a node Modifications to itself Modifications to its ancestor nodes 18 div input 1. Add node div 2. Add node input 3. read node input Accessing DOM node depends on the last modifications to its related nodes itself ancestor

19.  Case 2. Accessing an attribute Modification to that attribute Dependencies on its belonging node (obtained by case 1) 19 div titlesave 1. Add node div 2. Modify attribute value of node title 3. Read attribute value of node title value:” ” Accessing DOM node depends on the last modifications to its tree structure ancestor attribute

20.  Case 3. Accessing the subtree Modifications to all the nodes of the subtree Dependencies to its belonging node (obtained by case 1) 20 Accessing DOM node depends on the last modifications to its related nodes div inputsave 1. Add node div 2. Modify node input 3. Read subtree of node div ancestor Nodes of the subtree

21.  Use JS dependency analysis and DOM dependency analysis to collect data dependencies 21 2 5 6 8 4 7 1 3 JS dependency DOM dependency variable e1 e2 Event dependency Event Dependency Graph (EDG) Definition: e i depends on e j if e j uses variables defined or modified by e i

22.  Calculate key events through EDG.  E.g. eventSlice(e6) = {e2,e3,e4,e5,e6} e5 e3 e6 e4 e2 e1 Event Dependency Graph (EDG)

23. Evaluation  RQ1: Can the reduced event trace reproduce the error faithfully? (reproducibility)  RQ2: Can our approach remove the irrelevant errors effectively? (efficiency) 23

24. Evaluation  Subjects: open-source projects from Github  We selected 10 bugs. Reproducible 24 AppsDescriptionJS sizePopularity Chart.jsbasic charts105K14803 HandsontableExcel-like data grid editor4.7M4989 TodoListOffline calendar312K19 JPushMenuA menu library1.5M134 FullPage To create full screen scrolling websites 882K9518 Editor.mdA markdown editor257K530 My-mindOnline mindmapping software223K1449 Various web applications

25. RQ1:Reproducibility  All the errors can be reproduced ( JS+DOM ) 25 BugIdJSJS+ DOM 1 2 3 4 5 6 7 8 9 10

26. RQ2: Efficiency 26  Average reduction rate : 96% BugIdAllCoarse DOMJS+DOMExpectedRate(%) 11139 342 74694% 21168 757 139688.6% 3403 344 29594% 4694 388 28396.4% 5606 67 34695% 6342 6 22100% 71410 53 24398.5% 8398 39 30393.2% 91023 97 9299.3% 101454 40 8699.9%

27. Conclusion 27 Replay Javascript analysis DOM analysis JS+DOM … ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~ ~~~~

28. Questions? Thank you!