【ajax】通信エラーとなった原因（エラーログ）を取得する

公開日：2017/05/12

更新日：2020/11/05

カテゴリー: Ajax

ajax通信において通信エラーとなった場合に、そのエラーとなった原因の情報をコンソールログに取得する方法を書いています。

ajax通信エラーの原因が不明

これまで次のようなコードでajax通信を行っていました。

$.ajax({
    //設定
    url  : "index.php",
    type : "POST",
    data : {data : "hogehoge"},
 
    //ajax通信エラー
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        console.log("ajax通信に失敗しました");
    },
    //ajax通信成功
    success : function(response) {
        console.log("ajax通信に成功しました");
        console.log(response);
    }
});

しかしこの場合、ajax通信がエラーとなったときに「ajax通信に失敗しました」としかコンソールログに表示されず、そのエラーの原因となった情報は取得できませんでした。

ajax通信エラーの原因を取得

しかし次のようにすれば、通信エラーとなった原因の情報をコンソールログに取得できるようになります。

$.ajax({
    //設定
    url  : "index.php",
    type : "POST",
    data : {data : "hogehoge"},
 
    //ajax通信エラー
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        console.log("ajax通信に失敗しました");
        console.log("XMLHttpRequest : " + XMLHttpRequest.status);
        console.log("textStatus     : " + textStatus);
        console.log("errorThrown    : " + errorThrown.message);
    },
    //ajax通信成功
    success : function(response) {
        console.log("ajax通信に成功しました");
        console.log(response);
    }
});

XMLHttpRequest.status：HTTPリクエストのステータスが取得できます
textStatus：タイムアウト、パースエラー等のエラー情報が取得できます
errorThrown.message：例外情報が取得できます

こうすることによって、HTTPリクエストでエラーとなったのか、サーバー側のプログラムでエラーとなったのかがわかるようになり、エラーの原因把握がしやすくなります。

エラーサンプル

存在しないページにajax通信を行うと、コンソールログに次のように表示されます。

XMLHttpRequest : 404
textStatus : error
errorThrown : undefine

ajax通信を行い、サーバーサイドでパースエラーが起きた場合、コンソールログには次のように表示されます。

XMLHttpRequest : 200
textStatus : parsererror
errorThrown : JSON.parse: unexpected character at line 1 column 1 of the JSON data

同一オリジンポリシーに違反した場合、次のように表示されます。

Access to XMLHttpRequest at 'https://tool.ysklog.net/hoge.php' from origin 'https://ysklog.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
XMLHttpRequest : 0
textStatus :error
errorThrown : undefined

あわせて読んでほしい！

Follow @ysklog_net 　