Error Boundaries
Componentes class que capturam erros em sua árvore e exibem UI de fallback em vez de quebrar o app.
Definição
Error Boundaries são componentes class que implementam componentDidCatch ou getDerivedStateFromError. Capturam erros lançados em componentes filhos durante render, lifecycle ou construtores. Não capturam: event handlers, async, SSR, ou erros do próprio Error Boundary.
Problema → Solução
Problema
Um erro em qualquer componente quebra a árvore inteira do React, mostrando tela em branco para o usuário.Solução
Error Boundaries 'isolam' partes da UI — quando algo quebra dentro, mostra fallback UI sem afetar o resto. Combine com Sentry/Bugsnag para reportar.Dica de entrevista
Tip
Use react-error-boundary (lib) para versão moderna com hooks e reset. Coloque ErrorBoundaries em pontos estratégicos (rota, sidebar, feed), não em todo componente.Código
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
Sentry.captureException(error, { extra: info });
}
render() {
if (this.state.hasError) return <h1>Algo deu errado.</h1>;
return this.props.children;
}
}
// Uso
<ErrorBoundary>
<Dashboard />
</ErrorBoundary>Perguntas de entrevista
Q.Por que Error Boundary precisa ser class?▾
A.Os métodos componentDidCatch e getDerivedStateFromError são lifecycle de class. Hooks ainda não têm equivalente direto. Use a lib react-error-boundary para uma API com hooks por baixo.
Q.O que Error Boundaries NÃO capturam?▾
A.1) Erros em event handlers (use try/catch). 2) Async (Promises rejeitadas, fetch). 3) SSR (use error.tsx no Next.js). 4) Erros no próprio Error Boundary. 5) Erros de hidratação (parcialmente).
Q.No Next.js App Router, como tratar erros?▾
A.error.tsx em cada rota cria um Error Boundary automático. global-error.tsx para o root. not-found.tsx para 404. Esses arquivos precisam ser Client Components ('use client').
Termos relacionados
26/122← →