Record.Replay.Reproduce

HelsinkiJS

Transcript

1. Mats Bryntse Founder, @bryntum Record.Replay.Reproduce Dealing with javascript errors in modern web apps >>
2. Who is Mats Bryntse? • From Stockholm • Founder of Bryntum • Scheduler, Gantt + Kanban UI components • Web dev tools (testing, monitoring) • @bryntum • www.bryntum.com !
3. Error handling 101
4. Javascript error basics • Javascript errors are unhandled exceptions in your code base • Or in the frameworks you use • Doesn’t matter where errors happen, poor user impression • With JS codebases in the size of MBs, cannot ignore error handling + logging • Good news - it’s easy
5. When a web site error happens, you as a dev see…
6. What does the user see when there is a JS error?
7. Nothing
9. Two scenarios for the end user: • Error is captured by you. User notified • Or…… • Nothing happens for user, will probably try same action again. • If you’re lucky, user will contact you ✉ ✊
10. Live demo of an error
11. Making an error logger in < 10 minutes
12. 1. Create single table db • date, message, file, line, callstack etc CREATE TABLE `error` ( `msg` char(60), `callstack` char(1000), … ) ENGINE=InnoDB DEFAULT CHARSET=utf8
13. 2. PHP script to receive error data and store it in DB <?php // LOG TO DB
 $link = getLink();
 
 $command = "call insert_error('$msg', ‘$url', ‘$stack’, …); 
 $result = mysqli_query($link, $command);
 

14. 3. Setup client side logging • Log message, file, line, stack etc.. • Add any extra meta relevant for your debugging (userId/name/…) // Poor mans error logger window.onerror = function log(msg) { new Image().src = "log.php?msg=" + encodeURIComponent(msg); } throw new Error("Ooops");
15. Manual error logging, things to consider • Store error logs in a database on a non-production server • Throttle logging on client side + server side • Probably we only care about the first error on a page
16. Developer vs Bugs
17. Bug life cycle Fix Occurrence ℹ Investigate Reproduce Report ✅
18. Developers need to be “in context” to fix a bug
19. Debug context wish list 1. Error message 2. File / line number 3. Call stack 4. Screenshot 5. Step by step description 6. Log of user / browser session activity 7. Seeing the user reproduce the error 8. Live breakpoint in production environment 9. Live breakpoint on my localhost, in my fav browser
20. Once you have breakpoint, it’s all downhill!
21. Error at Object.module.exports.request (/home/vagrant/src/kumascript/lib/kumascript/caching.js:366:17) at attempt (/home/vagrant/src/kumascript/lib/kumascript/loaders.js:180:24) at ks_utils.Class.get (/home/vagrant/src/kumascript/lib/kumascript/loaders.js:194:9) at /home/vagrant/src/kumascript/lib/kumascript/macros.js:282:24 at /home/vagrant/src/kumascript/node_modules/async/lib/async.js:118:13 at Array.forEach (native) at _each (/home/vagrant/src/kumascript/node_modules/async/lib/async.js:39:24) at Object.async.each (/home/vagrant/src/kumascript/node_modules/async/lib/async.js:117:9) at ks_utils.Class.reloadTemplates (/home/vagrant/src/kumascript/lib/kumascript/macros.js:281:19) at ks_utils.Class.process (/home/vagrant/src/kumascript/lib/kumascript/macros.js:217:15) “A live breakpoint is worth a 1000 callstacks”
22. Common approaches to error handling
23. • Pros: Cheap • Cons: Bugs live forever Do nothing
24. Email ping pong
25. Email ping pong - Enterprise version Error in web app Reports to own support Your company User realises it’s an error 01010 10110 11110 User Dear User, /Depressed dev. Can’t reproduce, need more info. Sincerely yours,
26. • Pros: None • Cons: Slow, expensive, demoralizing, frustrated end user
27. Roll your own logger
28. Roll your own logger • Pros: Simple, get basic error info. Awareness • Cons: Lots of code to scan through
29. Using a 3rd party logger • Pros: Tons of data, call stack, console logs, ajax, user activity. Enables you to search for the error • Cons: Slow, tons of data to parse, manual work, code to review
30. Quick poll
31. Evolution of tools
32. First generation tools • Sentry, Rollbar, TrackJS, RayGun, NewRelic, StackHunter… • Basic error logging • Call stack + context • Timeline • Dashboard • Statistics • Focus on raising awareness, data gathering
33. Second generation tools • Generate video • Manual video recording + feedback collection • Replay & view the error • Focus on showing you the bug, not just data gathering
35. RootCause - debugging javascript errors in 2017
36. Installing the RC logger in your web app window.logger = new RC.Logger({
 applicationId : 'yourToken',
 recordUserActions : true,
 showFeedbackButton : true,
 logAjaxRequests : true,
 captureScreenshot : true,
 environment : 'prod',
 user : {
 email : 'anton@aus.tirol',
 name : 'Anton'
 }
 });

37. DEMO TIME!
38. Cuts 99% of communication out • No need for QA / end users to email devs with crash reports, step by step • No need for devs to notify QA that bug is fixed
39. Technical details • Recorder: 100% vanilla JS • Screenshots: HTML2Canvas • Dashboard: Ext JS • Replay studio powered by Siesta
40. >> Fast forward into context Fix Occurrence ℹ Investigate Reproduce Report ✅
42. >> Integrations more to come…
43. Privacy concerns..?
45. Sign up here: https://app.therootcause.io Summing up: • Fix your external script tags. Never see “Script error”. Ever. • Don’t rely on users reporting bugs • Automate your error reporting
46. Breakpoint or GTFO @bryntum Questions? @the_rootcause