記事一覧

JavaScriptのエラーハンドリングまとめ




目次



JavaScriptのエラーハンドリングについて

ハロー、みなさんエジソンです。

Webには欠かせないクライアントサイド技術であるJavaScript。Webアプリケーションを作成する上では、避けることのできない大事なファクターと言えることでしょう。

JavaScriptを問わず、エラーに関する処理というのは、どうしても後手に回ってしまいがちです。正常系のプログラムだけ書いたら、何だか仕事も終わってしまったような錯覚に陥りますが、エラー処理の入り口に立ってからが勝負がはじまります!

今回は、JavaScriptにおけるエラーハンドリングについてです。JavaScriptで発生したエラーは Try Catchで例外エラーとして捕捉してしまいましょう。

Try Catchの書き方

JavaScriptにおける、Try Catch構文は以下の通りです。Finallyも合わせて使用することができるので、Finally部分に後始末処理を書くことができます。

ソース
try {
    throw new Error("oops");
}
catch (ex) {
    console.error("inner", ex.message);
}
finally {
    console.log("finally");
}

ハンドリングできなかったエラーの捕捉

エラーが発生しそうな箇所全てに対して、Try Catchを書き連ねるのは大変なことです。そんな場合は、ハンドリングできなかったエラーを捕捉することができる、グローバルなイベントハンドラであるwindow.onerrorがあるのでそちらを使いましょう。

また、未検証な情報で申し訳ないのですが、window.onerrorのcolumnとerrorObjはブラウザによっては渡って来ないという情報もあるようです。

ソース
window.onerror = function (message, url, line, column, errorObj) {

    console.log("message : " + message
         + ", url : " + url
         + ", line : " + line 
         + ", column : " + column 
         + ", error : " + (errorObj ? errorObj.stack : ""));

    // trueを返却すると、処理が本関数内でストップする。
    //return true;

    // falseを返却すると、ブラウザ本来の処理が実行される(エラーログが出力される)。
    return false;
};

throw new Error('エラーだよ');

まとめ

JavaScriptにおいて、エラー例外が発生することが前提のコーディングというのは、そもそも行わないことがほとんどかと思います。エラーが発生すると思われる箇所には、事前にif文でチェックしますものね。

そのため、今回紹介したTry Catchというのは、もしかしたらあまり利用することはないかもしれません。ただ、何らかの処理を実施する上で、基本的にエラーが発生しないが予期せぬエラーが発生した時のために、後処理が実行されないと不都合が生じる場合なんかに活用できるのではないかと思います。

また、window.onerrorに関しては、工夫次第で便利に活用できるかと思います。一例として、onerror関数が実行された場合に、ajaxでサーバーサイドに通信させてログを出力させるといった処理に活用できるのではないでしょうか。

今回紹介した内容は、おそらく全てのブラウザでサポートされているかと思いますが、検証しきれていない部分があるので、ご注意ください。

参考
MDN - try...catch
MDN - GlobalEventHandlers.onerror
kitak.blog - JavaScriptのエラーを検知したり、スタックトレースをいいかんじに表示する術


関連記事

このエントリーをはてなブックマークに追加

コメント

コメントの投稿

非公開コメント

プロフィール

EZOLABブログへようこそ。
EZOLABは、札幌のソフトウェア会社です。

http://ezolab.co.jp