サイト内の未知のJavaScriptエラー 検出・調査・記録

JavaScriptを使用してるサイトでは製作・管理者は『エラーが出ないか？』を十分確認していると思います。 でも個人の場合は製作会社の様にあらゆるテスト環境があるわけでもなく、確認にも限界があります。
残念ながらJavaScriptはクライアントサイドスクリプトである以上、ビジターのPC・ネット・ブラウザの環境に大きく左右されます。

よくある確認の甘さとしては、ローカルでのテストはロード時間のタイムラグがほとんど無いので、時間がかかるケースの確認・対処が甘くなりがち。 また、サーバー上での確認も２度目からはキャッシュがあるので初めて訪れた人の状態とはちょっと違います。キャッシュを消しながら常に確認してもちょっとした変更で落とし穴を作ってしまったり。
それと、多いのが製作者は『こうしたらこうなる』『こうしなかったらどうする』という目的に沿った想定でテスト確認しますが、 『こうしなかったらどうなる？』に関しては自分の想定外の部分までは考えが及びませんし、必ず想定外は存在する物です。

自分の環境では起きないエラーを見つけるのはなかなか難しい事です。
そこでイベントハンドラ onerror を使ってエラー情報をCGI記録して、 『はたして訪問者はエラーを起こしていないのか？』を調査しエラーつぶしに役立てる為のJavaScriptとCGIの簡易サンプルです。

onerror を理解してくれないブラウザのエラーログは取れません。
とりあえず2大ブラウザのIEとFireFox、Netscapeで取れるので、これで最低限のチェックをしておこうと言う事です。

うちのサイトでもMac系ブラウザ(特にMac IE)や、擬似IEのSleipnir等ではエラーが出ています。 昔は友人に協力願って直してましたが、Mac系の問題は放置気味です(笑) 使う機会ないし。

---

配布スクリプト

---

Windows、Shift_JIS記述の JSファイルとCGI(PHP版とPerl版)が入っています。

---

使い方

---

■使い方

準備１
jserrorlog.jsをスクリプトタグで外部ファイルとして読み込むか、 jserrorlog.js内のスクリプトコードを自分のJavaScript内に書き込んでください。
このスクリプトが読み込まれる前に起きるエラーはキャプチャーできませんので、 できるだけあらゆるスクリプトより先に読み込ませてください。

エラー調査ですので、できるだけJavaScriptを記述してある全てのページで読み込ませるように外部ファイルで単独で読み込ませてしまったほうが良いと思います。 あるいはグローバル用JSファイルがあるならそこに記述してください。

準備２
スクリプト内の
var url = "http://・・・・・/jserrorlog.cgi"
に、記録用CGI(.cgi / .php)のパスをhttpからのフルURLで記入してください。
一箇所のページでしか使わない場合や、ディレクトリ構造が全て同階層であれば相対パスでも結構です。

準備３
CGIとログファイルを自分の設定した場所に置きます。
PHPを使う人は jserrorlog.php と jserrorlog.txt
PHPをCGIとして動かす人は、拡張子をcgiなどサーバー指定の物に変更し、 PHPパスを1行目に書き込む必要があります。

Perlを使う人は jserrorlog.cgi と jserrorlog.txt 。
1行目のperlのパスを多々しく設定してください。

perlのcgi、及びphpをCGIとして動かす場合はパーミッション設定を実行モード 755や705、700などサーバー指定にします。
ログファイル(jserrorlog.txt)は 666や606、600等のR/Wモードで。

以上で終わりです。

---

動作確認：
テストの為に自分のJavaScriptコードのどこかにエラーがでるように、 『あ』 とかを書き込んでページを表示させてJavaScriptエラーを故意に起こしてみてください。
jserrorlog.txtに記録ができていれば動作確認終了です。

記録されない場合
・JavaScriptに設定した記録CGIのパスは正しいか？
・エラーはこのスクリプト記述より後で起きているか？
・jserrorlog.cgi のパーミッションやphp、perlのパスはあってるか？
・ログファイルのパーミッションは書き込み許可になっているか？
等を調べてください。

記録CGIとログについて

---

CGIはデータを取る為だけに非常に単純にできています。

送信元チェックなども行っていませんので、CGIが外人のスパムターゲットになった場合は、 php、perl 共になんらかの対策をするか、しばらく削除して使うのをやめてしまいましょう。

記録内容は
msg:メッセージ
url:エラーが起きたファイル名
line:エラーの起きた行
agent:ブラウザ

が、タブ区切りでファイルになっています。
エラーメッセージの内容はIEのエラーの詳細やGecko系のエラーコンソールで出るメッセージ、ページ、行番号そのままです。 行番号は全体のコーディングの問題やエラーの質によっては的確な行数で無い場合も結構あります。 またIEの場合は外部JSファイルの場合でも、そのHTMLファイルの中での行番号として表示したりしますので、 メッセージなどを見て判断してください。

閲覧用CGIなどは用意していません。
まずエラーが出ないJavaScriptをテストをした上でサイトに使用して、 その上で自分の環境では出ない未知のエラーが訪問者に起きた場合にログをとる為の物です。 『通常はエラーログが書かれない』のが前提ですから不用でしょう・・(笑)

ログファイルのクリア機能もありませんので、時々FTPなどから空にしてください。
正しいJavaScript？が使われていれば、ログは一切溜まりません。

頻繁にログが書き込まれるような場合は、 『環境やブラウザが・・』と言うよりも、明らかに何らかのコーディングミスやブラウザ間の違いの調整ができていない事になります。 エラーメッセージやエラーを起こしたブラウザ名などを参考に、JavaScript全体をよく見直してください。
onerrorが理解出来るIEとFireFox、Netscapeでエラーが起きてる事になりますので、 PC用サイトであれば大きな問題と言えます。

頻繁にログが書き込まれ、さらに原因がわからない場合はJavaScriptを外す決断をするのも大事です。 訪問者はエラーだらけで閲覧して迷惑な状態が続いているのでしょうから、 解決できないエラーを放置して無理にJavaScriptを使ってる事はマイナスでしかありません。
よっぽど喜ばれる必要な情報を掲載してるサイトで無い限りは訪問者も減っていきます。

CGIに送られるエラーデータはJavaScriptの encodeURIComponentで URLエンコードされてるUTF8か、 或いはこのメソッドが理解できないブラザの生データ(ページの文字コード)になります。 従ってCGIの方では生で送られてきたケースを考えてページの文字コードと同じコードにしてログを取った方が良いです。
phpの場合はmb_convert_endocingの方で記録用文字コードを設定してください。
perlの方はデフォルトではそのままUTF8にしてありますので、Jcodeなどを利用して文字コードの変更をしてください。 (どちらも必要に応じて)

文字化けの解消がうまくできない人も、ファイル名や行番号は文字化けしませんので 見当を付けて自分のJavaScriptのコードミスを修正していけると思います。

・エラーを知った上で使ってるページ
全ページ対象でこのエラーチェックを付けると、 意図的にIEだけでは有効、FireFoxだけでは有効を許可してるページのログが無駄に溜まります。
スルーさせれば問題ないような記述を意図的にしてる場合です。
window.onerror = null;
の様な記述を、エラーチェック用スクリプトの後に入れておけばエラーログは取りません。

---