Squashing JavaScript Bugs - ThatConference 2017

Slide 1

Slide 1 text

SQUASHING JavaScript Bugs with Todd H Gardner @toddhgardner

Slide 2

Slide 2 text

AGENDA 1. How to fix Bugs 2. Fix Some Bugs with Todd H Gardner @toddhgardner

Slide 3

Slide 3 text

Identify Isolate Resolve Prevent How To Fix Bugs

Slide 4

Slide 4 text

Identify Isolate Resolve Prevent • Development • Testing • Monitoring • User Reports

Slide 5

Slide 5 text

Identify Isolate Resolve Prevent • Development • Testing • Monitoring • User Reports cheaper, better, faster

Slide 6

Slide 6 text

• Context Identify Isolate Resolve Prevent - Browser - Page - User - Script(s)

Slide 7

Slide 7 text

• Timeline Identify Isolate Resolve Prevent Complex State Machine - API(s) - JS App(s) - DOM - Browser

Slide 8

Slide 8 text

• Root Cause Identify Isolate Resolve Prevent - Symptoms - State

Slide 9

Slide 9 text

• Context • Timeline • Root Cause Identify Isolate Resolve Prevent

Slide 10

Slide 10 text

Identify Isolate Resolve Prevent Application Code Browser API DOM Network Services

Slide 11

Slide 11 text

Identify Isolate Resolve Prevent Application Code Browser API DOM Network Services Your level of Control

Slide 12

Slide 12 text

Identify Isolate Resolve Prevent “The Right Way” Vs ”The Quick Way”

Slide 13

Slide 13 text

Identify Isolate Resolve Prevent • Regression Tests Test to check for the recurrence of a bug

Slide 14

Slide 14 text

Identify Isolate Resolve Prevent • Process Change - Manual - Automated

Slide 15

Slide 15 text

Identify Isolate Resolve Prevent • Do Nothing Tests and Process have cost. Don’t increase them trivially.

Slide 16

Slide 16 text

Identify Isolate Resolve Prevent • Regression Tests • Process • Do Nothing

Slide 17

Slide 17 text

AGENDA 1. How to fix Bugs 2. Fix Some Bugs with Todd H Gardner @toddhgardner

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

XKCD.com

Slide 20

Slide 20 text

getRANTr introducing

Slide 21

Slide 21 text

github.com / toddhgardner / getRANTR getRANTr

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

BUGS BECAUSE JAVASCRIPT

Slide 24

Slide 24 text

{Track:js} JavaScript Error Monitoring

Slide 25

Slide 25 text

50,000,000,000 thousands millions billions ones I’ve helped fix JavaScript Bugs

Slide 26

Slide 26 text

QA Identified Bug: User cannot delete a rant from their timeline. Think twice, rant once. 1

Slide 27

Slide 27 text

1 KILL IT! AHHHHHHH!!!!

Slide 28

Slide 28 text

Logical Bug • Event PreventDefault • Function context 1

Slide 29

Slide 29 text

1 Concepts: • “Keystone” Users • DOM Inspector • Async Callstacks

Slide 30

Slide 30 text

2 User Identified Bug: Rant text remembered after deleted. Is it paranoia if “they” are actually after you?

Slide 31

Slide 31 text

2 KILL IT! AHHHHHHH!!!!

Slide 32

Slide 32 text

Logical Bug • Empty String • Falsy 2

Slide 33

Slide 33 text

2 Concepts: • Application (Storage) Explorer • Breaking Execution

Slide 34

Slide 34 text

3 Monitoring Identified Bug: Server reporting lots of 400 Requests. Bad Request? I’ll request what I want.

Slide 35

Slide 35 text

Slide 36

Slide 36 text

3 AJAX Error POST 400 Bad Request /api/rants/ User Click User Input 0 characters

Slide 37

Slide 37 text

3 KILL IT! AHHHHHHH!!!!

Slide 38

Slide 38 text

Data Bug • User-Form Validation 3

Slide 39

Slide 39 text

3 Concepts: • Network Inspector • Response Previews • JavaScript Debugger

Slide 40

Slide 40 text

4 Developer Identified Bug: Unexpectedly high memory usage. You’ve got 16GB! What else are you going to do with it?

Slide 41

Slide 41 text

4 KILL IT! AHHHHHHH!!!!

Slide 42

Slide 42 text

Memory Bug • Unreleased Objects • Orphaned DOM Trees 4

Slide 43

Slide 43 text

4 Concepts: • Profiler • Timeline

Slide 44

Slide 44 text

5 User Identified Bug: Sometimes slow to load the page. Like you have something better to do?