5

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:

enter image description here

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.

Community
  • 1
  • 1
Kees de Kooter
  • 7,078
  • 5
  • 38
  • 45

4 Answers4

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);             
}
LuckyStarr
  • 1,468
  • 2
  • 26
  • 39
caiocpricci2
  • 7,714
  • 10
  • 56
  • 88
  • Yes I read that too. But the trouble is in the "Something like". I tried injecting `$log` in the .`run` method of the app. But it is not working. – Kees de Kooter Jul 04 '13 at 13:45
  • Spent a little more time on the js file, this should do it! – caiocpricci2 Jul 04 '13 at 14:02
  • Looks promising! I managed to make it work by injecting `$log` and overriding `error`. However: the errors `$http` writes to the console (see screenshot) are not intercepted this way. – Kees de Kooter Jul 04 '13 at 20:25
  • It's pretty late but i believe this can be solved by using a decorator to extend $log. – Nilesh Feb 14 '14 at 06:32
0

I've used log4javascript for this purpose. I create the log object via 

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

I then use this in a value dependency, and hook into it where needed (e.g. http interceptor).

A more lightweight approach might be to use $rootScope.emit and then have a component on your main page which prepends these log messages to a visible div, but this will require you to change all your calls to console.log (or redefine the function in your js).

Kees de Kooter
  • 7,078
  • 5
  • 38
  • 45
leon.io
  • 2,779
  • 1
  • 18
  • 26
  • This looks like a great solution for your own logging requirements. But that does not answer my question. I want to capture the error message AngularJS itself dumps to console.log. – Kees de Kooter Jul 04 '13 at 08:10
0

I think that this message is not even displayed from AngularJS. It looks like an exception which has not been caught in any JavaScript (angular.js just appears on top of your stack because that's the actual location where the HTTP request is being sent).

Take a look at ng.$exceptionHandler. That should be the code you seem to be interested in. If not, take a quick web search for „JavaScript onerror“ which should tell you how to watch for these kinds of errors.

herzi
  • 774
  • 6
  • 18
0

I would rather user an $http interceptor. Inside the responseError function, you can set a property on a service that will be exposed to the div's scope.

Florian F
  • 8,822
  • 4
  • 37
  • 50