Для чего нужен Error Boundary в React?

Error Boundary в React

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

Что такое Error Boundary?

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

Когда ошибка ловится?

Error Boundary ловит ошибки:

// 1. Во время рендеринга
function Component() {
  const data = null;
  return data.property; // Ошибка: Cannot read property of null
}

// 2. В методе конструктора
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    throw new Error("Init error");
  }
}

// 3. В lifecycle методах
class MyComponent extends React.Component {
  componentDidMount() {
    fetch("/api").catch(error => {
      throw error;
    });
  }
}

Когда ошибка НЕ ловится?

Error Boundary не ловит:

• Асинхронные ошибки (Promise rejections)
• Event handlers
• setTimeout, setInterval
• Server-side rendering (SSR)
• Самих Error Boundary ошибки

Для асинхронных ошибок нужно использовать try-catch.

Как создать Error Boundary?

Error Boundary - это class компонент с методами:

• static getDerivedStateFromError(error)
• componentDidCatch(error, errorInfo)

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 caught:", error, errorInfo);
    logErrorToService({
      error: error.toString(),
      componentStack: errorInfo.componentStack
    });
  }

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

    return this.props.children;
  }
}

Практический пример

// App.jsx
import { ErrorBoundary } from "./components/ErrorBoundary";
import { Dashboard } from "./pages/Dashboard";
import { UserProfile } from "./pages/UserProfile";

export default function App() {
  return (
    <div>
      <Header />
      
      <ErrorBoundary>
        <Dashboard />
      </ErrorBoundary>
      
      <ErrorBoundary>
        <UserProfile />
      </ErrorBoundary>
      
      <Footer />
    </div>
  );
}

Если в Dashboard ошибка - упадет только Dashboard, остальное приложение продолжит работать.

Обработка асинхронных ошибок

Для асинхронных операций нужно использовать try-catch:

function MyComponent() {
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    
    try {
      const response = await fetch("/api/data");
      if (!response.ok) {
        throw new Error(`API Error: ${response.status}`);
      }
      const data = await response.json();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (error) {
    return <div className="error">Ошибка: {error}</div>;
  }

  if (loading) {
    return <div>Загрузка...</div>;
  }

  return <button onClick={fetchData}>Загрузить</button>;
}

Стратегии обработки ошибок

1. Глобальный Error Boundary

Оборачиваем весь App для ловления критичных ошибок.

2. Локальные Error Boundaries

Оборачиваем отдельные компоненты высокого риска.

3. Комбинирующий подход

Комбинация обоих подходов для лучшей обработки.

Логирование в Error Boundary

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // 1. Консоль для разработки
    console.error("Error:", error);
    
    // 2. Внешний сервис мониторинга (Sentry)
    Sentry.captureException(error);
    
    // 3. Аналитика
    analytics.track("error_boundary_caught", {
      message: error.toString(),
      stack: error.stack
    });
  }

  render() {
    if (this.state.hasError) {
      return <ErrorFallback />;
    }

    return this.props.children;
  }
}

Зачем нужны Error Boundaries?

1. Улучшение пользовательского опыта

• Без Error Boundary: белый экран смерти
• С Error Boundary: дружелюбное сообщение об ошибке

2. Изоляция ошибок

• Ошибка в одном компоненте не крушит все приложение
• Остальные части продолжают работать

3. Отладка в Production

• Вся информация об ошибке логируется
• Можно отследить паттерны ошибок
• Исправлять баги быстрее

4. Мониторинг

• Отправка ошибок в Sentry, LogRocket, Rollbar
• Захватываются ошибки, которые пользователи видят
• Контроль качества приложения

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

1. Используй Error Boundaries для разных уровней
2. Предоставь полезный fallback UI
3. Логируй в production с помощью Sentry
4. Обрабатывай асинхронные ошибки отдельно

Заключение

Error Boundary - это essential паттерн для создания надежных React приложений. Они ловят ошибки при рендеринге, показывают graceful fallback UI, логируют ошибки для анализа и изолируют ошибки от остального приложения.

Любое production приложение должно иметь хотя бы глобальный Error Boundary.