Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Error Boundary?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

> **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 |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати616 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.