【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

 

あわせて読んでほしい!

 

コメント

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

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