Get the full call stack trace of $http calls

All we need is an easy explanation of the problem, so here it is.

Let’s say someone wrote a method like this in a file called app.js trying to peform an XHR request angainst a non existing url:

app.controller('MainCtrl', function($scope,$http) {
  $scope.send = function() {

I can see an error regarding URL in console and network panel :

error in console

To debug this I want to find quickly where this XHR call was made in sources (ie find the app.js file) :

So I enable in chrome dev tools :

  • async debug in call stack
  • debug any XHR

Debugger actually stops on XHR request, but the call stack only displays references to angular.js “core” files : no reference to app.js anywhere to be found.

google chrome call stack

I tried this with chromium 36 and chrome 35. Only solution : search for the wrong URL in the whole code base (which in some case may be hard to do).

  • Isn’t the async debug mode supposed to point to app.js somwhere in the stack ?
  • Is there a way to track down this app.js file easily from the console error ?

With vanilla XHR requests (ie without angular), XHR debug call stack displays the XHR call in app.js (which is easier to debug in this case) :

enter image description here

Full example here :

[EDIT] As i’ve been asked : Angular.js is not minified in my tests.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

So, you see, this issue is mostly because angular’s $http sucks. Sorry about that.

Let’s try to use the bluebird library, because it provides long stack traces.


You get the following stack trace:

Possibly unhandled Error: [object Object]
    at Promise$_rejectFromThenable (
    at wrappedErrback (
    at wrappedErrback (
    at wrappedErrback (
    at Scope.$eval (
    at Scope.$digest (
    at Scope.$apply (
    at done (
    at completeRequest ( 

(Plunker here.)

The most important line is the first: Possibly unhandled Error: [object Object].

Yep. An object is thrown, not a real Error object, with the stack property attached to it. For the reference, here is how to throw an error and keep its stack along with it:

So, how to fix this? It depends on several decisions:

  • Do you want to add a proper Promise lib that enables long stack traces?
  • Do you want to use another xhr lib that throws correct errors?

If you want to add a real Promise lib, use bluebird. AFAIK, it is one of the few that provides long stack traces, and it is the fastest one out there.

For a proper xhr lib that throws real errors, I’m afraid you’re out of luck there. Writing a custom one with the support for browsers you want isn’t really hard though. With no IE8 support, this works (with bluebird):

function xhr(url) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
        xhr.onerror = reject;'GET', url);

(Plunker here.)

As you can see, the stack trace is informative:

correct stack trace

Method 2

XHR requests are stacked in $http.pendingRequests array and are send later. Which is why you can’t find a direct linked between where $http is called and where the actual XHR request is made.

If you want to know which function called $http you have to set a breakpoint in $http function.

It kinds of defeat the whole “XHR breakpoints” purpose in my opinion.

Method 3

One option that came in my mind is to create a module for $http debugging that you can add it as a dependency in your main module whenever you need to debug $http calls. There a decorator for the $http service can be registered that will simply log the arguments of the call a forward it to the $http service. There a breakpoint can be set too.

I have created a simple working example here. I hope it will help.

Example $http logger decorator implementation:

var httpDebugging = angular.module('http-debugging', []);

httpDebugging.decorator('$http', function ($delegate) {
  var debugAware = function (fnCallback) {
    return function () {
        var result = fnCallback.apply(this, arguments);    
        console.log('$http decorator: ', arguments);
        return result;

  for(var prop in $delegate) {
    if (angular.isFunction($delegate[prop])) {
        $delegate[prop] = debugAware($delegate[prop]);

  return $delegate;

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply