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

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

Допрацюйте відповідь до «Типи помилок у React-застосунку». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## Усі типи помилок у React-застосунку можна поділити на 5 категорій:

| Категорія | Де відбувається | Приклад |
|---|---|---|
| 1. Помилки рендера | під час побудови JSX (під час render) | Cannot read property 'name' of undefined |
| 2. Помилки ефектів і життєвого циклу | усередині useEffect, useLayoutEffect, componentDidMount тощо | помилка під час виклику API, звернення до розмонтованого елемента |
| 3. Помилки в подіях і колбеках | під час кліків, сабмітів, вводу тощо | onClick викликає функцію з помилкою |
| 4. Асинхронні помилки | у fetch, setTimeout, Promise, async/await | TypeError: Failed to fetch, UnhandledPromiseRejection |
| 5. Помилки інфраструктури / конфігурації | під час збірки, рендерингу, гідратації або взаємодії з сервером | SSR hydration mismatch, модуль не знайдено, помилка імпорту, некоректні пропси |

---

## 1. Помилки рендера

Виникають під час рендер-фази, коли React викликає компонент (функціональний або класовий), щоб побудувати віртуальне дерево.

### Приклади коду:

```javascript
// data is undefined
return <div>{data.name}</div>;

// mapping over null
return data.map(item => <p>{item}</p>);
```

### Наслідки:

- Переривається render().
- React «падає» до найближчого Error Boundary.
- Якщо його немає, весь застосунок розмонтується (white screen of death).

Рішення:

- Перевірки перед рендером (if (!data) return null;)
- Мемоізація і Skeleton-компоненти.
- Error Boundary навколо великих секцій.

---

## 2. Помилки в ефектах (side effects)

Помилки, які виникають:

- у useEffect() і useLayoutEffect()
- у методах життєвого циклу (componentDidMount, componentDidUpdate, componentWillUnmount)

### Приклади коду:

```javascript
useEffect(() => {
  fetch("/api/data")
    .then(res => res.json())
    .then(setData)
    .catch(() => setError(true)); // without catch - UnhandledPromiseRejection
}, []);
```

### Наслідки:

- Помилка не ламає весь React, але може зупинити ефект.
- Якщо помилку не перехоплено, вона з'явиться в консолі або в window.onunhandledrejection.

Рішення:

- Завжди огортати асинхронні виклики в try/catch.
- Скасовувати ефекти при розмонтуванні (cleanup).
- Використовувати AbortController для мережевих запитів.

---

## 3. Помилки в обробниках подій

Виникають під час натискань, введення даних, сабмітів тощо.

### Приклад:

```javascript
<button onClick={() => doSomething(undefined.value)}>Click</button>
```

### Поведінка:

- Помилка не впливає на інші компоненти (React обробляє події через синтетичну систему).
- Але користувач може втратити UI-взаємодію.

Рішення:

- try/catch усередині обробників.
- Логування (Sentry, GlitchTip, console.error).

---

## 4. Асинхронні помилки

Помилки поза React-циклом: у Promise, fetch, async/await, таймерах тощо.

### Приклади коду:

```javascript
async function loadData() {
  const res = await fetch("/api/wrong-url"); // 404 → error
  const data = await res.json(); // throws an exception
}
```

### Поведінка:

- Не перехоплюються Error Boundary.
- Якщо не перехоплені, виникає UnhandledPromiseRejection і застосунок падає в продакшні (особливо за SSR).

Рішення:

- try/catch навколо await.
- .catch() у Promise.
- Глобальний обробник:

```javascript
  window.addEventListener("unhandledrejection", e => logError(e.reason));
  ```

---

## 5. Помилки конфігурації / інфраструктури

Помилки на рівні збірки, маршрутизації, SSR і залежностей.

### Приклади коду:

- Невірний шлях до маршруту (<Route path> не збігається з URL)
- Помилка імпорту (Cannot find module)
- Hydration mismatch за SSR (Warning: Text content did not match)
- Помилка у Webpack/Vite під час збірки (Unexpected token)

Рішення:

- Налаштування середовища (env variables, шляхи, аліаси)
- Логування і моніторинг
- Тести для маршрутів і SSR

---

## Додатково: логічні помилки

Не завжди винятки, але призводять до неправильної логіки:

- неправильний стан під час оновлення;
- зациклення через неправильні залежності в useEffect;
- витоки пам'яті (setState після розмонтування);
- некоректні ключі в списках (key).

Рішення:

- ESLint + React Hooks plugin
- TypeScript (строга типізація)
- React DevTools + Profiler

---

## Способи захисту

| Інструмент | Для чого потрібен |
|---|---|
| Error Boundary | Перехоплення помилок рендера і lifecycle |
| try/catch | Обробка помилок у подіях і async-коді |
| window.onerror / onunhandledrejection | Глобальне перехоплення |
| Sentry / GlitchTip / LogRocket | Моніторинг помилок у продакшні |
| TypeScript + ESLint | Запобігання логічним помилкам |
| React Testing Library / Jest | Тестування крайніх випадків |

---

## Підсумок:

> У React-застосунку можуть виникати 5 основних типів помилок:
>
> 1. Помилки рендера (JSX / undefined)
> 2. Помилки ефектів і життєвого циклу
> 3. Помилки обробників подій
> 4. Асинхронні помилки (fetch, Promise, async/await)
> 5. Помилки конфігурації та інфраструктури (SSR, роутинг, збірка)

React сам по собі не перехоплює всі помилки, лише ті, що виникають під час рендера. Тому захист - це комбінація Error Boundaries, try/catch і грамотного моніторингу.

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

Для рев’юера

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

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