如何拦截 AngularJS $http 日志以显示在页面中答案

【问题标题】：How to intercept AngularJS $http logging for display in page如何拦截 AngularJS $http 日志以显示在页面中
【发布时间】：2013-07-01 03:35:48
【问题描述】：

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

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

我试过这个Showing console errors and alerts in a div inside the page，但它不会拦截 Angular 错误消息。

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

【问题讨论】：

标签： angularjs

【解决方案1】：

我猜你尝试的答案有正确的想法，但你覆盖了错误的方法。 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);             
}

【讨论】：

是的，我也读过。但麻烦在于“类似”。我尝试在应用程序的 .run 方法中注入 $log。但它不起作用。
在js文件上多花点时间，这个应该可以了！
看起来很有希望！我设法通过注入$log 并覆盖error 使其工作。但是：$http 写入控制台的错误（见截图）不会以这种方式被截获。
已经很晚了，但我相信这可以通过使用装饰器扩展 $log 来解决。

【解决方案2】：

我为此使用了log4javascript。我通过

创建日志对象

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

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

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

【讨论】：

这看起来是满足您自己的日志记录需求的绝佳解决方案。但这并不能回答我的问题。我想捕获 AngularJS 本身转储到 console.log 的错误消息。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：