Границы ошибок — единственное место, где ещё нужен класс

interface ReportProps {
  broken: boolean;
}

function Report({ broken }: ReportProps) {
  if (broken) throw new Error("в отчёте нет поля total");
  return <p>Отчёт: 12 400</p>;
}

function App() {
  const [broken, setBroken] = React.useState(false);
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button id="inc" onClick={() => setCount((c) => c + 1)}>
        Нажато: {count}
      </button>
      <Report broken={broken} />
      <button id="break" onClick={() => setBroken(true)}>
        Сломать отчёт
      </button>
    </div>
  );
}

const root = document.getElementById("root")!;
ReactDOM.createRoot(root).render(<App />);
setTimeout(() => document.getElementById("inc")!.click(), 50);
setTimeout(() => document.getElementById("break")!.click(), 100);
setTimeout(() => console.log("в корне осталось:", JSON.stringify(root.innerHTML)), 200);

interface BoundaryProps {
  children?: React.ReactNode;
}

interface BoundaryState {
  error: Error | null;
}

class ErrorBoundary extends React.Component<BoundaryProps, BoundaryState> {
  state: BoundaryState = { error: null };

  // React зовёт этот метод во время рендера, вместо упавшего поддерева,
  // поэтому делать здесь можно ровно одно — вернуть новое состояние
  static getDerivedStateFromError(error: Error): BoundaryState {
    return { error };
  }

  render() {
    if (this.state.error) return <p>Отчёт не открылся: {this.state.error.message}</p>;
    return this.props.children;
  }
}

interface ReportProps {
  broken: boolean;
}

function Report({ broken }: ReportProps) {
  if (broken) throw new Error("в отчёте нет поля total");
  return <p>Отчёт: 12 400</p>;
}

function App() {
  const [broken, setBroken] = React.useState(false);
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button id="inc" onClick={() => setCount((c) => c + 1)}>
        Нажато: {count}
      </button>
      <ErrorBoundary>
        <Report broken={broken} />
      </ErrorBoundary>
      <button id="break" onClick={() => setBroken(true)}>
        Сломать отчёт
      </button>
    </div>
  );
}

const root = document.getElementById("root")!;
ReactDOM.createRoot(root).render(<App />);
// сначала ломаем отчёт, потом жмём счётчик: проверяем, пережил ли он падение
setTimeout(() => document.getElementById("break")!.click(), 50);
setTimeout(() => document.getElementById("inc")!.click(), 100);
setTimeout(() => console.log("в корне:", JSON.stringify(root.innerHTML)), 200);

interface BoundaryProps {
  children?: React.ReactNode;
}

interface BoundaryState {
  error: Error | null;
}

class ErrorBoundary extends React.Component<BoundaryProps, BoundaryState> {
  state: BoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): BoundaryState {
    return { error };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    // из стека компонентов вытаскиваем только имена: путь по разметке
    const names = (info.componentStack ?? "")
      .split("\n")
      .map((line) => line.trim().split(" ")[1])
      .filter(Boolean);
    console.log("упало в:", error.message);
    console.log("путь:", names.join(" <- "));
  }

  render() {
    if (this.state.error) return <p>Отчёт не открылся: {this.state.error.message}</p>;
    return this.props.children;
  }
}

interface ReportProps {
  broken: boolean;
}

function Report({ broken }: ReportProps) {
  if (broken) throw new Error("в отчёте нет поля total");
  return <p>Отчёт: 12 400</p>;
}

function App() {
  return (
    <div>
      <ErrorBoundary>
        <Report broken={true} />
      </ErrorBoundary>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

interface BoundaryProps {
  name: string;
  children?: React.ReactNode;
}

interface BoundaryState {
  error: Error | null;
}

class ErrorBoundary extends React.Component<BoundaryProps, BoundaryState> {
  state: BoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): BoundaryState {
    return { error };
  }

  render() {
    if (this.state.error) {
      return (
        <p>
          {this.props.name} поймала: {this.state.error.message}
        </p>
      );
    }
    return this.props.children;
  }
}

function Now() {
  React.useEffect(() => {
    throw new Error("упало в теле эффекта");
  }, []);
  return <p>первый виджет</p>;
}

function Late() {
  React.useEffect(() => {
    setTimeout(() => {
      throw new Error("упало в таймере");
    }, 30);
  }, []);
  return <p>второй виджет</p>;
}

const root = document.getElementById("root")!;
ReactDOM.createRoot(root).render(
  <div>
    <ErrorBoundary name="Граница A">
      <Now />
    </ErrorBoundary>
    <ErrorBoundary name="Граница B">
      <Late />
    </ErrorBoundary>
  </div>
);
setTimeout(() => console.log("в корне:", JSON.stringify(root.innerHTML)), 300);

interface BoundaryProps {
  children?: React.ReactNode;
}

interface BoundaryState {
  error: Error | null;
}

class ErrorBoundary extends React.Component<BoundaryProps, BoundaryState> {
  state: BoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): BoundaryState {
    return { error };
  }

  render() {
    if (this.state.error) return <p>Поймано: {this.state.error.message}</p>;
    return this.props.children;
  }
}

function sendToServer(): void {
  throw new Error("сервер ответил 500");
}

function Saver() {
  const [failure, setFailure] = React.useState<Error | null>(null);
  if (failure) throw failure;
  const saveAndCatch = () => {
    try {
      sendToServer();
    } catch (error) {
      setFailure(error instanceof Error ? error : new Error(String(error)));
    }
  };
  return (
    <div>
      <button id="direct" onClick={() => sendToServer()}>
        Сохранить
      </button>
      <button id="caught" onClick={saveAndCatch}>
        Сохранить и поймать
      </button>
    </div>
  );
}

const root = document.getElementById("root")!;
ReactDOM.createRoot(root).render(
  <ErrorBoundary>
    <Saver />
  </ErrorBoundary>
);
setTimeout(() => document.getElementById("direct")!.click(), 50);
setTimeout(() => console.log("после первой кнопки:", JSON.stringify(root.innerHTML)), 100);
setTimeout(() => document.getElementById("caught")!.click(), 150);
setTimeout(() => console.log("после второй кнопки:", JSON.stringify(root.innerHTML)), 250);

interface BoundaryProps {
  onRetry: () => void;
  children?: React.ReactNode;
}

interface BoundaryState {
  message: string | null;
}

class ErrorBoundary extends React.Component<BoundaryProps, BoundaryState> {
  state: BoundaryState = { message: null };

  static getDerivedStateFromError(error: Error): BoundaryState {
    return { message: error.message };
  }

  render() {
    if (this.state.message !== null) {
      return (
        <div>
          <p>Не открылось: {this.state.message}</p>
          <button id="retry" onClick={this.props.onRetry}>
            Попробовать снова
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

interface ReportProps {
  broken: boolean;
}

function Report({ broken }: ReportProps) {
  if (broken) throw new Error("в отчёте нет поля total");
  return <p>Отчёт: 12 400</p>;
}

function App() {
  const [broken, setBroken] = React.useState(true);
  const [attempt, setAttempt] = React.useState(0);
  const retry = () => {
    setBroken(false);
    setAttempt((n) => n + 1);
  };
  return (
    <ErrorBoundary key={attempt} onRetry={retry}>
      <Report broken={broken} />
    </ErrorBoundary>
  );
}

const root = document.getElementById("root")!;
ReactDOM.createRoot(root).render(<App />);
setTimeout(() => console.log("до нажатия:", JSON.stringify(root.innerHTML)), 50);
setTimeout(() => document.getElementById("retry")!.click(), 100);
setTimeout(() => console.log("после нажатия:", JSON.stringify(root.innerHTML)), 200);