【AWS】【Vue.js】コンソールに表示されるエラーをVue.jsで受け取る方法

Question

###環境
Vue.js
AWSサーバー

###問題
コンソールに表示される「net::ERR_CONNECTION_TIMED_OUT」と「net::ERR_CONNECTION_REFUSED」のエラーによってVue.jsで処理を変えたいのですが、Vue.jsでどのようにエラーを受け取れば良いかわかりません。

###教えていただきたいこと
・この問題が解決できる方法
・コンソールに出てくるエラーを受け取る方法
・エラーの時にAWSからなにかしら返すような処理
・解決に近づけそうな案
などなどなんでも良いので、回答よろしくお願いいたします。

こちらがコンソールに表示されるエラーです

※黒塗りが多く、見えにくく申し訳ありません。

画像のように
インスタンスが立ち上がっていない状態でPOSTすると、コンソールに
「net::ERR_CONNECTION_TIMED_OUT」このようなエラーが返ってきます。

また、インスタンスが立ち上がっていてもPOSTできない状態であれば、
「net::ERR_CONNECTION_REFUSED」このようなエラーが返ってきます。

「Error: Network Error」の下の行の「▶︎」の中身は同じでした。

###エラーを受け取っているコードはこちらになります。

#Script
axios.post(url, data, config)
    .then((response) => {
        console.log(response);
    })
    #ここでエラーを受け取っています
    .catch(function(error) {
        if (!error.response) {
            console.log(error.response); # この時返ってきたものがが「undefind」で、
            console.log(error); # この時返ってきたものが、「Error: Network Error」になります。
　　　　　　　console.info(error.config); # この時返ってきたものが「▶︎」以降です

Answer 1

error.responseが空の場合は、error.codeで分岐、
error.responseが空でない場合は、error.response.statusCodeやerror.response.codeで分岐すれば良いです。

// 中略
.catch(function(error) {
  if (error.response) {
    switch(error.response.statusCode) {
      case 404:
        console.log(404)
        break;
      case 403:
        console.log(403)
        break;
    }
  } else {
    switch(error.code) {
      case 'ECONNABORTED':
        console.log('ECONNABORTED')
        break;
      case 'ECONNREFUSED':
        console.log('ECONNREFUSED')
        break;
    }
  }
})

Comments

[matchi6]

ありがとうございます。
参考にさせていただきます。