Этап 4 из 12 · ≈ 3 ч

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

Основа с Middle

Как не дать ошибке в одном компоненте уронить всё приложение.

Ошибка при рендере любого компонента без обработки размонтирует всё приложение — пользователь видит белый экран. Граница ошибок перехватывает ошибку в своём поддереве и показывает запасной интерфейс.

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

<ErrorBoundary fallback={<p>Не удалось загрузить отчёт</p>}>
  <Report />
</ErrorBoundary>

Что важно знать

  • Встроенные границы — только классовые компоненты (componentDidCatch, getDerivedStateFromError); на практике берут библиотеку react-error-boundary.
  • Не ловят ошибки в обработчиках событий и асинхронном коде — там обычный try/catch.
  • Ставят на уровне страниц и крупных виджетов, плюс отправка ошибки в мониторинг (Sentry).

Критерии освоения

Middle ≈ 3 ч

  • Ставит границы ошибок на уровне страниц и виджетов с запасным интерфейсом и отправкой в мониторинг
  • Объясняет, какие ошибки границы не ловят

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

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Что такое границы ошибок в React и что они не ловят?Middle

Граница ошибок перехватывает исключения, брошенные при рендере дочерних компонентов, и показывает запасной интерфейс вместо белого экрана. Ставят на уровне страниц и виджетов, чтобы ошибка в одном блоке не роняла всё; в componentDidCatch или onError…

Полный разбор
Как разделить код по маршрутам через lazy и Suspense?Middle

lazy(() => import("./Page")) превращает компонент в отдельный чанк, который загрузится при первом показе. Пока он грузится, ближайшая &lt;Suspense fallback&gt; показывает запасной интерфейс. Делить код логично по маршрутам и тяжёлым редко нужным частям…

Полный разбор
Какие правила хуков в React и почему их нельзя вызывать в условиях?Junior

Хуки вызывают только на верхнем уровне компонента или своего хука — не в условиях, циклах и вложенных функциях — и только из React-функций. Причина: React хранит состояние хуков по порядку вызова; если порядок меняется между рендерами, состояние перепутается.

Полный разбор
Как работает useEffect и что такое массив зависимостей?Junior

useEffect запускает побочный эффект после отрисовки: подписки, таймеры, запросы, синхронизацию с внешней системой. Зависимости определяют, когда эффект перезапускается: [] — один раз после монтирования, [a, b] — при изменении a или b, без массива — после…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования