HTML5が普及してスマホ主流のWEBサービスが増加しまくった現在となっては、JavaScript言語は欠かす事ができません。
そんな中、WEBエンジニア達は、常にJSエラーに悩まされ続けています。
手頃な言語であるが故に、簡単なミスでのエラーも頻発してしまいます。
どんなエラーが多いのか？
JSエラーは事前のテストや検証、チェックなどを念入りに行えば、ほぼ防げると言っても良いでしょう。
しかし、簡単なエラーであっても、見つけられない場合も少なくありません。
例えば、非常に複雑なロジックの場合に、検証では行われなかった手順で再現率100%の不具合が発生する場合、構築したプログラマは、何故深くユニットテストを行わなかったのか、自分を責めてしまうでしょう。
JSONデータの最終カラムにカンマが付いている
サーバー連動などを行う場合や、コピペなどで作成したJSONデータの場合、配列の最後のデータのカンマを取り忘れる凡ミスはよく発生するようです。
{
"a":1,
"b":2,
"c":3,
}
PHPとJSの組み合わせて文字列連結を「.」（カンマ）で書いてしまう
複数言語を同時にコーディングしていると、片方の言語につられてしまう事はありがちです。
もちろん開発体制で、言語別のラインを用意するという事も可能ですが、ベンチャー企業などで少人数開発などの場合は、そうも言ってられません。
# php
$a = "aa"."bb";
#JavaScript
var a = "aa" + "bb";
逆にPHPでvar宣言をしてしまうとか、文字列を「＋」連結して、思いもよらない数値結果になってしまう事もあるようです。
Syntaxエラー
何と言っても、どうしようもないエラーはこの「Syntax」エラーでしょう。
構文間違いだったり、単純なコーディングミスが99%なんですが、テキストエディタで、構文チェック機能などがついているものを使用するだけで、粗方防げるので、環境構築は自分で行いましょう。
ただし、コピペをして構文間違いを無くそうと考えることはプログラマとしてはオススメできません。
自分のタイピングでミスが起きない仕組みを考えましょう。
記述によるエラー対処法
最近のコーディングでは、各種言語でもいたる所に「try catch」が使われて、少し分かりにくいプログラムを見ることもありますが、エラーを想定された作りになっている点では、通常のものよりレベルが一段上と思われます。
ここではJavaScriptにおける「try-catch」と「onerror」という２つのエラー検知方法を少しだけ検証してみたいと思います。
内容
まず、ボタンを押してイベントにより関数を起動させる際に発生するよくあるエラーを基本として、各種エラー対処方法を検証してみます。
ソースコード
<html>
<head>
<title>JS-Labo</title>
</head>
<body>
<h1>Error-check</h1>
<input type="button" value="1. normal-err" onclick="err0();">
<input type="button" value="2. try-catch-error" onclick="err1();">
<input type="button" value="3. no-error" onclick="no_err1();">
<input type="button" value="4. onError" onclick="eventErr();">
<script type="text/javascript" src="error.js"></script>
</body>
</html>
(function(){
var hoge={};
hoge.bb=function(){console.log("bb")};
// 通常エラー※存在しないfunction
window.err0 = function(){
return hoge.aa();
};
// try catch実験※存在しないfunction
window.err1 = function(){
try{
hoge.aa();
}
catch(e){
console.log("Err : "+e);
return null;
}
};
// try catch実験※存在しないfunction
window.no_err1 = function(){
try{
hoge.bb();
}
catch(e){
console.log("Err : "+e);
return null;
}
};
// onError event
window.onerror = function(e){
console.log("on-error-event : "+e);
return null;
};
})();
操作
ローカル環境でも動作するので、ファイルを作って確認していただくのが早いのですが、デバッグコンソールを表示しながら、画面に表示されているボタンを押すと分かりやすいと思います。
検証
まず、「1.normal-error」ボタンを押すと
error.js:8 Uncaught TypeError: hoge.aa is not a function
という赤文字でコンソールに表示をされ、いわゆるJSエラーが発生します。
この後の処理を全て打ち消してしまうため、本番サービスで発生した場合は最悪の状態を招きます。
そして、世の中のWEBサイトでも、コンソールを立ち上げていたらよく見かけます。
内容は追いかけませんが、「not-function」が多いようです。
次に「2. try-catch-error」ボタンを押すと、try文に書かれた処理でerrorが発生した時にだけ、catch関数が呼ばれます。
この書き方で通常エラーで処理が止まる事は回避できるようです。
「3. no-error」は、問題なく関数が起動できるのを確認するだけのボタンなので虫。
「4. onError」ボタンは、じつはボタンの意味はないのでこれも無視してください。
ただし、ソースコードにある「window.onerror」という関数がエラーが発生する度に呼ばれている事に気がついた人もいるかもしれませんが、この関数を使って、エラー検知もできそうです。
ただし、try-catchの場合にこのエラーイベントにアクセスされなかったので、全体構成や、エラー発生時の対応などを計画しておかなければいけないかもしれませんね。
余談
さらに、onerrorイベントは、外部ドメインでのソースコードで記述してしまうと、クロスドメイン権限が発生して、正常にエラーイベントが取得できない場合もあるので、Saasサービスで使用する場合は要注意です！！
0 件のコメント:
コメントを投稿