Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences

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

Errors in web applications  Exceptions thrown by development tools 3

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

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)

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

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

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

 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

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

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

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

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

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

 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

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

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

 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

 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

 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

 Use JS dependency analysis and DOM dependency analysis to collect data dependencies 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

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

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

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

RQ1:Reproducibility  All the errors can be reproduced ( JS+DOM ) 25 BugIdJSJS+ DOM

RQ2: Efficiency 26  Average reduction rate : 96% BugIdAllCoarse DOMJS+DOMExpectedRate(%) % % % % % % % % % %

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

Questions? Thank you!