获取 $http 调用的完整调用堆栈跟踪

Question

假设有人在名为 app.js 的文件中编写了这样的方法，试图针对不存在的 url 执行 XHR 请求：

app.controller('MainCtrl', function($scope,$http) {
  $scope.send = function() {
    $http.get('http://run.plnkr.co/thisIs404');
  };
});

我可以在控制台和网络面板中看到有关 URL http://run.plnkr.co/thisis404 的错误：

为了调试它，我想快速找到这个 XHR 调用在源代码中的位置（即找到 app.js 文件）：

所以我在 chrome 开发工具中启用：

• 调用堆栈中的异步调试
• 调试任何 XHR

调试器实际上在 XHR 请求时停止，但调用堆栈只显示对 angular.js “核心”文件的引用：没有引用 app.js 任何地方都可以找到 .

我用 chromium 36 和 chrome 35 尝试了这个。唯一的解决方案：在整个代码库中搜索错误的 URL（在某些情况下可能很难做到）。

• 异步调试模式不应该指向堆栈中的app.js somwhere 吗？
• 有没有办法从控制台错误中轻松追踪这个app.js 文件？

对于普通 XHR 请求（即没有角度），XHR 调试调用堆栈会在 app.js 中显示 XHR 调用（在这种情况下更容易调试）：

此处为完整示例：http://plnkr.co/edit/lnCRpv?p=preview

[编辑] 正如我被问到的那样：Angular.js 在我的测试中没有被缩小。

Answer 1

所以，你看，这个问题主要是因为 Angular 的 $http 很糟糕。对此感到抱歉。

让我们尝试使用 bluebird 库，因为它提供了长堆栈跟踪。

Promise.longStackTraces();
Promise.resolve($http.get('...'));

您会得到以下堆栈跟踪：

Possibly unhandled Error: [object Object]
    at Promise$_rejectFromThenable (http://cdn.jsdelivr.net/bluebird/1.2.4/bluebird.js:4736:52)
    at wrappedErrback (https://code.angularjs.org/1.3.0-beta.5/angular.js:11334:78)
    at wrappedErrback (https://code.angularjs.org/1.3.0-beta.5/angular.js:11334:78)
    at wrappedErrback (https://code.angularjs.org/1.3.0-beta.5/angular.js:11334:78)
    at https://code.angularjs.org/1.3.0-beta.5/angular.js:11467:76
    at Scope.$eval (https://code.angularjs.org/1.3.0-beta.5/angular.js:12418:28)
    at Scope.$digest (https://code.angularjs.org/1.3.0-beta.5/angular.js:12230:31)
    at Scope.$apply (https://code.angularjs.org/1.3.0-beta.5/angular.js:12522:24)
    at done (https://code.angularjs.org/1.3.0-beta.5/angular.js:8207:45)
    at completeRequest (https://code.angularjs.org/1.3.0-beta.5/angular.js:8412:7) 

(Plunker here.)

最重要的一行是第一行：Possibly unhandled Error: [object Object]。

是的。抛出一个对象，而不是真正的 Error 对象，并附加了 stack 属性。作为参考，这里是如何抛出错误并保持它的堆栈：https://github.com/Ralt/newerror/blob/master/index.js

那么，如何解决这个问题？这取决于几个决定：

• 您想添加一个适当的 Promise 库来启用长堆栈跟踪吗？
• 是否要使用另一个会引发正确错误的 xhr 库？

如果要添加真正的 Promise 库，请使用 bluebird。 AFAIK，它是提供长堆栈跟踪的少数几个之一，而且它是目前最快的。

对于一个会引发真正错误的正确 xhr 库，恐怕你在那里不走运。不过，编写一个支持您想要的浏览器的自定义版本并不难。在不支持 IE8 的情况下，这可以工作（使用 bluebird）：

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

(Plunker here.)

如您所见，堆栈跟踪信息丰富：

Answer 2

XHR 请求堆叠在$http.pendingRequests 数组中，稍后发送。这就是为什么在调用 $http 的位置和发出实际 XHR 请求的位置之间找不到直接联系的原因。

如果你想知道哪个函数调用了$http，你必须在$http函数中设置一个断点。

在我看来，这有点违背了整个“XHR 断点”的目的。

Answer 3

我想到的一个选项是创建一个用于 $http 调试的模块，您可以在需要调试 $http 调用时将其作为依赖项添加到主模块中。可以注册 $http 服务的装饰器，它将简单地记录调用的参数并将其转发到 $http 服务。也可以设置断点。

我创建了一个简单的工作示例here。我希望它会有所帮助。

$http 记录器装饰器实现示例：

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;
});