Know your errors - Speaker Deck

Slide 1

Slide 1 text

KNOW YOUR ERRORS BECAUSE IT'S A JUNGLE OUT THERE

Slide 2

Slide 2 text

WHO AM I? Diogo Antunes Booking.com Senior Client Side Developer @dicode

Slide 3

Slide 3 text

OVERVIEW logging JS errors proof of concept tools/services

Slide 4

Slide 4 text

SO WHY LOG JS ERRORS IF?

Slide 5

Slide 5 text

YOU DO TDD

Slide 6

Slide 6 text

YOU DO SELENIUM TESTS

Slide 7

Slide 7 text

YOU DO HEADLESS BROWSER TESTING

Slide 8

Slide 8 text

YOU HAVE A TESTING TEAM

Slide 9

Slide 9 text

IT WORKS ON MY MACHINE

Slide 10

Slide 10 text

IT'S A JUNGLE OUT THERE!

Slide 11

Slide 11 text

3RD PARTY SCRIPTS THAT YOU DON'T CONTROL Twitter, Facebook, GA

Slide 12

Slide 12 text

YOU USE A CDN even if it is just to load jquery

Slide 13

Slide 13 text

USERS INSTALL PLUGINS

Slide 14

Slide 14 text

YOUR MARKETING DEPARTMENT LIKES TRACKING PIXELS

Slide 15

Slide 15 text

YES, SOME THINGS YOU CANNOT CONTROL but some of them you can mitigate

Slide 16

Slide 16 text

SOME CHALLENGES

Slide 17

Slide 17 text

LOCALIZED MESSAGES Expected identifier, string or number Identificador esperado Se esperaba un identificador, una cadena o un número Bezeichner erwartet 标识 فّ د و ا

Slide 18

Slide 18 text

LINE NUMBER minify js using gzip and preserving new lines may be a temporary solution

Slide 19

Slide 19 text

CRYPTIC MESSAGES cannot find method of undefined Script error. cross origin domain policy Chrome and Firefox Access-Control-Allow-Origin: *

Slide 20

Slide 20 text

BE SAFE deploy environment vars that disable 3rd party code if possible, without making any deploy to live that way you can take action quickly

Slide 21

Slide 21 text

LET'S DO SOME LOGGING

Slide 22

Slide 22 text

APPROACHES

Slide 23

Slide 23 text

WINDOW.ONERROR works across the board amount of information is limited window.onerror = function(msg, url, lno){ /* No impact besides parsing overhead is only for the request to log the error when one actually happens */ return true; //hides the message in supported browsers };

Slide 24

Slide 24 text

TRY/CATCH works across the board try { throw new Error("my error"); } catch (e){ e.stack; //chrome, firefox e.message; //opera log(e.stack || e.message || e); }

Slide 25

Slide 25 text

TRY/CATCH more meaningful errors performance hit, but you should evaluate if it matters may lead to a lot of nesting if not thought through var fn = function(){ throw "new error"; //this exception will not be caught //since it's a string it will not have stack trace }; try{ setTimeout(fn,0); } catch(e) { }

Slide 26

Slide 26 text

TYPES OF EXCEPTIONS Error EvalError RangeError ReferenceError SyntaxError TypeError URIError

Slide 27

Slide 27 text

LOGGING

Slide 28

Slide 28 text

GET VS POST both methods work fine get has the size of url limitation you can truncate some data (case by case evaluation)

Slide 29

Slide 29 text

IMAGE (GET) //assuming src was already calculated var img = new Image(1,1); img.onload = function() {}; img.src = "/log?msg=error&url=http%3A%2F%2Flocalhost&lno=1";

Slide 30

Slide 30 text

IFRAME (POST) var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var iframeDoc = iframe.contentDocument, content = '\ \ \ \ '; iframeDoc.open(); iframeDoc.write(content); iframeDoc.close(); iframeDoc.body.firstChild.submit();

Slide 31

Slide 31 text

XHR (BOTH) var xhr = new XMLHttpRequest(); //post xhr.open("POST",'/log'); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send( payload ); //get xhr.open("GET",'/log?' + qs); xhr.send();

Slide 32

Slide 32 text

IF YOU WANT JUST A COUNTER Google Analytics is also an option _gaq.push([ '_trackEvent', 'jserror', url + ':' + lno, message || '' ]);

Slide 33

Slide 33 text

STACKTRACE.JS //... your code ... if (errorCondition) { var trace = printStackTrace(); //Output however you want! alert(trace.join('\n\n')); } //... more code of yours ...

Slide 34

Slide 34 text

STACKTRACE.JS Firefox (and Iceweasel) 0.9+ Google Chrome 1+ Safari 3.0+ (including iOS 1+) Opera 7+ IE 5.5+ Konqueror 3.5+ Flock 1.0+ SeaMonkey 1.0+ K-Meleon 1.5.3+ Epiphany 2.28.0+ Iceape 1.1+

Slide 35

Slide 35 text

YOUR DASHBOARD

Slide 36

Slide 36 text

NODEJS + REDIS express node_redis npm install -g express express dashboard_js npm install redis

Slide 37

Slide 37 text

EXPRESS //assuming a sample express app var log = require('./routes/log'); app.get('/log', log.index); app.post('/log', log.index); app.get('/log_list', log.list); app.get('/log_chart', log.chart);

Slide 38

Slide 38 text

THE ROUTERS

Slide 39

Slide 39 text

exports.index = function (req, res) { var msg = req.param('msg', ''), url = req.param('url', ''), lno = req.param('lno', 0), js_error = msg + ':!:' + url + ':!:' + lno; minute = ((+new Date()/60000|0)*60000), data = [ 'jserrors', '' + minute, 1 ]; if(!msg) { res.send('', 400); } redis_cli.hincrby( data, function(){} ); redis_cli.lpush( 'jserror_' + minute, js_error); res.send('', 202); };

Slide 40

Slide 40 text

exports.list = function(req, res) { var to = (+new Date()/60000|0)*60000, from = to - 20 * 60000; inc = 60000, prefix = 'jserror_', result = {}, cb = function(res, i){. return function(err, reply){ var ret = []; reply.forEach(function(val, ind){ ret[ind] = val.split(':!:'); }); result[i] = ret; if(i === to) { res.json(result); } }; }; for(var i = from; i<=to; i+=inc) { redis_cli.lrange( [prefix+i,0,100], cb(res, i) ); } };

Slide 41

Slide 41 text

exports.chart = function(req, res) { var to = (+new Date()/60000|0)*60000, inc = 60000, from = to - 20 * 60000, redis_param = ['jserrors'], ret = []; for(var i = from; i<=to; i+=inc) { redis_param.push(''+i); ret.push({d: new Date(i)}); } redis_cli.hmget( redis_param, function(err, reply){ reply.forEach(function(val, ind){ ret[ind].v = val || 0; }); res.json(ret); }); };

Slide 42

Slide 42 text

MISCELLANEOUS jquery 2.0 twitter bootstrap morris

Slide 43

Slide 43 text

IN ACTION

Slide 44

Slide 44 text

SERVICES OUT THERE

Slide 45

Slide 45 text

Smart error grouping Team collaboration Easiness of integration Users statistics QBAKA

Slide 46

Slide 46 text

Smart grouping of errors We don't rewrite your code Automatic ignoring of errors Filter errors to your liking {ERRORCEPTION}

Slide 47

Slide 47 text

you can point it to your own service or use appspot more a service than a SAAS JSERRLOG

Slide 48

Slide 48 text

Low overhead Email digest Shows the JavaScript code that caused the error Automatic cleanup MUSCULA

Slide 49

Slide 49 text

SINCE WE ALREADY LOGGING Navigation Timing API not available - Opera, Safari

Slide 50

Slide 50 text

PROPERTIES navigationStart unloadEventStart unloadEventEnd redirectStart redirectEnd fetchStart domainLookupStart domainLookupEnd connectStart connectEnd

Slide 51

Slide 51 text

PROPERTIES secureConnectionStart requestStart responseStart responseEnd domLoading domInteractive domContentLoadedEventStart domContentLoadedEventEnd domComplete loadEventStart loadEventEnd

Slide 52

Slide 52 text

VISUAL INDICATION

Slide 53

Slide 53 text

FRONTEND SPOF any 3rd party widget custom font downloading even your own JS can cause it...

Slide 54

Slide 54 text

LOG EVERYTHING YOU CAN EVERYWHERE don't expect your users to report your errors be aware, be prepared