Loading...

Painless JavaScript Error Tracking

whoami

  • http://rakeshpai.me
  • @rakesh314
  • Deploying JS-heavy sites since 2004

Why report errors?

  • JavaScript is different
  • Many browser + version + OS combinations
  • Errors are lost
  • Users don't complain — they leave

Best-case scenario

Worst-case scenario

Understanding JS errors

  • Three execution contexts: global, function & eval
  • Error objects usually gives you a lot of information.
  • DOMException

Types of errors

  • Loading errors (usually http errors)
  • Parse errors (mostly covers http errors)
  • Runtime / logic errors

Methods of catching errors

An unscientific analysis

Criteria

  • Performance — load time & runtime
  • Reliability
  • Implementation effort
  • Rich errors, Coverage, Simplicity, Browser support

Grading

Scorecard
Performance
Reliability
Low Effort
Rich errors
Coverage
Simplicity
Browser support

Ostrich method

Ostrich Method Variations

  • My tests passed
  • My QA team has given a go-ahead
  • I haven't found any bugs yet

Ostrich Method

Scorecard
Performance ✔
Reliability ✔
Low Effort ✔
Rich errors ✘
Coverage ✘
Simplicity ✔
Browser support ✘

Manual try…catch

Or Spaghettification

Before

var i = 0;
$.ready(function() {
    $("#button").click(function() {
        alert(i++);
    });
});

After

try {
    var i = 0;
    $.ready(function() {
        try {
            $("#button").click(function() {
                try {
                    alert(i++);
                } catch(e) { postError(e); }
            });
        } catch(e) { postError(e); }
    });
} catch(e) { postError(e); }
WTF!

Manual try…catch

Scorecard
Performance depends
Reliability ✔
Low Effort ✘
Rich errors ✔
Coverage ✘
Simplicity ✔
Browser support ✔

Automatic try…catch…

…and it's variants

Add try…catch
at build time

Add try…catch
at build time

  • Fairly complex
  • Requires static analysis of the code
  • Can introduce its own bugs!

Add try…catch
at build time

Scorecard
Performance depends
Reliability ✔
Low Effort ✔
Rich errors ✔
Coverage ✔
mostly
Simplicity ✘
Browser support ✔

Add try…catch
using a proxy

Add try…catch
using a proxy

  • Heavy dependency on proxy
  • Can still introduce its own bugs!

Add try…catch
using a proxy

Scorecard
Performance depends
Reliability ✘
Low Effort ✔
Rich errors ✔
Coverage ✔
mostly
Simplicity ✘
Browser support ✔

Add try…catch using a
proxy, with failover

Add try…catch using a
proxy, with failover

  • Reliability improves
  • Performance deteriorates
  • Needs a script loader and additional network requests

Add try…catch using a
proxy, with failover

Scorecard
Performance ✘
Reliability ✔
Low Effort ✔
Rich errors ✔
Coverage ✔
mostly
Simplicity ✘
Browser support ✔

Add try…catch to browser methods

Add try…catch to browser methods

Over-simplified implementation

var old = document.addEventListener;
document.addEventListener = function(evt, handler) {
    old.addEventListener(evt, function(evtObj) {
        try {
            handler(evtObj)
        } catch(e) {
            postError(e);
        }
    }, false);
};

Add try…catch to browser methods

Scorecard
Performance ✘
Reliability ✔
Low Effort ✔
Rich errors ✔
Coverage ✘
Simplicity ✘
Browser support ✔

window.onerror

window.onerror

window.onerror = function(message, lineNumber, file) {
    postError(message, lineNumber, file)
}
  • No access to error object. Errors can't be rich.
  • Stack has already unrolled
  • Dead simple to implement

window.onerror

Scorecard
Performance depends
Reliability ✔
Low Effort ✔
Rich errors ✘
Coverage ✔
Simplicity ✔
Browser support decent

Summary

Epic Scorecard
  Manual Build Proxy Failover Client onerror
Performance depends depends depends ✘ ✘ depends
Reliability ✔ ✔ ✘ ✔ ✔ ✔
Low Effort ✘ ✔ ✔ ✔ ✔ ✔
Rich errors ✔ ✔ ✔ ✔ ✔ ✘
Coverage ✘ ✔
mostly		 ✔
mostly		 ✔
mostly		 ✘ ✔
Simplicity ✔ ✘ ✘ ✘ ✘ ✔
Browser support ✔ ✔ ✔ ✔ ✔ decent

Making window.onerror fast

var errors = [];
window.onerror = function(message, lineNumber, file) {
    errors.push({
        message: message,
        lineNumber: lineNumber,
        file: file
    });
}

window.addEventListener("load", function() {
    // Load the code to process the errors array
}, false);
  • No load time performance hit
  • No hard dependency, high reliability

  • High performance by design
  • Highly reliable by design
  • Catches all errors
  • Con: No stacktraces (yet)

Other features

  • Decent duplication detection
  • Great metrics about errors
  • Weeds out errors you don't care about

Marketing Talk

  • Being used by several big Internet brands
  • Caught over 1 million errors so far
  • Zero downtime till date

Sign up!

  • In closed beta
  • It's free right now!

http://errorception.com/         @errorception