Mugshot: Recording and Replaying JavaScript Applica9ons Jeremy - - PowerPoint PPT Presentation

▶
mugshot recording and replaying javascript applica9ons
SMART_READER_LITE
LIVE PREVIEW

Mugshot: Recording and Replaying JavaScript Applica9ons Jeremy - - PowerPoint PPT Presentation

Oct 07, 2023 625 likes •1.02k views

Mugshot: Recording and Replaying JavaScript Applica9ons Jeremy Elson Jon Howell James Mickens I ALREADY LEARNED THIS TO YOU. XOXO, JAMES Modern web sites: event mapItem.onclick = func9on(){ mapControl.zoomLevel++; driven func9onality

slide-1
SLIDE 1
slide-2
SLIDE 2

Mugshot: Recording and Replaying JavaScript Applica9ons

James Mickens Jeremy Elson Jon Howell

slide-3
SLIDE 3

Modern web sites: event‐ driven func9onality via JavaScript

mapItem.onclick = func9on(){ mapControl.zoomLevel++; mapControl.fetchTiles(); mapControl.displayTiles(); };

I ALREADY LEARNED THIS TO YOU. XOXO, JAMES

slide-4
SLIDE 4
  • “Hard” errors

– Unexpected excep9on – Missing resource

  • “SoS” errors

– Layout glitch – Broken event handler – Poor performance

slide-5
SLIDE 5

When Things Go Wrong

  • Common post‐mortems

– Core dump – Stack trace – Error log

  • In event‐driven systems…

– … interleavings are key! – Shouldn’t rely on user to report nondeterminis9c events

slide-6
SLIDE 6

Our Solu9on: Mugshot

  • Logs nondeterminis9c JavaScript events

– Ex: Mouse clicks, date requests, random number genera9on

  • On panic, upload event log to developer machine
  • Developers replays the buggy program run

– Single step or (near) real‐9me playback – Developer can leverage rich localhost debuggers . . . – . . . using buggy applica9ons runs from the wild!

slide-7
SLIDE 7

Why Mugshot Is Awesome

  • Easy to deploy to end users

– Logging/replay code is just a JavaScript library – Ship Mugshot infrastructure with the applica9on: <script src=“mugshot.js”></script> – Don’t need special kernel/VM/browser!

  • Logging is lightweight: run in common case

– Log size: Worst case 16 Kbps – CPU: Worst case 7% reduc9on in frame rate

  • Solves an important, prac9cal problem

– Increasingly complex apps migra9ng to the web – Remote bug repro is very important!

slide-8
SLIDE 8

Outline

  • Logging
  • Replay
  • Evalua9on
  • Conclusion
slide-9
SLIDE 9

Child frame 1 Child frame 2

Parent frame

Child 1 Bujon Child 2 Bujon Parent Bujon

slide-10
SLIDE 10

<html> <head> <script src=“logger.js”></script> </head> <body> <bujon type=“bujon” onclick=“alert(Date())”/> <iframe> </iframe> <iframe> </iframe> </body> </html> <script src=“logger.js”></script> <bujon type=“bujon” onclick=“alert(Date())”> <script src=“logger.js”></script> <bujon type=“bujon” onclick=“alert(Date())”> Event Log

slide-11
SLIDE 11

“Official” W3C Event Model

<iframe> <bujon type=`bujon` onclick=`alert(Date())`/> </iframe>

Child 2 Bujon Child frame 2

Phase 1: Capturing Phase 2: Target Phase 3: Bubbling 1 2 3 1 2 3

slide-12
SLIDE 12

Child frame 1 Child frame 2

Parent frame

Child 1 Bujon Child 2 Bujon Parent Bujon Event Log

bujon.onclick = func9on(){ alert(Date()); } Nondeterminism to log 1) Click (mouse bujon, target) 2) Return value of Date()

slide-13
SLIDE 13

Logging Events on Firefox

  • Logging Date() is straighporward . . .

– . . . just enclose real Date() in logging wrapper

  • Logging mouse click is “straighporward”

<iframe> <script src=“logger.js”></script> <bujon type=“bujon” onclick=“alert( )”> </iframe> 2) Target phase (bujon) 1) Capturing phase (iframe) <iframe onclick=“mugshotCapturingLogger()” > Event log Event: Date Time: 2000 Event: Click Time: 1000 Value: Child 2 bujon LeS‐click X=312, Y=209 Date() Date()

slide-14
SLIDE 14

Seems simple, right?

slide-15
SLIDE 15
slide-16
SLIDE 16

DOM 0 versus DOM 2 Handlers

var f = document.getElementById(“child2frame”); f.onclick = func9on(){alert(“DOM 0 handler”)}; f.addEventListener(“click”, func9on(){alert(“DOM 1 handler”), true);

  • For any DOM node/event name pair:

– At most one DOM 0 handler – Arbitrary number of DOM 2 handlers

slide-17
SLIDE 17

Life Is So Difficult

  • Firefox calls DOM 0 handler before DOM 2 handlers

– DOM 2 handlers called in order of registra9on

  • Mugshot must ensure that its handler runs before

any app‐defined ones

– App handler can cancel event . . . – . . . but we s9ll need to log it!

slide-18
SLIDE 18

Life Is So Difficult

  • We’d like to run before the app and . . .

– Define DOM 2 logging handler for onclick – Use JavaScript sejer shim to interpose on assignment to iframe.onclick

  • This would let us:

– Use DOM 2 logging func if no app‐defined DOM 0 handler – Wrap app‐defined DOM 0 handler in logging code

  • The problem: Firefox sejers are

par9ally broken

– Browser will not invoke DOM 0 handler for node with a shimmed DOM 0 event property

slide-19
SLIDE 19

Life Is So Difficult

  • Fortunately, sejers for DOM 0 handlers don’t

keep browser from firing DOM 2 handlers

– So, sejer code registers DOM 0 app handler as DOM 2 handler too – Sejer removes DOM 2 handler if “backing” DOM 0 handler is reset

slide-20
SLIDE 20

Recap: Logging Events on Firefox

<iframe <script src=“logger.js”></script> <bujon type=“bujon” onclick=“alert( )”> </iframe> <iframe onclick=“mugshotCapturingLogger()” > Date() Date()

Strategery

slide-21
SLIDE 21

Logging Events on IE

  • Logging Date() is straighporward . . .

– . . . just enclose real Date() in logging wrapper

  • Logging GUI events is tricky in IE!

– There is no capture phase!

<iframe> <script src=“logger.js”></script> <bujon type=“bujon” onclick=“alert(Date())”> </iframe> 1) Target phase (bujon) 2) Bubbling phase (iframe) <iframe onclick=“mugshotBubblingLogger()” > Event log Event: Date Time: 1000 Event: Click Time: 2000 Value: Child 2 bujon LeS‐click X=312, Y=209

slide-22
SLIDE 22

<script src=“logger.js”></script> <bujon type=“bujon” onclick=“alert(Date())”> </iframe> 1) Target phase (bujon) 2) Bubbling phase (iframe) <iframe onclick=“mugshotBubblingLogger()” > Event log Event: Date Time: 1000 Event: Click Time: 1000 Value: Child 2 bujon LeS‐click X=312, Y=209 Is there an unlogged GUI event? Doesn’t log the already logged event

  • Logging Date() is straighporward . . .

– . . . just enclose real Date() in logging wrapper

  • Logging GUI events is tricky in IE!

– There is no capture phase!

Logging Events on IE

slide-23
SLIDE 23

Sources of Nondeterminism

DOM Events Mouse Key Loads Form Body click, mouseover keydown, keyup load focus, blur, select scroll, resize Asynchronous callbacks Set 9mer AJAX state change setTimeout(f, 100) req.onchange = f Nondeterminis9c func9ons Get current 9me Get random number (new Date()).getTime() Math.random() Text selec9on IE: document.selec9on FF: window.getSelec9on() Highlight text w/mouse Highlight text w/mouse

Category Event Type Example

slide-24
SLIDE 24

How Do We Log “setTimeout(f, 50)”?

  • Interpose on setTimeout()
  • Easy, right?

var oldSetTimeout = setTimeout; setTimeout = func9on(f, waitMs){ f.callbackId = Mugshot.nextCallbackId++; var wrappedF = func9on(){ logCallbackExecu9on(f.callbackId); f(); };

  • ldSetTimeout(wrappedF, waitMs);

};

slide-25
SLIDE 25

var oldSetTimeout = setTimeout; setTimeout = func9on(f, waitMs){ f.callbackId = Mugshot.nextCallbackId++; var wrappedF = func9on(){ logCallbackExecu9on(f.callbackId); f(); };

  • ldSetTimeout(wrappedF, waitMs);

}; Browser garbage‐collects this reference!?! Call to oldSetTimeout() will fail (undefined func9on)!

slide-26
SLIDE 26

I Hate Myself And I Want To Die

  • Solu9on: Create an invisible iframe!

– Save its reference to setTimeout() . . . – . . . and call it inside the wrapped callback

  • Have to do this nonsense at replay 9me too
  • Mugshot uses a variety of

addi9onal hacks

– See the paper for details

slide-27
SLIDE 27

Logging the Value of Loads

Replay Cache User browser Web server Replay proxy

1 2 3 4 2

1) Original content served 2) Replay proxy caches data before sending to client, instruments HTML with log.js 3) User interacts with page, log.js records local events 4) On failure, log.js uploads event trace

slide-28
SLIDE 28

Outline

  • Logging
  • Replay
  • Evalua9on
  • Conclusion
slide-29
SLIDE 29

Using the Replay Proxy

Developer browser Replay proxy Replay Cache

1 2 3 4 4

1) Proxy changes log.jsreplay.js, serves cached HTML page 2) replay.js prevents browser from autonomously genera9ng events 3) replay.js fetches event log 4) replay.js replays events, fetching external content from replay proxy

slide-30
SLIDE 30

On The Developer Machine: replay.js

4) To replay, step through log . . .

– Dispatch fake GUI events using fireEvent()/dispatchEvent() – Execute 9mer func9ons as they appear in log – As app code executes, pull return values of Date() and Math.random() from the log – When load arrives, signal replay proxy to release the data

1) Put transparent <iframe> on top of page 2) Interpose on Date(), Math.random(), setTimeout()… 3) Fetch log and display VCR control

slide-31
SLIDE 31

Outline

  • Logging
  • Replay
  • Evalua9on
  • Conclusion
slide-32
SLIDE 32

Log Growth

25 50 75 100 Tetris Pacman Spacius BASIC Painter NicEdit Shell

Firefox Log Growth (Kbps)

Verbose Compact

slide-33
SLIDE 33

Timer Callback Rates

20 40 60 80 100

Firefox IE

Spacius: CBs per second

Baseline Logging Replay

slide-34
SLIDE 34

Reproducing Bugs

slide-35
SLIDE 35

Conclusion

slide-36
SLIDE 36

Conclusion

  • Mugshot: trace+replay for JavaScript apps

– Easy to deploy: run a script inside unmodified browser – Lightweight: 7% CPU overhead, 16 Kbps log growth

  • Design is straighporward . . .

– . . . but implementa9on is not! – Take my learnings, make them your own

slide-37
SLIDE 37
slide-38
SLIDE 38