Practical AJAX Race Detection For JavaScript Web Applications - PowerPoint PPT Presentation

Practical AJAX Race Detection For JavaScript Web Applications Christoffer Quist Adamsen, Anders Møller, Saba Alimadadi, Frank Tip saba@northeastern.edu

J ava S cript 69.8 323,938 222,852 45.3 JS Java JS Java popularity % active repositories

simplified and modified example from chevronwithtechron.com function addRemoveFilter ( fId ) { filters = toggleFilter( fId ); url = createUrl(server, filters ); $. ajax ({ url: url , success: updateStationData click click }); } Car Wash Diesel client server request car wash response car wash request car wash, diesel response car wash, diesel

simplified and modified example from chevronwithtechron.com function addRemoveFilter ( fId ) { filters = toggleFilter( fId ); url = createUrl(server, filters ); $. ajax ({ url: url , success: updateStationData click click }); } Car Wash Diesel client server client server request request car wash car wash request response car wash car wash, diesel response request car wash car wash, diesel response response car wash, diesel car wash, diesel

simplified and modified example from chevronwithtechron.com function addRemoveFilter ( fId ) { filters = toggleFilter( fId ); url = createUrl(server, filters ); $. ajax ({ url: url , success: updateStationData click click }); } Car Wash Diesel client server client server client server request request request car wash car wash car wash request request response car wash car wash, diesel car wash, diesel response response request car wash car wash, diesel car wash, diesel response response response car wash, diesel car wash, diesel car wash

Event Races

Event Races Zheng et al., 2011 Petrov et al., 2012 Raychev et al., 2013 Hong et al., 2014 Jensen et al., 2015 Mutlu et al., 2015 Wang et al., 2016 Zhang & Wang, 2017 Adamsen et al., 2017a, 2017b

detecting harmful races reducing benign warnings providing helpful reports performance and practicality

J A AXRacer J

application 1. Generating event graphs user events 2. Testing potential conflicts event races J A AXRacer J

application 1. Generating event graphs user events Instrument automatically Trigger user events Generate event traces Create event graphs Find event conflicts 2. Testing potential conflicts J A AXRacer J

1. Generating event graphs Instrument automatically application Trigger user events user events Generate event traces Create event graphs Find event conflicts 2. Testing potential conflicts J A AXRacer J

1. Generating event graphs Instrument automatically application Trigger user events user events click Generate event traces (x, y, w, h) v1 response response received loaded Create event graphs v2 v3 (x’, y’, w’, h’) happens before Find event conflicts 2. Testing potential conflicts J A AXRacer J

1. Generating event graphs Instrument automatically application Trigger user events user events Generate event traces Create event graphs (x, y, w, h) v1 v3 (x’, y’, w’, h’) Find event conflicts 2. Testing potential conflicts J A AXRacer J

1. Generating event graphs potentially 2. Testing potential conflicts conflicted event races events synchronous mode adverse mode v v w v’s consequences w’s consequences w w’s v’s consequences consequences hi bye J A AXRacer J

J A AXRacer J Does races ? J help us find and understand A J AX

12 web applications, 20 pages

effectiveness 152 tests 65 80 7 Pass Fail False Positive

effectiveness 152 tests false positives 65 80 7 Pass Fail False Positive

effectiveness 152 tests race characteristics dataset queries 65 interactive maps 80 auto completion 7 Pass Fail False Positive

comparison 152 tests EventRacer * 65 80 2 events ~130,000 races 7 ~37,000 locations ~740 uncovered * Raychev et al. OOPSLA’13 Pass Fail False Positive https://eventracer.org/

usefulness

performance phase 1 duration (s) 18 8 avg: 26s page load execution phase 2 (per test) duration (s) 36 28 5 avg: 69s page load execution report

common developer practices

https://github.com/cs-au-dk/ajaxracer @saba_a