javascript - 获取 $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(在某些情况下可能很难做到)。

异步 Debug模式不应该指向app.js吗？在堆栈的某个地方？

有没有办法追踪到这个 app.js从控制台错误轻松归档？

使用 vanilla XHR 请求(即没有 Angular )，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附在其上的属性(property)。作为引用，这里是如何抛出一个错误并保持它的堆栈: 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。)

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