勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

javascriptでのエラーログ

   2014/07/02  JavaScript

PHPでのエラーログ取りが思いのほか便利だったので
JSについても簡単にログ取りできないか探したところ、
お手軽な方法があった。

■index.php
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
window.onerror = function( errorMsg, url, lineNumber ) {
$.ajax({
url:"./error_dump.php",
data:{errorMsg:errorMsg, url:url, lineNumber:lineNumber},
type:"post"
});
};
</script>
<title>errorlog</title>
</head>
<body>
<h1>errorlog</h1>
<input type="button" value="error!" onClick="error_test();">
</body>
</html>

■error_dump.php
<?php
extract($_POST);
$file = "./error.log";
echo 1;
if ($errorMsg && $errorMsg && $lineNumber) {
$error_body = "
[errorMsg]
" . $errorMsg . "
[url]
" . $url . "
[lineNumber]
" . $lineNumber . "
--------------------
";
file_put_contents($file, $error_body, FILE_APPEND | LOCK_EX);
}
?>

■参考サイト
http://qiita.com/items/0c0e843d16e494fdd621

■その他
index.phpのボタンを押すとerror_test()なんて関数は無いので
エラーが走る。

window.onerrorでエラーを取得する。

※参考サイト
http://www.openspc2.org/JavaScript/ref/window/onerror.htm

エラーを取得したらajaxでerror_dump.php
エラーメッセージとファイル名、エラー発生行数を投げる。

受け取ったものをerror.logに追記する。

file_put_contents($file, $error_body, FILE_APPEND | LOCK_EX);

※リファレンス
http://php.net/manual/ja/function.file-put-contents.php

・FILE_APPEND
filename がすでに存在する場合に、データをファイルに上書きするするのではなく追記します。
これつけないと上書きされてしまう。

・LOCK_EX
書き込み処理中に、ファイルに対する排他ロックを確保します。

 - JavaScript

  関連記事

Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)

Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

JavaScriptで連想配列を数値の降順でソートする方法

JavaScriptで連想配列を数値の降順でソートしたかったんだけど、色々調べて ...

jQueryのloadメソッドでファイル(ページ)を呼び出す

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...

ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法

CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...