Типи помилок у React-застосунку

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

Усі типи помилок у 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 і залежностей.

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

Невірний шлях до маршруту ( не збігається з 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 основних типів помилок:

Помилки рендера (JSX / undefined)

Помилки ефектів і життєвого циклу

Помилки обробників подій

Асинхронні помилки (fetch, Promise, async/await)

Помилки конфігурації та інфраструктури (SSR, роутинг, збірка)

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

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

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

Premium

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