Що таке Error Boundary?

ReactJunior~2 хв читання

Визначення

Error Boundary (межа помилок) - це спеціальний React-компонент, який перехоплює помилки у своїх дочірніх компонентах під час рендерингу, у методах життєвого циклу і в конструкторах.

Він не дає "впасти" всьому застосунку, а показує запасний UI (fallback) - наприклад, повідомлення "Щось пішло не так".

Приклад проблеми без Error Boundary

javascript

function BrokenComponent() {
  throw new Error("Упс! Помилка!");
  return <div>OK</div>;
}

function App() {
  return (
    <div>
      <BrokenComponent />
    </div>
  );
}

Результат: застосунок повністю падає - React демонтує все дерево (white screen).

Рішення - Error Boundary

Створюємо "запобіжник":

javascript

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

  static getDerivedStateFromError(error) {
    // Оновлюємо стан, щоб показати fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Можна логувати помилку (Sentry, GlitchTip тощо)
    console.error("Помилку зловлено:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Щось пішло не так</h2>;
    }
    return this.props.children;
  }
}

Використовуємо:

javascript

<ErrorBoundary>
  <BrokenComponent />
</ErrorBoundary>

Тепер помилка не ламає весь застосунок - замість цього показується fallback UI, а помилка логується.

Як це працює

Етап	Що робить React
1	Помилка виникає під час рендеру дочірнього компонента
2	React "піднімається" вгору по дереву компонентів
3	Знаходить найближчий Error Boundary
4	Викликає його методи `getDerivedStateFromError` і `componentDidCatch`
5	Рендерить fallback UI замість проблемного компонента

Що саме ловить Error Boundary

Ловить:

Помилки під час рендеру (render),
Помилки в методах життєвого циклу класових компонентів,
Помилки в конструкторах дочірніх компонентів.

Не ловить:

Помилки в обробниках подій (onClick, onChange),
Помилки в асинхронних функціях (setTimeout, Promise, fetch),
Помилки в самому Error Boundary,
Помилки на сервері при SSR.

Обробка подій - окрема історія

javascript

function App() {
  const handleClick = () => {
    throw new Error("Помилка в onClick");
  };

  return (
    <ErrorBoundary>
      <button onClick={handleClick}>Натисни</button>
    </ErrorBoundary>
  );
}

Тут Error Boundary не спрацює, тому що подія виконується поза React render-фазою.

Потрібен просто try...catch:

javascript

const handleClick = () => {
  try {
    throw new Error("Помилка");
  } catch (e) {
    console.error(e);
  }
};

Приклад з fallback-компонентом

Щоб зробити код чистішим, можна передавати fallback-компонент:

javascript

<ErrorBoundary fallback={<h1>Помилка! Спробуйте пізніше.</h1>}>
  <UserProfile />
</ErrorBoundary>

Реалізація через бібліотеку

Якщо не хочеш писати класи вручну - використай готовий пакет react-error-boundary від Kent C. Dodds:

javascript

import { ErrorBoundary } from "react-error-boundary";

function Fallback({ error, resetErrorBoundary }) {
  return (
    <div>
      <p>Помилка: {error.message}</p>
      <button onClick={resetErrorBoundary}>Спробувати знову</button>
    </div>
  );
}

<ErrorBoundary
  FallbackComponent={Fallback}
  onError={(error, info) => console.log(error, info)}
>
  <DangerousComponent />
</ErrorBoundary>

Хороша практика - групувати Error Boundaries

Щоб помилка не ламала весь екран:

javascript

<App>
  <Header />
  <ErrorBoundary>
    <MainContent />
  </ErrorBoundary>
  <Footer />
</App>

Якщо щось зламається всередині MainContent, шапка і підвал залишаться неушкодженими.

Використання в React 18+

Error Boundaries особливо корисні при:

Concurrent Rendering (React може перервати і відновити рендер);
Suspense (затримки завантаження даних і компонентів);
RSC (Server Components) - помилки на клієнтській стороні потрібно відділяти від серверних.

Для продакшену

Додай звіт про помилки (наприклад, GlitchTip або Sentry):

javascript

componentDidCatch(error, info) {
  sendToGlitchTip(error, info);
}

І ти бачитимеш, де саме і як часто користувачі стикаються з помилками.

Підсумок:

Error Boundary - це компонент-запобіжник, який перехоплює помилки в дочірніх компонентах і показує запасний інтерфейс замість повного краху застосунку.

Головне:

Ловить	Не ловить
Помилки рендеру	Помилки в подіях
Помилки в lifecycle	Помилки в async-коді
Помилки в конструкторах	Помилки при SSR

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.