Які типи помилок ловить Error Boundary?
Помилки, які ловить 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 навіть "не бачить", що вони сталися.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.