Какие ошибки Error Boundary не может перехватывать?

Что такое Error Boundary и его ограничения

Error Boundary — это компонент React, который ловит ошибки JavaScript в дочернем дереве компонентов во время рендеринга, в методах жизненного цикла и в конструкторах. Однако он не является универсальным перехватчиком всех ошибок в приложении.

Какие ошибки не перехватываются

• Обработчики событий: Ошибки внутри onClick, onChange и других событий не попадают в Error Boundary, так как они выполняются вне цикла рендеринга React. Для их обработки используйте обычный try/catch.
• Асинхронный код: Ошибки в setTimeout, setInterval, Promise (включая async/await) не перехватываются. Пример:

  setTimeout(() => { throw new Error('Ошибка'); }, 1000);

  Нужно использовать try/catch или .catch() для промисов.
• Серверный рендеринг (SSR): Error Boundary работает только в браузере, на сервере он не применяется.
• Собственные ошибки Error Boundary: Если сам компонент-граница выбрасывает ошибку, она не будет перехвачена им же.

Пример кода

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) return <h1>Ошибка</h1>;
    return this.props.children;
  }
}

// Ошибка в обработчике не будет поймана
<button onClick={() => { throw new Error('Click error'); }}>Click</button>

Для обработки таких случаев используйте глобальный обработчик window.onerror или try/catch.

Вывод

Error Boundary полезен для изоляции ошибок рендеринга, но не заменяет другие методы обработки ошибок. Для событий и асинхронного кода применяйте try/catch или специальные библиотеки.