$http 호출의 전체 호출 스택 추적 가져오기

$http 호출의 전체 호출 스택 추적 가져오기

어떤 사람이 이런 방법을 파일에 썼다고 치자.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파일) :

그래서 크롬 개발 도구를 활성화합니다.

• 호출 스택의 비동기 디버그
• 임의 XHR 디버그

디버거는 실제로 XHR 요청 시 중지되지만 호출 스택은 angular.js "core" 파일에 대한 참조만 표시합니다. app.js 어디든 찾을 수 있습니다.

크롬 36과 크롬 35로 해봤습니다.유일한 해결책 : 전체 코드 베이스에서 잘못된 URL을 검색합니다(경우에 따라서는 어려울 수 있음).

• 비동기 디버그 모드는 다음을 가리키게 되어 있지 않습니까?app.js그 더미 어디쯤?
• 이것을 추적할 방법이 있나요?app.js콘솔 오류로부터 쉽게 파일을 만들 수 있습니까?

바닐라 XHR 요청(즉, 각도가 없는)으로, XHR 디버그 콜 스택은 XHR 콜 인을 표시합니다.app.js(이 경우 디버그가 더 쉽습니다):

여기에 전체 예시: http://plnkr.co/edit/lnCRpv?p=preview

[EDIT] 질문 받은 대로: Angular.js는 내 테스트에서 축소되지 않습니다.

아시다시피, 이 문제는 대부분 angular의 $http 때문입니다.미안해요.

파랑새 라이브러리는 긴 스택 트레이스를 제공하므로 사용해 보겠습니다.

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) 

(여기서 꽝!)

가장 중요한 줄은 첫 번째 줄입니다.Possibly unhandled Error: [object Object].

네, 물건은 던져져요 진짜가 아니라Error오브젝트, 및stack부속 재산참고로, 다음은 오류를 던지고 그 오류와 함께 스택을 유지하는 방법입니다. https://github.com/Ralt/newerror/blob/master/index.js

그럼 어떻게 고쳐야 할까요?다음과 같은 몇 가지 결정에 따라 달라집니다.

• 긴 스택 트레이스를 사용할 수 있는 적절한 Promise lib을 추가하시겠습니까?
• 오류를 수정하는 다른 xhrlib을 사용하시겠습니까?

진짜 Promise lib을 추가하려면 bluebird를 사용합니다.AFAIK, 긴 스택 트레이스를 제공하는 몇 안 되는 제품 중 하나이며, 가장 빠른 제품입니다.

진짜 오류를 던지는 제대로 된 xhrlib의 경우, 당신은 거기서 운이 없는 것 같습니다.원하는 브라우저를 지원하는 맞춤형 문서를 작성하는 것은 그리 어렵지 않습니다.IE8이 지원되지 않는 경우 다음과 같이 작동합니다(파랑새의 경우).

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

(여기서 꽝!)

보다시피 스택 트레이스는 유용합니다.

은 XHR 은 에 에 쌓여 있습니다.$http.pendingRequests배열하고 나중에 전송합니다.그렇기 때문에 당신은 어디가 어디인지 직접적인 연결고리를 찾을 수 없는 것입니다.$http가 호출되고 실제 XHR 요청이 수행되는 곳입니다.

어떤 기능이 호출되었는지 알고 싶다면$http당신은 당신에게 휴식점을 마련해야 합니다.$http기능.

제 생각에는 XHR 브레이크 포인트(breakpoints)의 목적을 완전히 무찌른 것 같습니다.

한 가지 생각나는 옵션은 $http 디버깅을 위한 모듈을 만들어서 $http 호출을 디버깅해야 할 때마다 메인 모듈에 종속성으로 추가할 수 있습니다.$http 서비스를 위한 데코레이터를 등록할 수 있으며, 단순히 호출의 인수를 $http 서비스에 기록할 수 있습니다.중단점도 설정할 수 있습니다.

여기서 간단한 작업 예시를 만들었습니다.도움이 되었으면 좋겠습니다.

$http logger 데코레이터 구현 예:

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

언급URL : https://stackoverflow.com/questions/24364703/get-the-full-call-stack-trace-of-http-calls