Error Boundary в React: объясняю на пальцах

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

🤔 Что такое Error Boundary и зачем он нужен?

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

Проще говоря, это как try...catch, но для компонентов.

• Он не даёт всему приложению упасть из-за ошибки в маленькой его части (например, в кнопке «лайк»).
• Он показывает пользователю что-то осмысленное («Ой, что-то пошло не так!») вместо белого экрана.
• Он позволяет вам отправить отчёт об ошибке в систему мониторинга (Sentry, LogRocket и т.д.).

“Настоящий профессионал — это тот, кто знает, как изящно обработать свои ошибки.”

🧠 Как это работает? На пальцах

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

1. static getDerivedStateFromError(error) — для обновления состояния, чтобы при следующем рендере показать запасной UI.
2. componentDidCatch(error, errorInfo) — для выполнения «побочных эффектов», например, для логирования ошибки.

Вот как выглядит простейший Error Boundary:

import React from 'react';
 
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
 
  static getDerivedStateFromError(error) {
    // Обновляем состояние, чтобы следующий рендер показал запасной UI.
    return { hasError: true };
  }
 
  componentDidCatch(error, errorInfo) {
    // Можно также сохранить информацию об ошибке в соответствующую службу
    console.error("Uncaught error:", error, errorInfo);
  }
 
  render() {
    if (this.state.hasError) {
      // Можно отрендерить любой запасной UI
      return <h1>Что-то пошло не так.</h1>;
    }
 
    return this.props.children;
  }
}

🧗‍♂️ Как его использовать?

Очень просто! Оберните им любой компонент или группу компонентов, которые могут вызвать ошибку.

import ErrorBoundary from './ErrorBoundary';
import MyRiskyComponent from './MyRiskyComponent';
 
function App() {
  return (
    <div>
      <h1>Добро пожаловать в моё приложение!</h1>
      <ErrorBoundary>
        <MyRiskyComponent />
      </ErrorBoundary>
    </div>
  );
}

Теперь, если MyRiskyComponent или любой его дочерний компонент выбросит ошибку во время рендеринга, пользователь увидит <h1>Что-то пошло не так.</h1>, а остальная часть приложения (заголовок h1) продолжит работать как ни в чём не бывало.

📌 Важно помнить

Error Boundaries не ловят ошибки в:

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

✅ Используйте Error Boundaries как подушки безопасности: размещайте их в стратегически важных местах вашего приложения, чтобы защитить пользовательский опыт от неожиданных сбоев.