$ से भरा कॉल स्टैक ट्रेस जाओ http कॉल

Question

मान लीजिए कि कोई इस तरह की एक विधि लिखा एक फ़ाइल में चलो कहा जाता app.js एक गैर मौजूदा यूआरएल angainst एक XHR अनुरोध peform की कोशिश कर रहा:

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

मैं एक त्रुटि देख सकते हैं कंसोल और नेटवर्क पैनल में URL http://run.plnkr.co/thisis404 के बारे में:

इस मैं जल्दी पता लगाने के लिए जहां इस एक्सएचआर कॉल स्रोतों में बनाया गया था चाहते हैं डिबग करने के लिए (यानी app.js फ़ाइल खोजने):

तो मैं क्रोम देव उपकरणों में सक्षम: कॉल स्टैक में

• async डिबग
• डिबग किसी भी एक्सएचआर

डीबगर वास्तव में एक्सएचआर अनुरोध पर बंद हो जाता है, लेकिन कॉल स्टैक केवल के लिए संदर्भ को प्रदर्शित करता है angular.js "कोर" फ़ाइलें: app.jsपर कोई संदर्भ नहीं पाया जा सकता है।

मैं क्रोमियम 36 और क्रोम 35. केवल समाधान के साथ इस की कोशिश की: पूरे कोड बेस में गलत URL (जो कुछ मामले में क्या करने के लिए कठिन हो सकता है) के लिए खोज।

• क्या एसिंक डीबग मोड स्टैक में कहीं भी app.js पर इंगित करना चाहिए?
• क्या इस app.js फ़ाइल को आसानी से कंसोल त्रुटि से ट्रैक करने का कोई तरीका है?

वेनिला एक्सएचआर अनुरोध के साथ

(यानी बिना कोणीय), एक्सएचआर डिबग कॉल स्टैक app.js में एक्सएचआर कॉल (जो डिबग करने के लिए आसान है, इस मामले में) प्रदर्शित करता है:

पूर्ण उदाहरण यहाँ: http://plnkr.co/edit/lnCRpv?p=preview

[संपादित करें] जैसा कि मुझसे पूछा गया है: Angular.js मेरे परीक्षणों में छोटा नहीं है।

Answer 1

तो, आप देखते हैं, यह समस्या ज्यादातर इसलिए है क्योंकि कोणीय का $ http बेकार है। उसके लिए माफ़ करना।

चलो ब्लूबर्ड लाइब्रेरी का उपयोग करने का प्रयास करें, क्योंकि यह लंबे ढेर निशान प्रदान करता है।

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

आप निम्न स्टैक ट्रेस मिलती है: (। Plunker here)

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]।

हाँ। stack संपत्ति से जुड़ी संपत्ति के साथ वास्तविक वस्तु Error ऑब्जेक्ट नहीं है। संदर्भ के लिए, यहां एक त्रुटि फेंकना है और इसके साथ अपना ढेर रखना है: https://github.com/Ralt/newerror/blob/master/index.js

तो, इसे कैसे ठीक करें? यह कई निर्णयों पर निर्भर करता है:

• क्या आप एक उचित वादा लिब जोड़ना चाहते हैं जो लंबे ढेर निशान को सक्षम बनाता है?
• क्या आप एक और xhr lib का उपयोग करना चाहते हैं जो सही त्रुटियों को फेंकता है?

यदि आप असली वादा lib जोड़ना चाहते हैं, तो bluebird का उपयोग करें। AFAIK, यह उन कुछ लोगों में से एक है जो लंबे ढेर निशान प्रदान करते हैं, और यह वहां सबसे तेज़ है।

एक वास्तविक xhr lib के लिए जो वास्तविक त्रुटियों को फेंकता है, मुझे डर है कि आप वहां भाग्य से बाहर हैं। आपके इच्छित ब्राउज़रों के समर्थन के साथ एक कस्टम लिखना वास्तव में कठिन नहीं है। कोई 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

एक्सएचआर अनुरोध $http.pendingRequests सरणी में ढेर हैं और बाद में भेज दिए जाते हैं। यही कारण है कि आप $http कहलाते हैं और जहां वास्तविक एक्सएचआर अनुरोध किया गया है, के बीच सीधा जुड़ाव नहीं मिल रहा है।

यदि आप जानना चाहते हैं कि $http नामक कौन सा फ़ंक्शन आपको $http फ़ंक्शन में ब्रेकपॉइंट सेट करना होगा।

यह मेरी राय में पूरे "एक्सएचआर ब्रेकपॉइंट्स" उद्देश्य को हर तरह की हार देता है।

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