CODEWITHSUNDEEP
node.jserror-handling
Holiday
Holiday

Reputation: 891

How can I send an error in NodeJS and receive it in the Front-End via async/await?

I send the error via return res.status(409).json({error: "Email already exists."}) when the email a user is trying to sign up with already exists in the database.

Then in my Front-End I am trying to receive it with awaiting the response let response = await axios.post(${config.domain}/create-account, {...})` which only returns the error code, but not the error message with it that I have defined Node.

Although when a user signs up successfully, the token gets returned normally through response.data.

I also tried the axios request without the try/catch, but I have gotten the same result.

EDIT: Tried using promises as well, but same result:

sendRegisterReq() {
      axios.post(`${config.domain}/create-account`, {
         firstName: this.userData.firstName, 
          lastName: this.userData.lastName, 
          email: this.userData.email, 
          password: this.userData.genPass
      }).then((response) => {
        log(response.error)
    })
  }

This is how I am sending the error message via NodeJS.

// create admin
router.post('/create-account', async (req, res) => {
    res.header('Access-Control-Expose-Headers', 'curToken') // expose headers
    const adminObject = req.body
    let admin
    try {   
        // Generate Username
        await Admin.generateUsername(adminObject.firstName, adminObject.lastName).then(async (generatedUsername) => {
            adminObject.username = generatedUsername
            admin = new Admin(adminObject)
            try {
                const savedAdminAccount = await admin.save() 
                console.log(await savedAdminAccount)
            } catch(err) {
                console.log(err)
            }   
        })      

        const token = await admin.generateAuthToken()
        
        return res.status(201).send(token)
    } catch(err) {
        return res.status(409).json({error: "Email already exists."})
    }
})

This is how I am trying to get the error message.

async sendRegisterReq() {
      try {
        let response = await axios.post(`${config.domain}/create-account`, {
          firstName: this.userData.firstName, 
          lastName: this.userData.lastName, 
          email: this.userData.email, 
          password: this.userData.genPass })
        
        localStorage.setItem('authToken', response.data)
      } catch(err) {
          log(err)
      }
    }

But, all I get is the following

POST http://localhost:3000/create-account 409 (Conflict)
SignUp.vue?4429:56 Error: Request failed with status code 409
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:59)

Upvotes: 0

Views: 89

Answers (1)

jfriend00
jfriend00

Reputation: 707318

Per the Axios documentation for handling errors, the rejected value from the axios promise will be an object wrapper (created by Axios) that contains inside it any response that came from the request inside that wrapper object. I'm assuming that the wrapper object is an Error object (or a subclass of that) since that's a common convention for rejected promises (to use an Error object).

Relevant fields for you would be:

err.response.data
err.response.status
err.response.headers

So, the response info is there, just one level deeper in the resolved object.

And, you should be able to see the data like this:

async sendRegisterReq() {
      try {
        let response = await axios.post(`${config.domain}/create-account`, {
          firstName: this.userData.firstName, 
          lastName: this.userData.lastName, 
          email: this.userData.email, 
          password: this.userData.genPass })

        localStorage.setItem('authToken', response.data)
      } catch(err) {
          log(err.response.data)
      }
    }

The reason it started working for you when you returned a 200 status is that the response object doesn't have that extra wrapper around it so you were able to access the data you wanted. But, it's still supposed to be there, just one level deeper in the object (wrapped in an Error object).

There should be no need to have to manually set the content-type. Using res.json() will set that content-type for you automatically.

Upvotes: 1

Related Questions