Как обработать ошибку при изменении данных?
Ошибки и отладка
Ошибку при изменении данных обрабатывают через `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 и откатом.