---
# System prepended metadata

title: 接不到正確的錯誤訊息

---

# 接不到正確的錯誤訊息

## 目標:

發送新增會員的API後, 取得後端給的錯誤訊息

在註冊新會員頁面中,需要避免新增重複的會員帳號或是email,
經過後端驗證後應回傳正確的錯誤訊息,
以利前端判斷, 並反應正確的錯誤資訊給使用者,
ex. 回傳"帳號已經註冊過了!"來提醒使用者

## 遇到的問題與嘗試:

1. 在Postman中確認API是否真的有給錯誤訊息
 
   API為POST /users/ (新增使用者)
   刻意輸入已註冊過的帳號(紅色框)
   錯誤訊息會出現: account重複註冊! 
   ![](https://i.imgur.com/8VkuJFl.png)

2. 在知道API會給錯誤訊息後, 檢查自己的程式碼
 
    嘗試在try catch中的catch取得錯誤訊息
    並在瀏覽器中觀察console.
    ![](https://i.imgur.com/R7tPeE4.png)

   [code github(244行)](https://github.com/DanielGG1024/twitter-front-end-vue/blob/main/src/views/Regist.vue)
3. 在註冊頁輸入與Postman一樣的值,
   觀察印出的console.log()(綠色框)
   
   ![](https://i.imgur.com/AC75ig9.png)
   
    放大一點
    ![](https://i.imgur.com/uuX5jrg.png)
    
    NetWork中的response
    ![](https://i.imgur.com/SWaCK6b.png)

由此可知真的真的有response只是我拿不到!!

## 但在error.message中並不是出現預期的"重複註冊"只是出現409(conflict)

## 解決方法:
 stackoverflow:<br>
 
https://stackoverflow.com/questions/39153080/how-can-i-get-the-status-code-from-an-http-error-in-axios

在catch(error)中加入
```
if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
```

可以再
```
error.response.data
```
中接到正確錯誤訊息

![](https://i.imgur.com/eIyQF2b.png)

## 解決當下問題之後

雖然成功解決這問題但還是非常疑惑, 
為什麼一開始的 `console.log(error)`
無法看到原來
error中還有response 
response中還有data

目前也只是理解可能 console.log()沒有辦法看到error的全貌 繼續找答案中

## Review

1. 是因為 console.log 本身回傳的是字串，所以在內部會執行 toString 方法，來將 error 物件轉型成字串，如果想要印出整個完整的 error 物件，可以使用" `console.dir` "的方式，就可以印出整個物件包和它的屬性了。


![](https://i.imgur.com/N1Ll7YH.png)


2. 此外在程式碼第 244 行開始，可以看到使用 switch case 的方式去判斷每個錯誤資訊，再利用 Toast.fire 去將錯誤訊息顯示給使用者，其實只要進入到 catch(error) 那段，就知道有錯誤發生了，再直接將 message 傳給 Toast.fire 即可，如下：
   
```
Toast.fire({
  icon: "warning",
  title: error.message,
}); 
```

原始程式碼為:
![](https://i.imgur.com/Tn8gGpL.png)
一大包switch 
