jQueryのjqXHRをconsole.logするとUncaught TypeErrorが出る

jQueryの$.ajaxメソッドでデータ取得/更新の際にエラーが発生した際のエラーハンドリングについて記述します。

fail()の引数オブジェクトからエラー情報を取得する

最初にNG例です。
$.ajax()実行時にエラーとなった場合に呼び出されるfail()の第一引数であるjqXHRオブジェクト¹にHTTPステータスコードとエラーメッセージが格納されているので、それらを参照します。

コード(NG例)

$.ajax({
  // 省略
}).done(() => {
  // Ajaxリクエストが成功した場合の処理
}).fail((jqXHR, textStatus, errorThrown) => {
  // Ajaxリクエストが失敗した場合の処理
  const httpCode = jqXHR.status; // HTTPステータスコード
  const errorMessage = jqXHR.responseText.error.message.value;
  console.log(`Status Code: ${httpCode}, Message: ${errorMessage}`); // エラーレスポンス
});

上記のコードを実行するとエラーが発生しました。

実行結果

Uncaught TypeError: Cannot read properties of undefined (reading 'message')

どうすればエラー情報を取得できるのか

結論

レスポンスのContent-Typeに沿った内容でjqHXRオブジェクトにアクセスすれば良いです。

コード

$.ajax({
  // 省略
}).done(() => {
  // Ajaxリクエストが成功した場合の処理
}).fail((jqXHR, textStatus, errorThrown) => {
  // Ajaxリクエストが失敗した場合の処理
  const httpCode = jqXHR.status; // HTTPステータスコード
  const errorMessage = jqXHR.responseJson.error.message.value;
  console.log(`Status Code: ${httpCode}, Message: ${errorMessage}`); // エラーレスポンス
});

実行結果

Status Code: 403, Message: このページのセキュリティ検証は無効であり、破損している可能性があります。Web ブラウザーの [戻る] ボタンをクリックしてから、操作を再度行ってください。

結論に至るまでの試行錯誤

responseJsonプロパティの存在を知るまでは²、$.parseJSON()でパースしてからエラー情報を取得しようと下記のように実装していました。
処理結果はresponseJsonから取得するのと変わりませんが、冗長になってしまっていました。

コード(該当処理のみ抜粋)

const errorMessage = $.parseJSON(jqXHR.responseText).error.message.value;

実行結果

Status Code: 403, Message: このページのセキュリティ検証は無効であり、破損している可能性があります。Web ブラウザーの [戻る] ボタンをクリックしてから、操作を再度行ってください。

1. jqXHRオブジェクトとは ↩

2. リファレンスはちゃんと読もうと思いました。 ↩