Есть компонент, внутри него падает какой-то из дочерних компонентов, из-за этого ломается приложение, как можно этого избежать?

Question

Чтобы избежать полного падения приложения из-за ошибки в дочернем компоненте, используйте Error Boundaries (Границы ошибок). Это специальные React-компоненты, которые перехватывают JavaScript-ошибки в любом из своих дочерних компонентов, логируют эти ошибки и отображают запасной UI вместо "сломавшегося" поддерева компонентов. Error Boundaries не ловят ошибки внутри самих себя, асинхронного кода или обработчиков событий.

YeaHub · Accepted Answer

До появления Error Boundaries любая ошибка во время рендера приводила к "белому экрану" во всем приложении.Что такое Error Boundary?Это компонент класса, который реализует хотя бы один из двух методов жизненного цикла:static getDerivedStateFromError(error) — используется для рендера запасного UI после возникновения ошибки.componentDidCatch(error, errorInfo) — используется для логирования информации об ошибке.Как использовать?Создайте компонент-границу ошибок:class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Обновите состояние так, чтобы следующий рендер показал запасной UI. return { hasError: true }; } componentDidCatch(error, errorInfo) { // Логируйте ошибку в сервис отчетов (например, Sentry) console.error('Error caught by boundary:', error, errorInfo); } render() { if (this.state.hasError) { // Вы можете отрендерить любой запасной UI return this.props.fallback ||

Что-то пошло не так.

; } return this.props.children; } }Оберните им проблемные части приложения:// Можно обернуть все приложение Упс! Произошла ошибка.

}> // Или обернуть только конкретный, ненадежный виджет Вывод Стратегическое размещение Error Boundaries в ключевых точках вашего приложения (например, вокруг маршрутов, навигационных панелей или виджетов от сторонних поставщиков) позволяет изолировать сбои и предотвратить полный крах пользовательского интерфейса, предоставляя пользователю информативное сообщение вместо "белого экрана".