Tracking JavaScript errors

Design
1

By utilising:

Ember.RSVP.on('error', function(error) {
  window.trackJs.track(error);
});

It is possible to send errors to a third party service. Great.

But a common pattern in Ember JS apps is something like this:

this.set('isLoading', true);

ajax('/search')
  .then((results) => {
    this.set('results', results);
  })
  .catch((error) => {
    this.set('error', 'Something bad happened');
  })
  .finally(() => {
    this.set('isLoading', false);
  })

Inadvertently, by catching the error it will not get sent to the third party tracking service.

Ways to solve this:

  • Re-throw the error inside the catch
    • But this then causes the test suite to have errors in it.
    • It also requires developers to remember to re-throw
    • It will also cause duplicates errors
  • Call the tracking code inside the catch
    • This will lead to tracking code being scattered here there and everywhere
    • It also requires the developers to remember to track the error

Is there a better way?

2

I think you can use Ember.$(document).ajaxError.

3

You could, but that assumes the promise is for ajax.

It could end up with duplicates, because I use ic-ajax which makes all ajax requests promise-based. So if one failed, it would get caught by RSVP.on('error') and ajaxError

1 Like
4

You could also have a default handler that you pass your error handling to. You can inject that default error handler everywhere or import it.

something like

function catchHandler(callback) {
  return function(error) {
    window.trackJs.track(error);
    callback(error);
  };
};