![Page 1: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/1.jpg)
Fast Reproducing Web Application Errors
Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei
Institute of SoftwareChinese Academy of Sciences
2015-11-5
![Page 2: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/2.jpg)
Errors in web applications Web application “crash”
2
document.getElementById(tableName).rows;
![Page 3: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/3.jpg)
Errors in web applications Exceptions thrown by development tools
3
![Page 4: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/4.jpg)
Errors in web applications Functionality errors
4From github.com/hadsontable Issues#1910
Expected dragging down
Buggy dragging down
![Page 5: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/5.jpg)
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)
![Page 6: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/6.jpg)
Motivation A real-world bug example
1. click
2. input a white space
3. click
![Page 7: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/7.jpg)
Motivation However, the error can be triggered by a long
execution
7
…
Error-related events are interleaved with irrelevant ones
input a white space
![Page 8: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/8.jpg)
Goal
Reproducibility High reduction
rate
8
Record Reduce
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~Replay
![Page 9: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/9.jpg)
Dynamic slicing
Basic idea
9
e1: click …e2: mousemove …e3: mouseover …e4: mouseover …e5: keydown …e6: keypress …e7: keyup … . . .en: click…
Slicing criteria: error-related assertions;
e1: click …e2: mousemove …e4: mouseover …e6: keypress …en: click…
Error-related events
![Page 10: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/10.jpg)
Source code of TODOList
Challenges
10
e1. Clicking add button
e2. Clicking save button
div
div div
id:title id:save
click:onSave
![Page 11: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/11.jpg)
e2. Clicking save button
Missing dependencies without knowing the DOM semantics
Challenge 1
11
e1. Clicking add button
div
div div
id:title id:save
click:onSave
![Page 12: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/12.jpg)
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
div div
id:title id:save
Modifying the subtree
![Page 13: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/13.jpg)
e2. Clicking save button
div
title save
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
![Page 14: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/14.jpg)
Overview-Slicing based analysis
14
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Replay
JavaScript analysis
DOM analysis
Building Event Dependency
Graph
Event slicing
JS+DOM analysisOriginal
event trace
~~~~~~~~~~~~Error-related event trace
![Page 15: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/15.jpg)
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
![Page 16: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/16.jpg)
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
![Page 17: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/17.jpg)
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
![Page 18: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/18.jpg)
Case 1. Accessing a node Modifications to itself Modifications to its ancestor nodes
18
div
input
1. Add node div
2. Add node input3. read node input
Accessing DOM node depends on the last modifications to its related nodes
itself
ancestor
![Page 19: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/19.jpg)
Case 2. Accessing an attribute Modification to that attribute Dependencies on its belonging node (obtained
by case 1)
19
div
title save
1. Add node div
2. Modify attribute value of node title
3. Read attribute value of node
titlevalue:” ”
Accessing DOM node depends on the last modifications to its tree structure
ancestor
attribute
![Page 20: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/20.jpg)
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
input save
1. Add node div
2. Modify node input
3. Read subtree of node div
ancestor
Nodes of the subtree
![Page 21: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/21.jpg)
Use JS dependency analysis and DOM dependency analysis to collect data dependencies
21
2
56
8
4
7
1
3
JS dependencyDOM dependency
variable
e1
e2
Event dependency
Event Dependency Graph (EDG)
Definition: ei depends on ej if ej uses variables defined or modified by ei
![Page 22: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/22.jpg)
Calculate key events through EDG. E.g. eventSlice(e6) = {e2,e3,e4,e5,e6}
e5
e3
e6
e4
e2 e1
Event Dependency Graph (EDG)
![Page 23: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/23.jpg)
Evaluation RQ1: Can the reduced event trace
reproduce the error faithfully? (reproducibility)
RQ2: Can our approach remove the irrelevant errors effectively? (efficiency)
23
![Page 24: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/24.jpg)
Evaluation Subjects: open-source projects from
Github
We selected 10 bugs. Reproducible 24
Apps DescriptionJS
sizePopularit
yChart.js basic charts 105K 14803
Handsontable Excel-like data grid editor 4.7M 4989
TodoList Offline calendar 312K 19JPushMenu A menu library 1.5M 134
FullPageTo create full screen scrolling websites 882K 9518
Editor.md A markdown editor 257K 530
My-mindOnline mindmapping
software 223K 1449
Various web applications
![Page 25: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/25.jpg)
RQ1:Reproducibility All the errors can be reproduced ( JS+DOM
)
25
BugId JS JS+ DOM
123456789
10
![Page 26: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/26.jpg)
RQ2: Efficiency
26
Average reduction rate : 96%
BugId All Coarse
DOMJS+DOM
Expected
Rate(%)
1 1139 342 74 6 94%2 1168 757 139 6 88.6%3 403 344 29 5 94%4 694 388 28 3 96.4%5 606 67 34 6 95%6 342 6 2 2 100%7 1410 53 24 3 98.5%8 398 39 30 3 93.2%9 1023 97 9 2 99.3%
10 1454 40 8 6 99.9%
![Page 27: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/27.jpg)
Conclusion
27
Replay
Javascript analysis
DOM analysis
JS+DOM
…
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
![Page 28: Fast Reproducing Web Application Errors Jie Wang, Wensheng Dou, Chushu Gao, Jun Wei Institute of Software Chinese Academy of Sciences 2015-11-5](https://reader036.vdocuments.us/reader036/viewer/2022062423/5697bfc11a28abf838ca48c5/html5/thumbnails/28.jpg)
Questions?
Thank you!