Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які типи помилок ловить Error Boundary?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Error Boundary** ловить помилки в рендері, конструкторі класу, lifecycle-методах, хуках під час рендера та в дочірніх компонентах дерева, але **не ловить** помилки в обробниках подій, асинхронному коді (`setTimeout`, `Promise`, `fetch`), у собі самому чи при SSR. **Ключове:** Error Boundary обробляє тільки синхронні помилки в React-циклі рендера, а помилки в подіях і асинхронних колбеках відбуваються вже поза стеком React.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Помилки, які **ловить** Error Boundary | Тип помилки | Де відбувається | Приклад | Ловить? | |---|---|---|---| | Помилка в рендері | під час `render()` дочірнього компонента | `return user.name; // user = undefined` | Так | | Помилка в конструкторі класу | всередині `constructor()` компонента | `constructor() { throw new Error("fail"); }` | Так | | Помилка в lifecycle-методах | `componentDidMount`, `componentDidUpdate` тощо | `componentDidMount() { throw new Error(); }` | Так | | Помилка в хуках (під час рендера) | `useMemo`, `useState`, `useEffect` тощо (якщо кидає під час рендера) | `throw new Error("помилка в useMemo")` | Так | | Помилка в нащадках (дочірніх компонентах) | в будь-якому компоненті всередині дерева `<ErrorBoundary>` | `Child -> Grandchild` | Так | | Помилка в Suspense fallback / lazy-компонентах | при завантаженні лінивого компонента | `React.lazy(() => import('./Broken'))` | Так (через найближчий Error Boundary) | --- ## Помилки, які **не ловить** Error Boundary | Тип помилки | Де відбувається | Приклад | Ловить? | Що робити | |---|---|---|---|---| | **Помилки в обробниках подій** | всередині `onClick`, `onChange` тощо | `<button onClick={() => { throw new Error(); }}>` | Ні | Використовувати `try...catch` всередині обробника | | **Помилки в асинхронному коді** | `setTimeout`, `Promise`, `async/await`, `fetch` | `setTimeout(() => { throw new Error(); })` | Ні | Ловити через `try...catch` або `.catch()` | | **Помилки в самому Error Boundary** | всередині методів `render`, `componentDidCatch`, `fallback` | Ні | Обгортати Error Boundary в інший Error Boundary | | | **Помилки при серверному рендерингу (SSR)** | при виконанні на сервері | Ні | Логувати через серверний обробник | | | **Помилки в layout-ефектах / cleanup'ах** | всередині cleanup `useEffect` | Ні (React 18 це частково змінив, але краще не розраховувати) | try/catch всередині ефекту | | | **Помилки поза React (зовнішні бібліотеки, window)** | наприклад, в `addEventListener` або `window.onerror` | Ні | Використовувати глобальні обробники помилок (`window.onerror`, `window.onunhandledrejection`) | | --- ## Чому не ловить події та async-код Тому що Error Boundary обробляє **тільки синхронні помилки в React-циклі рендера**. Помилки в подіях і асинхронних колбеках відбуваються **вже після рендера**, поза стеком React → тому React навіть "не бачить", що вони сталися.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.