PassFront
  1. PassFront
  2. База знаний
  3. Ошибки и отладка

Как обработать ошибку при изменении данных?

Ошибки и отладка

Ошибку при изменении данных обрабатывают через `try/catch` (async/await) или `.catch()` (промисы): ловят ошибку, откатывают оптимистичное обновление, показывают сообщение пользователю, логируют.

Обработка ошибки изменения (мутации)

try/catch с async/await

async function updateUser(data) {
  try {
    await api.patch('/users/1', data);
    showSuccess('Сохранено');
  } catch (error) {
    showError('Не удалось сохранить');
    logError(error);
  }
}

.catch() у промиса

api.patch('/users/1', data)
  .then(() => showSuccess())
  .catch((error) => showError());

Детали

Откат оптимистичного обновления

Если UI обновили оптимистично (до ответа), при ошибке — откатить:

setUser(newUser);            // оптимистично
try {
  await api.update(newUser);
} catch {
  setUser(oldUser);          // откат при ошибке
  showError();
}

Понятное сообщение пользователю

Показать, что пошло не так (тост, инлайн-ошибка формы), не техническую деталь.

Различать типы ошибок

  • Валидация (400/422) → показать ошибки полей.
  • Авторизация (401/403) → редирект/сообщение о правах.
  • Конфликт (409) → сообщить о конкурентном изменении.
  • Сеть/500 → предложить повтор.

В TanStack Query

useMutation с onError, onSettled, автоматическим откатом:

useMutation({ mutationFn, onError: (e) => rollback() });

Логирование

Отправить в мониторинг (Sentry) для диагностики.

Коротко для собеседования

Ошибку изменения данных обрабатывают try/catch (async/await) или .catch() (промисы): ловят, откатывают оптимистичное обновление (вернуть старое состояние), показывают понятное сообщение (тост/ошибка формы), различают типы (валидация 422 → поля, 401 → авторизация, 500 → повтор), логируют (Sentry). В TanStack Query — useMutation с onError и откатом.

Другие вопросы раздела