React: Что такое Error Boundaries и как они помогают предотвратить «белый экран» при сбоях в отдельных компонентах интерфейса?

Error Boundaries (границы ошибок) — это специальный механизм в React, позволяющий перехватывать JavaScript-ошибки в дереве дочерних компонентов, логировать их и отображать резервный (fallback) UI вместо того, чтобы весь интерфейс «упал» и пользователь увидел пустой белый экран.

## Почему возникает «белый экран»?

По умолчанию, если в любом компоненте React возникает необработанная ошибка во время рендеринга, в методе жизненного цикла или в конструкторе, React размонтирует всё дерево компонентов целиком. Это приводит к тому, что пользователь видит пустую страницу — так называемый «белый экран смерти». Это плохой пользовательский опыт, особенно если ошибка произошла лишь в небольшом виджете на странице.

## Как работают Error Boundaries?

Error Boundary — это классовый компонент, который реализует один или оба специальных метода жизненного цикла:

— **`static getDerivedStateFromError(error)`** — вызывается при возникновении ошибки и позволяет обновить состояние, чтобы отрендерить fallback UI.
— **`componentDidCatch(error, info)`** — вызывается после того, как ошибка была поймана; используется для логирования ошибок (например, в Sentry или другие сервисы).

Пример реализации:

jsx
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

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

componentDidCatch(error, errorInfo) {
console.error(‘Ошибка поймана:’, error, errorInfo);
}

render() {
if (this.state.hasError) {
return

Что-то пошло не так. Попробуйте обновить страницу.

;
}
return this.props.children;
}
}

Использование:

jsx

## Где размещать Error Boundaries?

Error Boundaries можно размещать на разных уровнях дерева компонентов:

— **На верхнем уровне** — для глобальной защиты всего приложения.
— **Вокруг отдельных секций** — чтобы при сбое одного блока остальная часть страницы продолжала работать.
— **Вокруг виджетов и сторонних компонентов** — особенно полезно, если вы не контролируете их код.

## Ограничения Error Boundaries

Error Boundaries **не перехватывают** ошибки в:
— Обработчиках событий (используйте обычный try/catch).
— Асинхронном коде (setTimeout, Promise).
— Серверном рендеринге (SSR).
— Самом компоненте Error Boundary.

## Использование в функциональных компонентах

На данный момент Error Boundaries можно создавать только как классовые компоненты. Однако существуют библиотеки, такие как **react-error-boundary**, которые предоставляют удобный хук `useErrorBoundary` и компонент `ErrorBoundary` с поддержкой функциональных компонентов и возможностью сброса ошибки.

## Итог

Error Boundaries — важный инструмент для создания устойчивых React-приложений. Они позволяют изолировать ошибки, сохранять работоспособность остального интерфейса и улучшать пользовательский опыт, заменяя «белый экран» понятным сообщением об ошибке.