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

公開日:
更新日:
カテゴリー: 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

 

あわせて読んでほしい!

 

コメント

まだコメントはありません。

コメントフォーム
お名前
コメント