Come intercettare la registrazione http AngularJS $ per la visualizzazione nella pagina

Question

Desidero intercettare il messaggio di log della console da AngularJS e visualizzarli in un div sulla pagina. Ne ho bisogno per eseguire il debug del traffico Ajax in un'app PhoneGap.

Questo è un esempio del tipo di errori che voglio catturare:

ho provato questo Showing console errors and alerts in a div inside the page ma che non intercetta i messaggi di errore angolare.

Ho anche provato la soluzione di gameover suggerita nelle risposte. Niente affatto. Apparentemente $ http sta gestendo la registrazione degli errori in modo diverso.

Answer 1

Ho usato log4javascript per questo scopo. Creo l'oggetto registro tramite

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

allora uso questo in una dipendenza value e aggancio in esso dove necessario (per esempio http intercettore).

Un approccio più leggero potrebbe essere quello di utilizzare $rootScope.emit e quindi disporre di un componente nella pagina principale che antepone questi messaggi di registro a un div visibile, ma ciò richiederà la modifica di tutte le chiamate su console.log (o ridefinire il numero funzione nel tuo js).

Answer 2

Immagino che la risposta che hai provato abbia l'idea giusta ma stai ignorando i metodi sbagliati. Reading here Posso vedere che angularJs usa $log invece di console.log, quindi per intercettarlo puoi provare a sovrascriverli.

Qualcosa di simile a questo:

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

Assicurarsi di eseguire che dopo l'importazione angular.js.

EDIT

indovinare, l'override del metodo consoleLog sulla classe interna LogProvider su angular.js del 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);    
} 

Answer 3

Penso che questo messaggio non è nemmeno visualizzata da AngularJS. Sembra un'eccezione che non è stata rilevata in alcun JavaScript (angular.js appare solo in cima allo stack perché è la posizione effettiva in cui viene inviata la richiesta HTTP).

Dai uno sguardo allo ng.$exceptionHandler. Questo dovrebbe essere il codice a cui sembri essere interessato. In caso contrario, esegui una rapida ricerca sul Web per "JavaScript onerror" che dovrebbe indicarti come controllare questi tipi di errori.

Answer 4

Preferisco usare un $ http interceptor. All'interno della funzione responseError, è possibile impostare una proprietà su un servizio che verrà esposto all'ambito div.