2011-11-03 2 views
12

자바 스크립트에서 잡히지 않는 예외 및 브라우저 경고 처리기를 작성하려고합니다. 나중에 검토 할 수 있도록 모든 오류 및 경고를 서버에 보내야합니다.자바 스크립트에서 콘솔 이벤트를 수신하는 방법이 있습니까?

취급 예외가 잡힌 그들이 자바 스크립트 코드, 더, 처리되지 않은 예외가 잡히면 수에서 호출하는 경우 쉽게

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

정도

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

가 문제가되지 않습니다

으로 기록 할 수 있습니다 코드의 평화 :

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

예외가 꽤 있습니다. ered하지만 브라우저에서 콘솔로 보내는 경고가 붙어 있습니다. 예를 들어 보안 또는 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 (''); return _error (message);'등 –

0

을 당신을 console.log()를 수행하는 데 사용하는 동일한 기능에, 단순히 당신이에 로그를 기록하는 웹 서비스에 같은 메시지를 게시 .

+0

옵션이 없다면 값 비싼 것입니다. 페이지에 100 개의 오류 및 경고가 있으면 각 아약스 요청마다 작성해야합니다. 그렇게 생각하지 않습니다. –

+0

@MilanJaric, 귀하의 이의 제기는 없습니다. 감각. 콘솔 출력을 캡쳐하고 있다면, 여전히 100 건의 AJAX 호출을하고있을 것입니다. –

+0

아니요 하나의 변수 (객체)에 보관하고 있으며 사용자가 페이지를 떠날 때 백엔드에 데이터를 게시합니다. –

0

당신은 이것에 대해 거꾸로 갈 것입니다. 대신에 오류가 기록 될 때 가로채는, 에러 처리 메커니즘의 일부로서 이벤트를 트리거 할 이벤트 리스너의 하나로 로그인이 코드 jQuery를 사용하며, 예를 들어 사용하기 위해 엄격하게 과도하게 단순화된다

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

.

+0

jQuery는 옵션이 아닙니다.로드에 실패하면 어떻게됩니까? –

+0

@MilanJaric, 오류 처리 코드가로드되지 않으면 어떻게됩니까? AJAX-log-to-database 호출에 실패하면 어떻게 될까요? –

+0

내부 페이지가 '

2

더 간결 방법 :

// 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; 
관련 문제