Что такое error boundary в React?

import React, { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
  fallback: ReactNode;
  children: ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null };

  // Вызывается во время рендера — обновляем state, чтобы показать fallback
  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  // Вызывается после рендера — подходит для логирования
  componentDidCatch(error: Error, info: ErrorInfo): void {
    console.error('ErrorBoundary поймал ошибку:', error, info.componentStack);
    // sendToSentry(error, info);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

// Использование
function App() {
  return (
    <ErrorBoundary fallback={<p>Что-то пошло не так. Попробуйте обновить страницу.</p>}>
      <UserProfile />
    </ErrorBoundary>
  );
}

import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';

function FallbackComponent({ error, resetErrorBoundary }: {
  error: Error;
  resetErrorBoundary: () => void;
}) {
  return (
    <div role="alert">
      <p>Произошла ошибка: {error.message}</p>
      <button onClick={resetErrorBoundary}>Попробовать снова</button>
    </div>
  );
}

// Внутри дочернего компонента можно вручную сообщить об ошибке
function DataLoader() {
  const { showBoundary } = useErrorBoundary();

  async function fetchData() {
    try {
      const data = await api.getData();
      return data;
    } catch (err) {
      // Пробрасываем async-ошибку в ближайший error boundary
      showBoundary(err);
    }
  }

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

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={FallbackComponent}
      onError={(error, info) => console.error(error, info)}
    >
      <DataLoader />
    </ErrorBoundary>
  );
}