Frontend Academy · Урок

Границы ошибок

«Границы ошибок» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем нужны границы обработки ошибок

Необработанная ошибка во время отрисовки, в методе жизненного цикла или конструкторе по умолчанию приводит к сбою всего дерева React. Границы обработки ошибок перехватывают такие ошибки в поддереве и позволяют вместо него отрисовать резервный вариант.

Только классовые компоненты

Границы обработки ошибок должны быть классовыми компонентами (так по-прежнему обстоит дело в 2026 году — эквивалента на основе хуков пока нет). Хук useErrorBoundary существует в библиотеках вроде react-error-boundary.

getDerivedStateFromError

Статический метод, вызываемый, когда дочерний компонент выдаёт ошибку. Возвращает обновление состояния, запускающее отрисовку резервного варианта.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

componentDidCatch для журналирования

Используйте componentDidCatch, чтобы записать ошибку в службу (Sentry, Datadog) — он получает и ошибку, и стек компонентов React.

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    contexts: { react: { componentStack: errorInfo.componentStack } }
  });
}

Обёртывание корня приложения

Оберните приложение верхнего уровня в границу обработки ошибок, чтобы предотвратить белый экран смерти.

<ErrorBoundary fallback={<GlobalErrorPage />}>
  <App />
</ErrorBoundary>

Детальные границы для каждого маршрута или виджета

Одна глобальная граница — необходимый минимум. Добавляйте отдельные границы для маршрутов, чтобы сбой в одном разделе не скрывал всё приложение.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={
    <ErrorBoundary fallback={<DashboardError />}>
      <Dashboard />
    </ErrorBoundary>
  } />
</Routes>

Что не перехватывают границы обработки ошибок

Границы обработки ошибок NOT перехватывают ошибки в обработчиках событий, асинхронном коде (setTimeout, промисах), ошибки, возникающие во время SSR, и ошибки в самой границе. В этих местах используйте try/catch.

Ошибки в обработчиках событий

Оберните обработчики событий в try/catch и вызовите функцию ручного отчёта об ошибке reportError.

function Button() {
  function onClick() {
    try {
      riskyOperation();
    } catch (err) {
      reportError(err);
      toast.error('Something went wrong');
    }
  }
  return <button onClick={onClick}>Click</button>;
}

Библиотека react-error-boundary

Популярный пакет react-error-boundary предоставляет API, удобный для функциональных компонентов, с поддержкой сброса.

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onReset={() => refetch()}
>
  <DataView />
</ErrorBoundary>

Сброс при восстановлении

Предусмотрите способ восстановления: кнопку повтора или переход на другой маршрут. Граница должна сбрасывать своё состояние, чтобы перестать показывать резервный интерфейс.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  reset = () => this.setState({ hasError: false });
  render() {
    if (this.state.hasError) {
      return <button onClick={this.reset}>Retry</button>;
    }
    return this.props.children;
  }
}

Разработка и production

В режиме разработки React по-прежнему отображает красный экран ошибки даже при наличии границы — это сделано намеренно. В production отображается только резервный интерфейс границы.

Проверьте себя

Какие типы ошибок границы обработки ошибок React NOT перехватывают?

Итоги: границы обработки ошибок

Классовый компонент со статическими getDerivedStateFromError и componentDidCatch. Оборачивает поддерево и перехватывает ошибки во время рендеринга. Не перехватывает ошибки в обработчиках событий, асинхронном коде и SSR. Размещайте глобальную границу в корне app, а также границы для маршрутов и виджетов. Записывайте ошибки в Sentry. Предлагайте действие для восстановления. Библиотека react-error-boundary упрощает работу с этим подходом.

Часто задаваемые вопросы

Урок «Границы ошибок» бесплатный?

Да — полный текст урока «Границы ошибок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Границы ошибок»?

Реализуйте границы ошибок на основе классов с помощью componentDidCatch и getDerivedStateFromError, чтобы неперехваченные ошибки рендеринга не приводили к сбою всего приложения Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Границы ошибок»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy