Как с бэкенда ловить ошибки на фронтенде?

Question

[Елена]

Суть вопроса вот в чем:
есть на бэкенде список ошибок, например такие:

res.status(400).send({ message: 'Incorrectly ID' });
res.status(400).send({ message: 'Incorrectly Email' });

Если на фронтенде от править запрос с неверными полями, то приходит ответ 400 (Bad Request), а не с ошибками из бэкенда. Как брать ошибки с бэкенда и если их нельзя от туда брать, то зачем их вообще там пишем?

Comments

[Дмитрий]

400 это статус, в ответе должно быть поле data со свойством message

Answer 1

[Алексей П]

Нужно обработать ответ сервера. Проверить его status или statusCode.

Как пример:

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)
  })

https://developer.mozilla.org/en-US/docs/Web/API/R...

Comments

[Елена]

Алексей П то-есть на фронтенде заново создавать список ошибок?

[Алексей П]

Ошибка будет передана с сервера, считается хорошим тоном.

[Дмитрий]

Elena0394, Покажите код как и чем вы читаете ответ сервера

[Алексей П]

fetch('http://localhost:3001/register', {
    method: 'post',
    body: data
 })
 .then(response => {
     if (!response.ok) {
         throw new Error(<response_get_error_message>) /// здесь посмотрите вложенные свойства
     }
     return response.json()
 })
 .then(user => {

      console.log(user)
  })

[Алексей П]

Elena0394,
а как вы данные с сервера запрашиваете? какую библиотеку используете?

[Елена]

Алексей П, без библиотеке, на чистом js)

authenticationUser = () => {
  return fetch('http://localhost:3000/signin', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email: formAuhorization.email.value,
      password: formAuhorization.password.value
    })
  })
    .then(res => res.ok ? res.json() : Promise.reject(res.status))
    .catch(err => console.log(err))
};

[Алексей П]

Elena0394,
в общем, есть 2 варианта.
Самый простой способ получить текст ошибки:

.then(res => res.ok ? res.json() : Promise.reject(res.text()))
    .catch(err => console.log(err))

Вариант сложнее, когда мы весь res приведём к тексту и будем парсить.

Стоит почитать комменты к gist
https://gist.github.com/odewahn/5a5eeb23279eed6a80...

[Елена]

Алексей П, с Promise.reject(res.text()) не получается, возвращается [object Promise]

[Алексей П]

Elena0394,

const okUri = 'https://api.github.com/users/ruddy22/repos'; // correct url
const noOkUri = 'https://api.github.com/users/ruddy22/rep'; // incorrect url
fetch(noOkUri)
  .then(resp => 
    // if resp !== 200 return an error
    resp.json().then(json => resp.ok ? json : Promise.reject(json)) 
  )
  .then(data => console.log('data is', data))
  .catch(error => console.log('error is', error));

https://jsbin.com/zupoves/edit?js,console

Answer 2

[twolegs]

Ошибка должна быть в теле запроса.
Обработка ошибок на клиенте зависит от того, каким образом вы отправляете запросы (fetch, axios и т.п.).
Как правило, тело ошибочного ответа можно получить в catch у промиса.

Если это фетч, то ошибочный респонз надо предварительно распарсить (response.json() или response.text()). Кроме того, по умолчанию фетч не реджектит промис, если ответ пришел не со статусом 200, так что это тоже надо обработать

if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response);
  } else {
     return Promise.reject(response.json())
  }

Answer 3

[Karpion]

1. Поставьте на фронте проверку корректности полей. Лучше не доводить до ошибки вообще.
   
2. Я не понял, кто на бэке определяет ошибку. И что вообще за ошибка.