Без обробки помилка під час рендеру будь-якого компонента розмонтовує весь застосунок - користувач бачить порожню сторінку. Межа помилок перехоплює помилки свого піддерева й показує запасний інтерфейс.
Межі помилок досі пишуться лише класами - хука-аналога немає:
class ErrorBoundary extends React.Component {
state = { error: null };
static getDerivedStateFromError(error) {
return { error }; // наступний рендер покаже fallback
}
componentDidCatch(error, info) {
reportError(error, info.componentStack); // у моніторинг
}
render() {
if (this.state.error) return this.props.fallback;
return this.props.children;
}
}
<ErrorBoundary fallback={<p>Віджет не завантажився</p>}>
<RevenueChart />
</ErrorBoundary>
На практиці частіше беруть готовий пакет react-error-boundary - з функцією скидання (resetErrorBoundary), ключами для автоматичного скидання і хуком useErrorBoundary.
Що межа помилок ловить: помилки під час рендеру, у хуках життєвого циклу, в конструкторах дочірніх компонентів - усе, що відбувається, коли React викликає ваш код у дереві. Також відхилений проміс, прочитаний через use().
Чого НЕ ловить:
- обробники подій (
onClick) - там звичайнийtry/catch; - асинхронний код -
setTimeout, проміси безuse(), колбеки запитів; - помилки в самій межі - вони йдуть до наступної межі вище;
- серверний рендер - на сервері помилки обробляються інакше.
Щоб передати помилку з обробника чи асинхронного коду в межу, її «кидають» під час рендеру: зберегти в стан і throw у рендері, або showBoundary(error) з react-error-boundary.
Де ставити межі:
- верхня - на весь застосунок, щоб замість білого екрана був зрозумілий текст і кнопка оновлення;
- навколо незалежних віджетів - графік, коментарі, рекомендації: зламаний віджет не зносить сторінку;
- на рівні маршруту - роутери (React Router, Next.js
error.tsx) мають власні межі.
React 19: опції кореня onCaughtError і onUncaughtError у createRoot - централізоване логування помилок, перехоплених межами і неперехоплених.
