如何显示从 Node.js API 发送到 Next.js 的验证错误

Question

I have created a Node.js API and am making requests to it using Next.js

Here is my Node.js controller. I am using express validator for validation.

If I fill in the form correctly, it works and the data is saved in mongo as expected. However, I want to send the validation errors back to the client when the form isn't filled in correctly. If I look in console, I can see the errors in the network tab.

exports.register = async (req, res) => {
  // check if user exists in the database already
  const emailExists = await User.findOne({ email: req.body.email });
  if (emailExists) return res.status(400).send("Email already exists");

  // hash password
  const salt = await bcrypt.genSalt(10);
  // hash the password with a salt
  const passwordhash = await bcrypt.hash(req.body.password, salt);

  // create new user
  var user = new User({
    name: req.body.name,
    email: req.body.email,
    password: passwordhash
  });
  try {
    user = await user.save();
    res.send({ user: user._id });
  } catch {
    res.status(400).send(err);
  }
};

In Next.js, here is the code for making the http request

  handleSubmit = event => {
    const { name, email, password } = this.state;
    event.preventDefault();
    const user = {
      name,
      email,
      password
    };

    try {
      register(user);
    } catch (ex) {
      console.log(ex);
    }
  };

export const register = async user => {
  const data = await http.post("http://localhost:8000/api/user/register", user);
  console.log(data);
  return data;
};

In console all I see is the below. So the console.log I am doing in the catch isn't working.

 POST http://localhost:8000/api/user/register 422 (Unprocessable Entity)

Uncaught (in promise) Error: Request failed with status code 422 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:59)

Answer 1

That's because the catch statement isn't being run because the function isn't throwing an exception by itself. You should add the error handling inside the function like this:

 try {
      register(user);
    } catch (ex) {
      console.log(ex);
    }
 };

export const register = async user => {
  const data = await http.post("http://localhost:8000/api/user/register", user).catch((e) {
    throw new Error(e);
  });
  console.log(data);
  return data;
};

Answer 2

I managed to get it working like this:

try {
  const response = await register(user);
  console.log(response);
} catch (ex) {
  if (ex.response && ex.response.status === 422) {
    const errors = ex.response.data.errors;
    this.setState({ errors });
  }
}