MiniProfiler and AngularJS

Question

Recently I was trying to profile ASP MVC methods called with AngularJS $http service and I noticed that MiniProfiler does not update the data as it does for AJAX calls from JQuery, for example.

Is there a way to use MiniProfiler with Angular ?

Dionysiac

How is the MVC endpoint that handles jQuery different than the one issued by AngularJS? More details on the MVC implementation of the two may help you get an answer here – Wayless

Since you are not having trouble profiling request from jQuery then you should not have any problem for $http from Angular also. There is a very good chance that your request from Angular is not being fired or being blocked for some reason and cannot get to the actions. Check out Network tab on a browser or fiddler to inspect the request. – Dorcy

Thank you for your answers! JQuery was an example. I am not using it along with Angular, but I had used the MiniProfiler to profile requests that are using ajax calls from JQuery and everything works as expected, but this isn't the case when Angular is involved. @Ibrahim, yes checking the Network tab was one of the first things I did and the requests are firing as expected and the responses are also fine. I also think that is shouldn't make any difference if JQuery ajax calls or $http service is used. – Dionysiac

Answer 1

This issue was addressed with this pull request and has been fixed in the current MiniProfiler nuger.

Crosslet

I still can't get it working on Angular. Please help github.com/SeanKilleen/seankilleen.github.io/issues/… – Karlsbad

Answer 2

Adjustment needed for Angular (1.3.10)

(not needed if you are using another library for your XHR-needs)

MiniProfiler does this to XMLHttpRequest to be able to intercept all XHR-calls for angular

XMLHttpRequest.prototype.send = function sendReplacement(data) {
   if (this.onreadystatechange) {
    ...

Well, Angular never sets xhr.onreadystatechange so we need to adjust this in a harmless way:

function createXhr() {
   var xhr = new window.XMLHttpRequest();
   xhr.onreadystatechange = function () { };
   return xhr;
}

Explained in detail here

Widner

@Jeraya: Where did you place the createXhr() function? – Poultice