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

До появления Error Boundaries любая ошибка во время рендера приводила к "белому экрану" во всем приложении.

Что такое Error Boundary?

Это компонент класса, который реализует хотя бы один из двух методов жизненного цикла:

• static getDerivedStateFromError(error) — используется для рендера запасного UI после возникновения ошибки.

• componentDidCatch(error, errorInfo) — используется для логирования информации об ошибке.

Как использовать?

1. Создайте компонент-границу ошибок:

   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 || <h1>Что-то пошло не так.</h1>;
       }
       return this.props.children;
     }
   }

2. Оберните им проблемные части приложения:

   // Можно обернуть все приложение
   <ErrorBoundary fallback={<p>Упс! Произошла ошибка.</p>}>
     <App />
   </ErrorBoundary>
   
   // Или обернуть только конкретный, ненадежный виджет
   <ErrorBoundary>
     <BuggyComponent />
   </ErrorBoundary>

Вывод

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