Sherlogjs - JavaScript Error and Event Tracker Application

Transcript

1. Sherlog.js Javascript error and event tracker application http://github.com/burakson/sherlogjs
2. The Problem? A software bug, Visitors’ geographical location/language/os/browser/device, Service outage Unauthorized attempts... Unreplicable client-side errors could vary due to;
3. How Sherlogjs solves the problem? and some key features... Tracks javascript runtime errors Tracks errorneous synchronous/asynchronous xhr requests Tracks custom events Can be integrated to any website/web application Super light-weight (~2kb minimized) Uses MongoDB Designed to scale with large traffic
4. How it works? Visitor visits the webpage Framework catches errors and events Fires a pixel to the server Server collects the data Collected and aggregated data is shown in the UI
5. Application Stack Server-side Client-side NodeJS ExpressJS MongoDB Bower Gulp headless browser to run the server node.js application framework document-oriented nosql database package manager for client-side dependencies a task manager (similar to Grunt) no bullshit! JavaScript
6. How does the tracking work? It is based on Web Bug* (a.k.a pixel tracking) technique. Enables to do one-way communication with the server by inserting a dummy image element into the DOM ( Usually 1×1 pixel transparent GIF) . Human readable output; E.g: <img src=”//domain.com/transparent.gif?foo=bar&foo1=bar1&foo2=bar2...” /> * Web Bug: http://en.wikipedia.org/wiki/Web_bug { foo : ‘bar’, foo1 : ‘bar1’, foo2 : ‘bar2’, ... }
7. When is the pixel fired? Visitor faces javascript error XHR request fails A desired metric is placed $.ajax({ url : ‘/api/user’, error : function() { // pixel is fired }) }); Sherlog.push({ username : ‘John Doe’, action : ‘Hovered on first banner’ ... });
8. Database structure MongoDB is an open-source document database, and the leading NoSQL database written in C++. { “_id” : ObjectId(”53e92fb21363443a0f25111e”), “tracking_data” : { “stack” : “ReferenceError: $ is not defined at example-error.html:14:5”, “column” : 5, “line” : 14, “source” : “http://localhost/lab/sherlogjs/examples/example-error.html”, “message” : “Uncaught ReferenceError: $ is not defined” }, “environment” : “production”, “user_agent” : { ... }, “referrer” : “http://localhost:3000”, “resolution” : “1440x900”, “created_at” : ISODate(”2014-08-11T21:03:46.739Z”), “type” : 0 }
9. SEE IT IN ACTION
10. What is next? Dashboard graphs Visitors’ language & geolocation data Mute tracking data Multi-language dashboard Seperation of Server and Framework Mysql adapter and more contributers...
11. THANK YOU! Fork it, hack it, report it; https://github.com/burakson/sherlogjs