Know your errors
1 like2,202 views
This document discusses the importance of logging JavaScript errors to understand issues that users encounter on a website. It provides an overview of challenges in logging errors, such as localized error messages and cryptic messages. It then describes different approaches to logging errors, such as using window.onerror, try/catch blocks, and sending logs via image requests, iframes, or XHR requests. Finally, it demonstrates setting up a dashboard to visualize errors using Node.js, Express, and Redis.
![IF YOU WANT JUST A COUNTER
Google Analytics is also an option
_gaq.push([
'_trackEvent',
'jserror',
url + ':' + lno,
message || ''
]);](https://image.slidesharecdn.com/knowyourerrors-130425030449-phpapp01/85/Know-your-errors-32-320.jpg)
![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);
};](https://image.slidesharecdn.com/knowyourerrors-130425030449-phpapp01/85/Know-your-errors-39-320.jpg)
![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) );
}
};](https://image.slidesharecdn.com/knowyourerrors-130425030449-phpapp01/85/Know-your-errors-40-320.jpg)
![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);
});
};](https://image.slidesharecdn.com/knowyourerrors-130425030449-phpapp01/85/Know-your-errors-41-320.jpg)
Know your errors
- 1. KNOW YOUR ERRORS BECAUSE IT'S A JUNGLE OUT THERE
- 2. WHO AM I? Diogo Antunes Booking.com Senior Client Side Developer @dicode
- 3. OVERVIEW logging JS errors proof of concept tools/services
- 4. SO WHY LOG JS ERRORS IF?
- 5. YOU DO TDD
- 6. YOU DO SELENIUM TESTS
- 7. YOU DO HEADLESS BROWSER TESTING
- 8. YOU HAVE A TESTING TEAM
- 9. IT WORKS ON MY MACHINE
- 10. IT'S A JUNGLE OUT THERE!
- 11. 3RD PARTY SCRIPTS THAT YOU DON'T CONTROL Twitter, Facebook, GA
- 12. YOU USE A CDN even if it is just to load jquery
- 14. YOUR MARKETING DEPARTMENT LIKES TRACKING PIXELS
- 15. YES, SOME THINGS YOU CANNOT CONTROL but some of them you can mitigate
- 16. SOME CHALLENGES
- 17. LOCALIZED MESSAGES Expected identifier, string or number Identificador esperado Se esperaba un identificador, una cadena o un número Bezeichner erwartet 标识 ّف د و ا
- 18. LINE NUMBER minify js using gzip and preserving new lines may be a temporary solution
- 19. CRYPTIC MESSAGES cannot find method of undefined Script error. cross origin domain policy Chrome and Firefox Access-Control-Allow-Origin: *
- 20. 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
- 21. LET'S DO SOME LOGGING
- 22. APPROACHES
- 23. 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 };
- 24. 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); }
- 25. 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) { }
- 27. LOGGING
- 28. GET VS POST both methods work fine get has the size of url limitation you can truncate some data (case by case evaluation)
- 29. 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";
- 30. IFRAME (POST) var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var iframeDoc = iframe.contentDocument, content = '<form method="post" action="/log"> <input type="text" name="msg" value="Script Error"> <input type="text" name="url" value="http%3A%2F%2Flocalhost"> <input type="text" name="lno" value="1"> </form>'; iframeDoc.open(); iframeDoc.write(content); iframeDoc.close(); iframeDoc.body.firstChild.submit();
- 31. 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();
- 32. IF YOU WANT JUST A COUNTER Google Analytics is also an option _gaq.push([ '_trackEvent', 'jserror', url + ':' + lno, message || '' ]);
- 33. STACKTRACE.JS <script src="path/to/stacktrace.js"></script> <script> </script> //... your code ... if (errorCondition) { var trace = printStackTrace(); //Output however you want! alert(trace.join('nn')); } //... more code of yours ...
- 34. 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+
- 35. YOUR DASHBOARD
- 36. NODEJS + REDIS express node_redis npm install -g express express dashboard_js npm install redis
- 37. 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);
- 38. THE ROUTERS
- 39. 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); };
- 40. 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) ); } };
- 41. 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); }); };
- 43. IN ACTION
- 45. Smart error grouping Team collaboration Easiness of integration Users statistics QBAKA
- 46. Smart grouping of errors We don't rewrite your code Automatic ignoring of errors Filter errors to your liking {ERRORCEPTION}
- 47. you can point it to your own service or use appspot more a service than a SAAS JSERRLOG
- 48. Low overhead Email digest Shows the JavaScript code that caused the error Automatic cleanup MUSCULA
- 49. SINCE WE ALREADY LOGGING Navigation Timing API not available - Opera, Safari
- 53. FRONTEND SPOF any 3rd party widget custom font downloading even your own JS can cause it...
- 54. LOG EVERYTHING YOU CAN EVERYWHERE don't expect your users to report your errors be aware, be prepared
- 56. Q&A