Как отловить ошибку в front-end от ответа expressjs?

Question

Моя проблема следующая:

//express server
app.post('/register', (req, res) => {
    const {
        password,
        passwordConfirm
    } = req.body;
    if (password === passwordConfirm) {
     //...
    } else {
        res.status(400).json("Passwords aren't matching")
    }
})
//react function
    onSubmitSignIn = () => {
        const { password, passwordConfirm } = this.state;
        let data = new FormData();
        data.append('password', password);
        data.append('passwordConfirm', passwordConfirm);
        
        fetch('http://localhost:3001/register', {
            method: 'post',
            body: data
        })
        .then(response => response.json())
        .then(user => {
            //logs error message here
            console.log(user)
        })
        //but I want to catch it here, and set the message to the state
        .catch(alert => this.setState({alert}))
    }

Когда я отправляю код состояния и сообщение от express в качестве ответа, клиентский интерфейс, очевидно, распознает его как ответ, поэтому он регистрирует сообщение вконсоль как "пользователь".Но как отправить ошибку, которая идет в функцию catch?

Answer 1

//express server
app.post('/register', (req, res) => {
 try {
  const {
   password,
   passwordConfirm
  } = req.body;
  if (password === passwordConfirm) {
   //...
  } else {
   res.status(400).json("Passwords aren't matching")
  }
 } catch (error) {
  res.status(500).send(error);
 }
})
//react function
onSubmitSignIn = () => {
 const {
  password,
  passwordConfirm
 } = this.state;
 let data = new FormData();
 data.append('password', password);
 data.append('passwordConfirm', passwordConfirm);

 fetch('http://localhost:3001/register', {
   method: 'post',
   body: data
  })
  .then(response => response.json())
  .then(user => {
   //logs error message here
   console.log(user)
  })
  //but I want to catch it here, and set the message to the state
  .catch(alert => this.setState({
   alert
  }))
}

Answer 2

fetch будет действительно только ошибкой, если по какой-то причине не может вызвать API.Другими словами, это будет ошибка при сетевых ошибках.Это не будет явной ошибкой для не 2XX кодов состояния.

Вам необходимо проверить свойство ok, как описано здесь:

• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful
• https://developer.mozilla.org/en-US/docs/Web/API/Response/ok

-

fetch('http://localhost:3001/register', {
    method: 'post',
    body: data
 })
 .then(response => {
     if (!response.ok) {
         throw new Error('my api returned an error')
     }
     return response.json()
 })
 .then(user => {

      console.log(user)
  })
  .catch(alert => this.setState({alert}))

Answer 3

Проблема в том, что fetch не распознает ошибки HTTP как отклонения Promise.

Обещание, возвращаемое функцией fetch (), не отклоняет состояние ошибки HTTP, даже если ответом является HTTP 404 или 500. Вместо этого оно разрешается нормально и отклоняется только в случае сбоя сети или если что-либо помешало запросу от завершения.

( Источник )

Вы можете проверить связанный источник репо fetch, в котором также содержится предложение по обработке статусов ошибок HTTP.

Answer 4

Что если вы выбросите ошибку:

app.get("/", function (req, res) {
  throw new Error("BROKEN"); // Express will catch this on its own.
});

И затем перехватите эту ошибку в интерфейсе?

См. здесь для справки

РЕДАКТИРОВАТЬ

Возможно, вы должны вернуть ошибку с помощью return next(), чтобы остальная часть кода не была обработана в методе сервера:

 app.get("/", function (req, res) {
     return next(new Error('BROKEN'));
 });