如何攔截AngularJS $ http日誌以顯示在頁面

我想攔截AngularJS的控制檯日誌消息並將它們顯示在頁面上的div中。我需要這個以調試PhoneGap應用程序中的ajax流量。

這是我想捕捉的那種錯誤的例子：

enter image description here

我想這Showing console errors and alerts in a div inside the page但是，這並不攔截角的錯誤消息。

我也嘗試了答案中提出的解決方案gameover。沒有那個運氣。顯然$ http處理錯誤記錄的方式不同。

2013-07-03 Kees de Kooter

我爲此使用了log4javascript。我創建經由

var log = log4javascript.getLogger('myApp') 
log.addAppender(new log4javascript.InPageAppender());

日誌對象我然後在value依賴性利用這一點，並鉤到它在需要的地方（例如http攔截器）。

一個更輕量級的方法可能是使用$rootScope.emit，然後在主頁面上有一個組件，它將這些日誌消息預先設置爲可見div，但這需要您將所有調用更改爲console.log（或重新定義功能在你的js）。

來源

2013-07-03 13:06:12 leon

這看起來像是您自己的日誌記錄要求的絕佳解決方案。但是這並不能回答我的問題。我想捕獲錯誤消息AngularJS本身轉儲到console.log。 –

我想你試過的答案有正確的想法，但你重寫錯誤的方法。 Reading here我可以看到angularJs使用$log而不是console.log，所以攔截你可以嘗試重寫這些。

事情是這樣的：

$scope.$log = { 
     error: function(msg){document.getElementById("logger").innerHTML(msg)}, 
     info: function(msg){document.getElementById("logger").innerHTML(msg)}, 
     log: function(msg){document.getElementById("logger").innerHTML(msg)}, 
     warn: function(msg){document.getElementById("logger").innerHTML(msg)} 
    }

確保運行導入angular.js後。

編輯

其次猜測，凌駕於angular.js文件上LogProvider內部類的consoleLog方法：

function consoleLog(type) { 
    var output =""; 
    //arguments array, you'll need to change this accordingly if you want to 
    //log arrays, objects etc      
    forEach(arguments, function(arg) { 
    output+= arg +" "; 
    }); 
    document.getElementById("logger").innerHTML(output);    
}

來源

2013-07-04 13:17:55 caiocpricci2

是的，我也讀過。但麻煩在於「類似的東西」。我嘗試在應用程序的.'run'方法中注入'$ log'。但它不起作用。 –

在js文件上多花點時間，應該這樣做！ – caiocpricci2

看起來很有希望！我設法通過注入'$ log'和重寫'error'來實現它。然而：錯誤'$ http'寫入控制檯（見屏幕截圖）不會被這種方式攔截。 –

我認爲這個消息甚至不AngularJS顯示。它看起來像一個沒有被任何JavaScript捕獲的異常（angular.js只出現在堆棧頂部，因爲這是發送HTTP請求的實際位置）。請參閱ng.$exceptionHandler。這應該是你似乎感興趣的代碼。如果沒有，請快速搜索「JavaScript onerror」，它應該告訴你如何注意這些類型的錯誤。

來源

2013-09-14 23:33:16

我寧願使用$ http interceptor。在responseError函數中，您可以在將暴露給div範圍的服務上設置屬性。

來源

2013-11-06 16:44:32

如何攔截AngularJS $ http日誌以顯示在頁面

回答

相關問題