2011-11-03 240 views
12

我想在javascript中为未捕获的异常和浏览器警告编写处理程序。所有的错误和警告都应该发送到服务器以供以后查看。有没有在JavaScript中监听控制台事件的方法?

处理的异常可以被捕获并与

console.error("Error: ..."); 

console.warn("Warning: ..."); 

所以他们都没有问题,很容易登录,如果他们是从javascript代码,甚至更多,未处理的异常可能与抓称为这和平的代码:

window.onerror = function(){ 
    // add to errors Stack trace etc. 
    }); 
} 

所以异常是相当cov但我坚持警告哪些浏览器发送到控制台。例如安全或HTML验证警告。下面的例子是从谷歌浏览器的控制台采取

上的网页https://domainname.com/http://domainname.com/javascripts/codex/MANIFEST.js跑不安全内容。

如果有一些像window.onerror这样的事件,但是对于警告,那将会很棒。有什么想法吗?

+0

我想知道同样的事情。记录负面的资源请求结果也会很好。 :) – SimplGy

回答

12

你可以自己包装console方法。例如,为了记录阵列中的每个呼叫:

var logOfConsole = []; 

var _log = console.log, 
    _warn = console.warn, 
    _error = console.error; 

console.log = function() { 
    logOfConsole.push({method: 'log', arguments: arguments}); 
    return _log.apply(console, arguments); 
}; 

console.warn = function() { 
    logOfConsole.push({method: 'warn', arguments: arguments}); 
    return _warn.apply(console, arguments); 
}; 

console.error = function() { 
    logOfConsole.push({method: 'error', arguments: arguments}); 
    return _error.apply(console, arguments); 
}; 
+2

我在想这个,但它不适用于我的一些期望,例如,当一切都加载到安全页面时,当一些不安全的内容被加载时,我会得到很多警告,这来自浏览器,而不是JavaScript代码。另外我想覆盖愚蠢的IE浏览器(这就是为什么这到我脑海)和控制台是不明确的那里。无论如何,你从我的投票:) –

+0

对于IE使用'var message = Array。prototype.slice.apply(arguments).join('');返回_error(消息);'等 –

0

在您使用做的console.log()相同的功能,简单地张贴同样的消息到您在记录日志的网络服务。

+0

不是选项,它是昂贵的,如果页面有100个错误和警告,我应该为每个Ajax请求,我不这么认为 –

+0

@MilanJaric,你的反对使得不感。如果您捕获控制台输出,您仍然可以进行100次AJAX调用。 –

+0

不,我将它保存在一个变量(对象)中,当用户即将离开页面时,它会将数据发布到后端。 –

0

你正在倒退。相反,拦截记录错误时,触发事件为错误处理机制的一部分,并将其记录作为一个事件侦听器:

try 
{ 
    //might throw an exception 
    foo(); 
} 
catch (e) 
{ 
    $(document).trigger('customerror', e); 
} 

function customErrorHandler(event, ex) 
{ 
    console.error(ex) 
} 
function customErrorHandler2(event, ex) 
{ 
    $.post(url, ex); 
} 

这个代码使用jQuery和严格过于简单用作例子。

+0

jQuery不是选项,如果它无法加载:) –

+0

@MilanJaric,那么如果你的错误处理代码无法加载呢?如果您的AJAX日志数据库调用失败会怎么样? –

+0

它不会,如果它在页面里'' –

2

更多Succint方式:

// this method will proxy your custom method with the original one 
 
function proxy(context, method, message) { 
 
    return function() { 
 
    method.apply(context, [message].concat(Array.prototype.slice.apply(arguments))) 
 
    } 
 
} 
 

 
// let's do the actual proxying over originals 
 
console.log = proxy(console, console.log, 'Log:') 
 
console.error = proxy(console, console.error, 'Error:') 
 
console.warn = proxy(console, console.warn, 'Warning:') 
 

 
// let's test 
 
console.log('im from console.log', 1, 2, 3); 
 
console.error('im from console.error', 1, 2, 3); 
 
console.warn('im from console.warn', 1, 2, 3);

0

我知道这是一个老的文章,但它可能是有用的反正作为其他的解决方案是不支持旧版本的浏览器兼容。

你可以重新定义的每个功能控制台(和所有浏览器)这样的行为:

// define a new console 
var console = (function(oldCons){ 
    return { 
     log: function(text){ 
      oldCons.log(text); 
      // Your code 
     }, 
     info: function (text) { 
      oldCons.info(text); 
      // Your code 
     }, 
     warn: function (text) { 
      oldCons.warn(text); 
      // Your code 
     }, 
     error: function (text) { 
      oldCons.error(text); 
      // Your code 
     } 
    }; 
}(window.console)); 

//Then redefine the old console 
window.console = console; 
相关问题