How to properly pass custom errors from Backend (Express) to Frontend (Vue)

Question

I am developing a basic Node app and I am facing a problem that I think is not new but I don't understand which is the proper way to solve. I need to handle those errors that are not generated by code, network or database but needed by the logic of the application. As an example I use the already registered user but the same handling will be needed in different case in the application.

I start from the method in login component:

register () {
  API
    .register(this.credentials)
    .then(
      data => {
        this.user = data;
      },
      error => {
        this.error = error;
      })
    .catch(error => {
      this.error = error;
    });
},

The API is:

register (credentials) {
 return Axios
  .post('/auth/register',credentials)
  .then(response => {
    return response.data;
  })
},

The Backend is:

router.post('/auth/register',(req,res) => {
User.findOne({where:{username:req.body.username}})
  .then(user => {
    if (!user) {
      User
        .create(req.body)
        .then(user => {
          res.send(user);
        })
    } else {
      throw 'Username already exists';
    }
  });
});

What I expect is that the error

throw 'Username already exists';

(but it can be No data found for your search) is passed back to the component that catch it and show the error instead the registerd user. I try adding the catch after every then or using res.send({error:...}) instead of throw but in this way the component shows the error message as user object.

TheWildHealer · Accepted Answer · 2019-05-17 10:23:06Z

4

Use HTTP Status Codes to propagate errors through HTTP:

Backend:

router.post('/auth/register',(req,res) => {
console.log('backend register 3',req.body);
User.findOne({where:{username:req.body.username}})
  .then(user => {
    if (!user) {
      User
        .create(req.body)
        .then(user => {
          console.log('backend register 4',req.body);
          res.send(user);
        })
    } else {
      res.status(409).send('User already exists')
    }
  });
});

Fronted:

register (credentials) {
 return Axios
  .post('/auth/register',credentials)
  .then(response => {
    return response.data;
  })
  .catch(err => {
    processError(err);
  })
},

edited May 17, 2019 at 10:23

answered May 17, 2019 at 9:23

TheWildHealer

1,6461 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AlexMI Over a year ago

I try this way also but status(409) is received by Axios not in then section but in catch section resulting in the component as a standard error message with status code and without my custom message.

Abhay Over a year ago

The best solution for this is to use axios response interceptor, as you are already using axios. And by using that you can handle all the errors from a single place.

dmcshehan Over a year ago

The axios response interceptor logs the same error as .catch method. It just says "Request failed with status code 409" not the custom error passed from Express :(

TheWildHealer Over a year ago

Then you are correctly receiving a 409 error from your express. Watch out, error code and custom message often are two different fields. Look into your err object to find the message.

Collectives™ on Stack Overflow

How to properly pass custom errors from Backend (Express) to Frontend (Vue)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related