Как предотвратить падение всего React-приложения, если ошибка возникает в дочернем компоненте?

Изоляция ошибок в React

• React Error Boundaries: класс с методом componentDidCatch
• Перехватывают ошибки дочерних компонентов и не позволяют им разрушить всё дерево
• Дают возможность отобразить резервный UI вместо компонента с ошибкой
• Обрабатывают ошибки в рендеринге, lifecycle-методах и конструкторах дочерних компонентов
• Для асинхронных ошибок применяются другие подходы: try/catch или внешний обработчик
• Использование повышает устойчивость интерфейса
• Подход используют для критически важных секций, чтобы изолировать сбои и улучшить UX

Подробный ответ

Основной ответ

Чтобы ошибка в дочернем компоненте не приводила к отказу всего приложения, в React начиная с версии 16 применяют концепцию Error Boundaries. Это специальные компоненты, перехватывающие ошибки в дереве потомков и не дающие им распространиться выше. Вместо неисправного компонента можно показать запасной интерфейс, например fallback UI, сохранив работоспособность остальных частей приложения.

Ключевые моменты

• Error Boundary представляет собой класс-компонент с методами componentDidCatch(error, info) и static getDerivedStateFromError(error). Он позволяет перехватывать ошибки, возникающие при рендеринге, выполнении lifecycle-методов или в конструкторах дочерних компонентов.
• При этом ошибки в асинхронных коллбэках, обработчиках событий и внутри самого Error Boundary они не перехватывают.
• С помощью Error Boundaries можно показать пользователю резервный интерфейс, отправить сведения об ошибке во внешние сервисы, такие как Sentry или LogRocket, и не допустить падения всего UI.

Практический контекст

В больших React-приложениях обычно оборачивают критические участки интерфейса — например, крупные страницы или сложные виджеты — в Error Boundary. Это повышает устойчивость системы: если отдельный виджет или страница завершится с ошибкой, пользователь увидит понятное сообщение либо сможет обновить только проблемную часть, не перезагружая всё приложение.