How to intercept AngularJS $http logging for display in page

Question

I want to intercept console log message from AngularJS and display them in a div on the page. I need this in order to debug ajax traffic in a PhoneGap app.

This is an example of the kind of errors I want to capture:

I tried this Showing console errors and alerts in a div inside the page but that does not intercept Angular error messages.

I also tried the solution gameover suggested in the answers. No luck with that either. Apparently $http is handling error logging differently.

Answer 1

I guess the answer you tried has the right idea but you're overriding the wrong methods. Reading here I can see angularJs uses $log instead of console.log, so to intercept you can try to override those.

Something like this:

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

Make sure to run that after importing angular.js.

EDIT

Second guess, override the consoleLog method on the LogProvider inner class on angular.js file:

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