angularjs - 如何拦截 AngularJS $http 日志记录以在页面中显示

Question

我想拦截来自 AngularJS 的控制台日志消息并将它们显示在页面上的 div 中。我需要这个来调试 PhoneGap 应用程序中的 ajax 流量。

这是我要捕获的错误类型的示例：

我尝试了在页面内的 div 中显示控制台错误和警报，但这不会拦截 Angular 错误消息。

我还尝试了答案中建议的解决方案gameover。也没有运气。显然 $http 处理错误日志的方式不同。

Answer 1

我猜你尝试的答案有正确的想法，但你覆盖了错误的方法。在这里阅读我可以看到 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。

编辑

第二种猜测，覆盖文件consoleLog上LogProvider内部类的方法angular.js：

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 2

我宁愿使用 $http拦截器。在 responseError 函数中，您可以在服务上设置一个属性，该属性将暴露给 div 的范围。

Answer 3

为此，我使用了 log4javascript。我通过创建日志对象

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

然后我在value依赖项中使用它，并在需要的地方挂接到它（例如http拦截器）。

一种更轻量级的方法可能是使用$rootScope.emit然后在您的主页上有一个组件，它将这些日志消息添加到可见的 div 中，但这将需要您更改对 console.log 的所有调用（或重新定义 js 中的函数） .

Answer 4

我认为这个消息甚至不会从 AngularJS 中显示出来。它看起来像是一个没有在任何 JavaScript 中捕获的异常（angular.js 只是出现在您的堆栈顶部，因为那是发送 HTTP 请求的实际位置）。

看看ng.$exceptionHandler。那应该是您似乎感兴趣的代码。如果没有，请在网络上快速搜索“JavaScript onerror”，它应该会告诉您如何注意这些类型的错误。