2011-11-03 13 views
12

javascriptでキャッチされない例外とブラウザの警告のハンドラを作成しようとしています。すべてのエラーと警告は、後で検討するためにサーバーに送信する必要があります。 JavaScriptでコンソールイベントを聴く方法はありますか?

取扱例外は、それらがjavascriptのコードから呼び出されるのであれば、彼らは未処理の例外がでキャッチすることができ、さらに、問題ではありませんキャッチされ、簡単に

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

または

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

でログインすることができ

このコードの平和:

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

例外はかなりcovです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( '');返信_error(メッセージ); '等 –

0

をあなたがにconsole.log()を行うために使用している同じ機能では、単にあなたが上のログを記録しているWebサービスに同じメッセージを投稿します。

+0

オプションは、それは高価なものですが、ページに100のエラーと警告がある場合、私はそれぞれのAjaxリクエストに対して行うべきでしょうか?そうではないと思います –

+0

@MilanJaric、あなたの反対はありませんセンス。コンソールの出力をキャプチャしている場合は、100回のAJAX呼び出しを行います。 –

+0

いいえ1つの変数(オブジェクト)に保持しています。ユーザーがページを離れようとしているときに、バックエンドにデータがポストされます。 –

0

あなたはこれを後ろ向きにしています。代わりにエラーが記録されたときに遮断する、エラー処理機構の一部として、イベントをトリガし、イベントリスナーの1つとしてそれをログ:このコードは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

もっと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; 
関連する問題