Как находить и исправлять runtime-ошибки в React-приложении?

Runtime-ошибки в React — это проблемы, которые проявляются не при сборке, а во время выполнения: обращение к свойству undefined, неверный тип данных, ошибка внутри useEffect, асинхронный ответ с неожиданной структурой. Их сложнее поймать, потому что TypeScript и линтеры не всегда покрывают динамические данные.

Основные источники ошибок

• Обращение к undefined или null при рендере (user.name, когда user ещё не загружен).
• Некорректные зависимости в useEffect, вызывающие бесконечные циклы или устаревшие замыкания.
• Асинхронные операции, обновляющие состояние после размонтирования компонента.
• Ошибки в обработчиках событий, которые не ловятся Error Boundary.

Как находить

1. Открыть консоль браузера и изучить stack trace — он указывает файл и строку.
2. Использовать React DevTools для проверки props и state проблемного компонента.
3. Воспроизвести ошибку по шагам, сужая область поиска (комментирование частей JSX).
4. Добавить логи или точки останова в DevTools Sources.

Пример защиты от ошибок

function UserCard({ user }) {
  // защита от undefined
  if (!user) return <div>Загрузка...</div>;
  return <div>{user.name ?? 'Без имени'}</div>;
}

// Error Boundary для отлова ошибок рендера
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    return this.state.hasError
      ? <h2>Что-то пошло не так</h2>
      : this.props.children;
  }
}

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

• Использовать optional chaining (?.) и nullish coalescing (??).
• Валидировать данные с бэкенда (zod, io-ts) до использования.
• Оборачивать дерево в Error Boundary, чтобы падение одного компонента не ломало всё приложение.
• В useEffect использовать флаг отмены или AbortController для асинхронных запросов.

Итог: runtime-ошибки в React удобнее предотвращать, чем искать — используйте защитные проверки, Error Boundary и валидацию данных, а для диагностики применяйте консоль, DevTools и stack trace.