Есть ли в React возможность показывать пользователю ошибку если не работает JSX дерево?

Error Boundaries в React

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

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

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

• getDerivedStateFromError() — обновляет состояние при ошибке
• componentDidCatch() — логирует ошибку

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

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

  componentDidCatch(error, errorInfo) {
    console.error('Ошибка перехвачена:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-container">
          <h2>Что-то пошло не так</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={() => window.location.reload()}>
            Перезагрузить страницу
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

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

Оберни компоненты, которые нужно защитить:

<ErrorBoundary>
  <YourComponent />
</ErrorBoundary>

Можно создать иерархию Error Boundaries для разных частей приложения:

<ErrorBoundary>
  <Header />
  <ErrorBoundary>
    <Main />
  </ErrorBoundary>
  <ErrorBoundary>
    <Sidebar />
  </ErrorBoundary>
</ErrorBoundary>

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

Error Boundaries не перехватывают ошибки:

• В обработчиках событий (используй try-catch)
• В асинхронном коде (setTimeout, Promise)
• В серверном рендеринге (SSR)
• В самом Error Boundary

const handleClick = () => {
  try {
    riskyOperation();
  } catch (error) {
    console.error('Ошибка обработана:', error);
  }
};

Лучшие практики

1. Поместите Error Boundary на высоком уровне иерархии — защитит всё приложение
2. Создавайте granular Error Boundaries — для разных функциональных областей
3. Логируйте ошибки — отправляй на сервис мониторинга (Sentry, LogRocket)
4. Покажи дружественное сообщение — не露露露технические детали
5. Предоставь способ восстановления — кнопка перезагрузки или возврата

Error Boundaries — это критический компонент надёжного приложения, защищающий пользовательский опыт от непредвиденных ошибок в JSX дереве.