Error tracking in the Javascript Tracker 2.7.0

For engineers Tracking SDKs
1

Hi,

i’m just evaluating the error tracking announced in the release 2.7.0. it’s a really nice feature.
The trackError method works well, if it is called in a try-catch block and if error data is passed into it.

But the more interesting part is tracking of unhandled errors.
And here i see a big problem. In most cases the js-tracker is loaded asynchron. But an error can occur before the tracker is loaded and the error event listener is initialized. In this case the unhandled error will not be tracked.

in such a case:
1.) we have to know if the tracker is loaded and initialized and 2.) also to catch the unhandled error.

for 1.) it would be great if the tracker can trigger an JS Event if finaly loaded and initialized , so other objects can listen on it

for 2.) i would prefer to setup an error event listener outside of the tracker which is calling the trackError method after the tracker is loaded:

window.addEventListener("error", function (err) {
    document.addEventListener("snowplow_loaded_js_event", function(event) {
            message = err.message;
            filename = (typeof err.filename != 'undefined') ? err.filename : null;
            line_number = (typeof err.lineno != 'undefined') ? err.lineno : null;
            column_number = (typeof err.colno  != 'undefined') ? err.colno : null;
            window.snowplow('trackError', message, filename, line_number, column_number, err);
    });
});

So now the question, is this the right approach or has someone else already solved this challenge? Is there a better way?

1 Like
2

Hello @ecoron,

Yes, you’re right in everything you said, by default JavaScript tracker tracks errors that occurred only after tracker object loaded and I see no ways to implement eager error handling out of the box. However, there’s few ways to implement it in user-space. Here’s snippet similar to yours that helped me to collect errors before tracker loaded:

snowplow_name_here('newTracker');
window.errorsToTrack = []
window.addEventListener('error', function (e) { window.errorsToTrack.push(e) });
function trackErrors () {
  while (window.errorsToTrack.length != 0) {
    var e = window.errorsToTrack.pop();
    snowplow('trackError', e.message, e.filename);  // and other arguments
  }
}
snowplow_name_here(trackErrors); // this is our "snowplow_loaded_js_event" callback

One important point here is that tracker namespace must be initialized (newTracker must be called) before you call trackError (or other tracking methods) or you’ll get Warning: no tracker configured error. This is synchronous operation, as opposed to whole tracker initialization, which means it needs to precede first callback invocation.

Please, let us know how this works for you.

UPD. Actually, I think we can even use following extremely simple snippet:

window.addEventListener('error', function (e) {
  window.snowplow('trackError', e.message); // and other arguments
})

It has same limitation about newTracker, and effectively it does same thing.

UPD2. There’s an issue on Github to address newTracker inconvenience.

3

The error stack is a good idea, i will give it a try.

But instead of having a callback function (or a stack of them, which could end up in the callback hell),
i would prefer the tracker is triggering a Javascript-event. Such an event could be used for several on the tracker depending things.

Finally it would be good if the snowplow tracker provides both options.