Error Boundary
Тема дорожной карты · React
Error Boundary — это React-компонент на основе класса, перехватывающий JavaScript-ошибки в любом месте дочернего дерева компонентов, логирующий их и отображающий резервный UI вместо аварийного завершения всего приложения. Error Boundary реализует методы жизненного цикла componentDidCatch, getDerivedStateFromError или оба, чтобы перехватывать ошибки фазы рендеринга и жизненного цикла, которые иначе распространились бы необработанными в React. Начиная с React 19, функциональные компоненты сами по себе не могут быть error boundary — необходим компонент на основе класса или обёртка из библиотеки, например react-error-boundary. Error Boundary не перехватывают ошибки внутри обработчиков событий, асинхронного кода или серверного рендеринга; они предназначены специально для синхронных ошибок дерева рендеринга в React-компонентах. Стратегическое размещение error boundary вокруг основных разделов функциональности позволяет React-приложениям деградировать плавно, сохраняя работоспособность остального UI при возникновении неожиданной ошибки в одном поддереве.
Как это работает
Error Boundary покрывает переиспользуемые техники композиции: Compound Components (родитель + дети делят state через Context — <Tabs><TabList><Tab/></TabList></Tabs>), Render Props (компонент принимает функцию, возвращающую JSX — <X>{value => <Y v={value}/>}</X>), Higher-Order Components (функция, оборачивающая компонент — withAuth(Page)), Portals (рендер в другое поддерево DOM через createPortal), Error Boundaries (классовые компоненты, ловящие render-ошибки через componentDidCatch).
Когда применять
Compound Components — для UI-примитивов, где родитель + дети делят контракт (Tabs, Accordion, Select). Portals — для модалок, тултипов, toast, которым нужно сбежать из overflow:hidden или stacking context. Оборачивайте всё приложение (и рискованные поддеревья) в Error Boundary — иначе брошенная render-ошибка обнуляет страницу. Render Props и HOC в основном вытеснены хуками; берите их только в legacy-библиотеках.
Типичные ошибки
Ловушки Error Boundary: переизобретение Compound Components, когда react-aria или Radix уже дают accessible-примитивы; Portal-контент теряет Context родительского React-дерева (portal формально в дереве, но если забыли — accessibility ломается); Error Boundaries, тихо съедающие ошибки без логирования (никогда о них не узнаёте); HOC-пирамида (withA(withB(withC(Page))) — хуки заменили). Используйте готовые библиотеки перед своими абстракциями.