web-dev-qa-db-ja.com

JavaScriptにコンソールイベントをリッスンする方法はありますか？

キャッチされない例外とブラウザの警告のハンドラーをJavascriptで作成しようとしています。すべてのエラーと警告は、後で確認するためにサーバーに送信する必要があります。

処理された例外をキャッチして、簡単にログに記録できます。

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

または

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

したがって、JavaScriptコードから呼び出されても問題はありません。さらに、このコードの平和により、未処理の例外がキャッチされる可能性があります。

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

そのため、例外はかなりカバーされていますが、ブラウザがコンソールに送信する警告に固執しています。たとえば、セキュリティまたはHTML検証の警告。以下の例はGoogleから抜粋したものですChromeコンソール

https://domainname.com/ のページは http://domainname.com/javascripts/codex/MANIFEST.js から安全でないコンテンツを実行しました。

Window.onerrorのようなイベントがありますが、警告があると便利です。何かご意見は？

javascriptbrowsercross-browserdom-events
17
Milan Jaric

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);
};
18
Jeremy Banks

より簡潔な方法：

// 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);
7
Inanc Gumus

私はそれが古い投稿であることを知っていますが、他のソリューションは古いブラウザと互換性がないので、とにかく役立つ可能性があります。

次のように、コンソールの各関数（およびすべてのブラウザー）の動作を再定義できます。

// 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;
4
Ludovic Feltz

モバイルデバイスでコンソール出力をデバッグする必要があったため、このドロップインライブラリを構築して、コンソール出力とカテゴリをキャプチャし、ページにダンプしました。ソースコードを確認してください。非常に簡単です。

https://github.com/samsonradu/Consolify

1
Samson

Console.log（）を実行するために使用しているのと同じ関数で、ログを記録しているWebサービスに同じメッセージを投稿するだけです。

0
Joshua

あなたはこれについて逆行している。エラーがログに記録されたときにインターセプトする代わりに、エラー処理メカニズムの一部としてイベントをトリガーし、イベントリスナーの1つとしてログに記録します。

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
zzzzBov