ErrorBoundary Error Boundary (Limite de Erro)
Última atualização: 2026-11-03
ErrorBoundary Error Boundary (Limite de Erro)
Um ErrorBoundary é uma rede de segurança em nível de componente: ele captura erros na árvore de filhos e renderiza uma UI de reserva em vez de uma página em branco. É um componente de classe (getDerivedStateFromError / componentDidCatch) — sem equivalente em Hook antes do React 19.
| Grupo | Dados e Engenharia |
|---|---|
| Tipo | Padrão |
| Desde | React 16 |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
class ErrorBoundary extends Component {
state = { hasError: false }
static getDerivedStateFromError() { return { hasError: true } }
componentDidCatch(error, info) { /* report */ }
render() { return this.state.hasError ? <Fallback/> : this.props.children }
}⚙️ Parâmetros
| children | A árvore de filhos protegida — qualquer erro de renderização dentro dela é capturado. |
|---|---|
| fallback (custom) | UI de reserva: passe via prop (fallback={<UI/>}) ou mantenha no estado do boundary. |
Retorna：Nada (componente de classe). Renderiza children quando saudável; UI de reserva quando um filho lança erro.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Sem página em branco: a fallback "Algo quebrou, mas a página vive" aparece — o erro de renderização do Bomb foi capturado pelo boundary.💡 Pontos-chave
⚠️ Aviso Os boundaries NÃO capturam: handlers de evento, callbacks assíncronos, erros de SSR, ou erros lançados por eles mesmos. Use try/catch nos handlers.
💡 Dica Aplicativos em produção geralmente usam o pacote react-error-boundary (API estilo hook) em vez de escrever a classe à mão.
ℹ️ Informação Os boundaries funcionam por posição na árvore: no nível de rota salvam a página; no nível de card apenas um card é sacrificado.
🏷️ Mais Dados e Engenharia
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Por que um error boundary precisa ser um componente de classe?
R Porque getDerivedStateFromError / componentDidCatch ainda não têm forma de Hook; a equipe do React recomenda o pacote react-error-boundary.
P Um error boundary captura erros lançados em um handler de evento?
R Não. Handlers rodam fora da renderização — use try/catch lá; boundaries cobrem apenas erros de render e de ciclo de vida.
P Em qual nível o boundary deve ser colocado?
R Coloque pelo raio de explosão: nível de rota salva a página; nível de widget salva uma região. Envolva áreas críticas (como colunas kanban) individualmente.
