How do we track Javascript errors? Do the existing tools actually work?

Question

Today I find the need to track and retrieve a Javascript error stacktrace to solve them.

Today we were able to capture all rest calls, the idea is that once you get an error, automatically posts the stacktrace of that error plus the responses of the rest saved services so we can detect, reproduce, and solve the problems in almost an identical environment/situation.

As a requirement we were asked to make a module that can be included without being intrusive, for example: Include the module that contains the hook logic in one JS, would be not invasive, include several lines of code in various JS files would be invasive.

The goal is to make a tool that can be included in a system already developed and track error events (like console).

I've read about this trackers logic:

• errorception.com/
• trackjs.com/
• atatus.com/
• airbrake.io/
• jslogger.com/
• getsentry.com/
• muscula.com/
• debuggify.net/
• raygun.io/home

We need to do something like that, track the error and send it to our server.

As "Dagg Nabbit" says... "It's difficult to get a stack trace from errors that happen "in the wild" right now"...

So, we got a lot of paid products, but how did they really works?

In Airbrake they use stacktrace and window.onerror:

window.onerror = function(message, file, line) {
  setTimeout(function() {
    Hoptoad.notify({
      message : message,
      stack   : '()@' + file + ':' + line
    });
  }, 100);
  return true;
};

But i cant figure out when the stacktrace really used.

At some point, stacktrace, raven.js and other trackers need try / catch.

1. what happens if we found a way to make a global wrapper?
2. Can we just call stacktrace and wait for the catch?

How can I send a stack trace to my server when an unexpected error occurs on the client? Any advice or good practices?

Answer 1

It's difficult to get a stack trace from errors that happen "in the wild" right now, because the Error object isn't available to window.onerror.

window.onerror = function(message, file, line) { }

There is also a new error event, but this event doesn't expose the Error object (yet).

window.addEventListener('error', function(errorEvent) { })

Soon, window.onerror will get a fifth parameter containing the Error object, and you can probably use stacktrace.js to grab a stack trace during window.onerror.

<script src="stacktrace.js"></script>
<script>
window.onerror = function(message, file, line, column, error) {
    try {
        var trace = printStackTrace({e: error}).join('\n');
        var url = 'http://yourserver.com/?jserror=' + encodeURIComponent(trace);
        var p = new printStackTrace.implementation();
        var xhr = p.createXMLHTTPObject();

        xhr.open('GET', url, true);
        xhr.send(null);
    } catch (e) { }
}
</script>

At some point the Error API will probably be standardized, but for now, each implementation is different, so it's probably smart to use something like stacktracejs to grab the stack trace, since doing so requires a separate code path for each browser.

Answer 2

I'm the cofounder of TrackJS, mentioned above. You are correct, sometimes getting the stack traces requires a little bit of work. At some level, async functions have to be wrapped in a try/catch block--but we do this automatically!

In TrackJS 2.0+, any function you pass into a callback (addEventListener, setTimeout, etc) will be automatically wrapped in a try/catch. We've found that we can catch nearly everything with this.

For the few things that we might now, you can always try/catch it yourself. We provide some helpful wrappers to help, for example:

function foo() {
  // does stuff that might blow up
}

trackJs.watch(foo);

Answer 3

In latest browsers, there is a 5th parameter for error object in window.onerror. In addEventListener, you can get error object by event.error

// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
    console.log(message, "from", error.stack);
    // You can send data to your server
    // sendData(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (event) {
    console.log(e.error.message, "from", event.error.stack);
    // You can send data to your server
    // sendData(data);
})

You can send data using image tag as follows

function sendData(data) {
    var img = newImage(),
        src = http://yourserver.com/jserror + '&data=' + encodeURIComponent(JSON.stringify(data));

    img.crossOrigin = 'anonymous';
    img.onload = function success() {
        console.log('success', data);
    };
    img.onerror = img.onabort = function failure() {
        console.error('failure', data);
    };
    img.src = src;
}

If you are looking for opensource, then you can checkout TraceKit. TraceKit squeezes out as much useful information as possible and normalizes it. You can register a subscriber for error reports:

TraceKit.report.subscribe(function yourLogger(errorReport) {
    // sendData(data);
});

However you have to do backend to collect the data and front-end to visualize the data.

Disclaimer: I am a web developer at https://www.atatus.com/ where you can track all your JavaScript errors and filter errors across various dimensions such as browsers, users, urls, tags etc.