Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Expect the unexpected - How to deal with JavaSc...

Expect the unexpected - How to deal with JavaScript errors in web applications

Mats Bryntse

October 17, 2018
Tweet

More Decks by Mats Bryntse

Other Decks in Programming

Transcript

  1. Who is Mats Bryntse? • From Stockholm • Founder of

    Bryntum • Gantt & Scheduling JS UI components • Web dev tools (testing, monitoring) • @bryntum • www.bryntum.com !
  2. What’s a JavaScript error? • 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
  3. 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 really lucky, user will contact you ✉
  4. Beware of ‘Script error.’ messages • Happens for scripts on

    external domains • No message or callstack • Fix: Add crossorigin=“anonymous” to the script tag <script crossorigin=“anonymous” src="https://unpkg.com/react.production.min.js"></script>
  5. 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
  6. 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);
 

  7. 3. Setup client side logging • Log message, file, line,

    stack etc.. • Add any extra meta relevant for your debugging (userId/name/…) // Poor mans JS error logger window.onerror = (msg) => { new Image().src = `log.php?msg={msg}`; } throw new Error("Ooops");
  8. 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
  9. Let your users help you • Not every SaaS company

    can afford a full time QA department • Your users will eventually encounter bugs in production • Users === “Smart monkey testers” • How users trigger bugs is valuable data which we can harvest • Ideally, a session crash would generate a runnable test case
  10. 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
  11. 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”
  12. 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,
  13. Roll your own logger • Pros: Simple, get basic error

    info. Awareness • Cons: Lots of code to scan through
  14. 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
  15. First generation tools • Sentry, Rollbar, TrackJS, RayGun, NewRelic, StackHunter…

    • Basic error logging • Call stack + context • Timeline • Dashboard • Statistics • Focus on raising awareness, data gathering
  16. Second generation tools • LogRocket, SessionStack, FullStory… • Generates video

    of the user session • Replay & view the error • Focus on showing you the bug, not just data gathering • Bonus: videos help reveal bad UX design
  17. 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
  18. Technical details • Recorder: 100% vanilla JS • Screenshots: HTML2Canvas

    • Dashboard: Ext JS • Replay studio powered by Siesta
  19. Sign up for free here: https://app.therootcause.io Summing up: • Fix

    your external script tags. Never see “Script error”. Ever. • Your users can help you find bugs with the right tool • Don’t rely on users reporting bugs manually • Automate your error reporting