Обработка ошибок в Redux-Saga через try...catch

Смартфон на ноутбуке на коричневом деревянном столе

Зачем это важно

Redux-Saga управляет асинхронными действиями в React-приложениях через генераторы. Правильная обработка ошибок предотвращает падения приложения, улучшает UX и делает поток данных предсказуемым. try…catch — основной инструмент для перехвата исключений внутри генераторных функций (сага).

Что такое try…catch в JavaScript

try…catch — это базовый механизм JavaScript для перехвата исключений. Его задача — выполнить код и обработать любые ошибки, которые возникнут во время выполнения.

Пример синтаксиса:

try {
  // Код, который может выбросить ошибку
} catch (error) {
  // Логика обработки ошибки
}

Определение: исключение — объект (обычно Error), который сигнализирует об ошибочном состоянии выполнения.

Как применять try…catch внутри Redux-Saga

В саге try-блок содержит асинхронную логику (вызовы API через эффекты). В catch — обработка ошибки: логирование, диспатч действия с ошибкой, разбор причины и, при необходимости, запуск повторных попыток или очистки.

Шаг 1 — импорт зависимостей

import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchUserSuccess, fetchUserFailure } from './actions';
import { fetchUser } from './api';

Шаг 2 — реализация саги (базовый пример)

function* getUser(action) {
  try {
    // Асинхронный вызов, который может выбросить ошибку
    const user = yield call(fetchUser, action.payload.userId);
    // При успешном ответе диспатчим действие с данными
    yield put(fetchUserSuccess(user));
  } catch (error) {
    // Обработка ошибки: диспатчим действие ошибки
    yield put(fetchUserFailure(error));
  }
}

Комментарий: call используется для вызова функции, чтобы тесты могли подменять эффект; put — для диспатча действий.

Шаг 3 — подписка на действие

export default function* userSaga() {
  yield takeEvery('FETCH_USER', getUser);
}

Этот код отслеживает действие FETCH_USER и вызывает getUser при каждом его появлении.

Практические приёмы и расширенные паттерны

Ниже — расширенные примеры, которые часто применяются на практике.

1) Диспатчинг подробной ошибки и нормализация

В catch удобно нормализовать ошибку перед отправкой в стор — например, взять message и status.

function* getUser(action) {
  try {
    const user = yield call(fetchUser, action.payload.userId);
    yield put(fetchUserSuccess(user));
  } catch (err) {
    const payload = {
      message: err.message || 'Неизвестная ошибка',
      code: err.status || null,
    };
    yield put(fetchUserFailure(payload));
  }
}

Это помогает UI корректно отображать сообщения и реагировать на коды ошибок.

2) Ретрай с экспоненциальной задержкой

Иногда полезно автоматически повторить неCritical ошибки (например, временные сетевые сбои).

import { call, put, delay } from 'redux-saga/effects';

function* getUserWithRetry(action) {
  const maxAttempts = 3;
  let attempt = 0;
  while (attempt < maxAttempts) {
    try {
      const user = yield call(fetchUser, action.payload.userId);
      yield put(fetchUserSuccess(user));
      return; // успех — выход из саги
    } catch (err) {
      attempt += 1;
      // простая экспоненциальная задержка: 500 * 2^(attempt-1)
      const backoff = 500 * Math.pow(2, attempt - 1);
      if (attempt < maxAttempts) {
        yield delay(backoff);
        continue; // повторяем попытку
      }
      yield put(fetchUserFailure({ message: err.message }));
    }
  }
}

Важно: ретраи не всегда уместны (см. раздел «Когда try…catch не подходит»).

3) Логирование и централизованная обработка

В catch можно отправлять ошибки в внешнюю систему логирования или мониторинга (Sentry, Logstash и др.), не раскрывая при этом чувствительной информации пользователю.

function* getUser(action) {
  try {
    const user = yield call(fetchUser, action.payload.userId);
    yield put(fetchUserSuccess(user));
  } catch (err) {
    // пример вызова логгера, безопасно — без утечки приватных данных
    yield call(reportErrorToMonitoring, { err, context: { userId: action.payload.userId } });
    yield put(fetchUserFailure({ message: 'Ошибка загрузки пользователя' }));
  }
}

4) Отмена и очистка при ошибке

Если саги выделяют ресурсы (веб-сокеты, подписки), важно освобождать их при ошибке.

function* watchResource() {
  let resource;
  try {
    resource = yield call(connectResource);
    // ... работа с ресурсом
  } catch (err) {
    // на ошибке — корректно закрыть ресурс
    if (resource) yield call(resource.close);
    yield put(resourceFailure(err));
  }
}

Когда try…catch не подходит (контрпримеры)

Если вы хотите централизованно обрабатывать ошибки одного типа для всех саг — можно реализовать глобальный middleware/сагу-воркер, вместо повсеместного try…catch. Но это усложняет локальную обработку.
Для ошибок React-компонентов используйте Error Boundaries — они не заменяют обработку ошибок в саге, но закрывают другой класс ошибок (рендеринг).
Для очень простых цепочек промисов иногда достаточно промисных .catch() перед преобразованием в эффекты, но внутри генератора try…catch — более очевиден и тестируем.

Критерии приёмки

Сага корректно диспатчит fetchUserSuccess при успешном ответе.
Сага диспатчит fetchUserFailure при ошибке и передаёт понятный для UI payload.
Повторные попытки выполняются не более заданного лимита и имеют экспоненциальную задержку.
При ошибке не происходит утечки чувствительных данных в логи, доступные клиенту.
Ресурсы корректно освобождаются в случае ошибки.

Чек-листы по ролям

Для разработчика:
- Добавить try…catch в каждую сагу с сетевыми вызовами.
- Нормализовать payload ошибок.
- Написать тесты на успешный и ошибочный сценарии.
Для ревьюера:
- Проверить, что нет утечек stack trace в UI.
- Подтвердить, что ретраи не приводят к бесконечным циклам.
Для QA:
- Смоделировать сетевые ошибки и статус-коды.
- Проверить поведение UI при разных payload ошибок.
Для DevOps:
- Убедиться, что ошибки отправляются в систему мониторинга.

Короткий мастер-чек: шаблон саги (cheat sheet)

import { call, put, takeLatest } from 'redux-saga/effects';

function* sagaTemplate(action) {
  try {
    const res = yield call(apiCall, action.payload);
    yield put(successAction(res));
  } catch (err) {
    yield call(reportError, err);
    yield put(failureAction({ message: err.message }));
  }
}

export default function* rootSaga() {
  yield takeLatest('ACTION_REQUEST', sagaTemplate);
}

Используйте этот шаблон как отправную точку: добавляйте retry, delay или логику очистки по необходимости.

Глоссарий (1 строка)

Сага: генераторная функция, управляющая сайд-эффектами в Redux.
effect: абстракция, описывающая побочный эффект (call, put, takeEvery).
call: эффект для вызова функции (удобен для тестирования).
put: эффект для диспатча действия в стор.
takeEvery / takeLatest: шаблоны подписки на действия.

Диагностика и тесты (ключевые сценарии)

Юнит-тест: getUser возвращает успешное действие при положительном ответе.
Юнит-тест: getUser диспатчит failure при исключении и нормализует сообщение.
Интеграционный: UI показывает сообщение об ошибке при fetchUserFailure.

Примечание

Важно отделять логику восстановления (retry) от представления — UI должен получать конечный статус операции (успех/ошибка), а не внутренние промежуточные попытки.

Краткое резюме

try…catch в Redux-Saga — простой и мощный инструмент для управления ошибками в асинхронных потоках. С его помощью вы контролируете поведение приложения при неудачах: диспатчите ошибки, запускаете повторные попытки, логируете и освобождаете ресурсы. Продуманный подход к обработке ошибок повышает стабильность и улучшает опыт пользователей.

Обработка ошибок в Redux-Saga с помощью try...catch