Catching errors in Ajax, Angular?

[pratik60]

Hi Guys

I have installed Sentry successfully for the purpose of tracking errors on the client facing side of the app. But the docs are a little unclear, if I need to do anything on my end, except integrating the plugin.

I have currently downloaded the script as such => //cdn.ravenjs.com/1.1.17/angular,console,jquery,native/raven.min.js

And as far as I could make out, the angular plugin has an exception handler which should hook onto the angular app, and send messages to raven. Couldn't understand, though if the ajax wrappers are already built in.

I came across this => https://github.com/getsentry/raven-js/pull/204/files , but can't see this file anymore and I am wondering if I need to write any code in my app to achieve the same?

Thanks in advance

[mattrobenolt]

For Angular, you need to provide the RavenConfig variable. See: #235

If those instructions work for you, I'll add those into our docs.

For everything else, it should get monkey patched and magic will happen.

[pratik60]

I like monkey patched!

Slightly confused, so I now have two places where I basically set up the app....One for native javascript, then another for angular so Raven Angular Script can hook onto it?

Yes, lets update the docs....Examples always help

[mattrobenolt]

If you're using angular, you'd only need to configure it through the angular hook. You wouldn't need to call Raven.config(...).install() yourself.

If you look at the source, the plugin will do that for you if you just provide RavenConfig: https://github.com/getsentry/raven-js/blob/master/plugins/angular.js#L25

But to be honest, I know very little about angular personally, which is why I'm not 100% sure how this works. :)

[pratik60]

@mattrobenolt => Hey Matt and others

If you want to catch ajax errors, you gotta do this as well

$(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
    Raven.captureMessage(
        thrownError || jqXHR.statusText,
        {
            extra: {
                type: ajaxSettings.type,
                url: ajaxSettings.url,
                data: ajaxSettings.data,
                status: jqXHR.status,
                error: thrownError || jqXHR.statusText,
                response: jqXHR.responseText.substring(0, 100)
            }
        }
    );
});

https://github.com/getsentry/raven-js/pull/204/files

I was just looking around, and in the plugins - jquery file

I see this

var _oldAjax = $.ajax;
$.ajax = function ravenAjaxWrapper(url, options) {
  ...
  ...
})

Would really have thought that jquery plugin would have done the magic (monkey patching), but it was the pull request which did the job for me.

[mattrobenolt]

So some clarification on the difference:

We monkey patch to catch actual exceptions raised from your code. Catching these things from XHR responses aren't exceptions, they're semantic meaning applied to the response code of the http response.

What that response code means to you, is different to others. So to uniformly catch them, I think is incorrect. For example, jQuery reports anything not a 2xx as an error. I don't think every single 400 or 404 or 403 or 503, etc should be reported automatically.

Like I said, in #204, we could absolutely do this, but it'd have to be an opt-in thing.

[pratik60]

@mattrobenolt Gotcha, would be a good optional settings though. I think I might take a shot at sending a PR for this. Thanks :-)