O que são error boundaries e o que eles capturam?

Question

Accepted Answer

Um **error boundary** é um componente que captura erros JavaScript lançados **durante a renderização** em sua árvore de filhos, mostra uma UI alternativa em vez de derrubar o aplicativo inteiro e pode registrar o erro. ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## Por que isso importa ✅ Captura: erros em **render**, em **métodos de ciclo de vida** e em construtores dos componentes abaixo dele. ❌ **Não** captura: - Erros em **manipuladores de eventos** (use um `try/catch` normal lá). - Código **assíncrono** (promises, `setTimeout`) — estão fora do fluxo de renderização. - Erros no próprio boundary ou durante **SSR**. ## Notas práticas - Error boundaries devem ser atualmente **componentes de classe** (ou use a biblioteca `react-error-boundary` para uma API amigável com hooks). - Coloque vários boundaries em torno de seções independentes (widgets, rotas) para que um widget com falha não derrube tudo — um único boundary de nível superior transforma qualquer erro em uma página totalmente em branco.