Como você lida com erros em tempo de execução numa árvore React?

Error boundaries capturam erros lançados durante a renderização, em métodos de ciclo de vida e em construtores abaixo delas, e então renderizam um fallback em vez de desmontar a aplicação inteira. Elas ainda são componentes de classe usando getDerivedStateFromError e componentDidCatch, ou uma biblioteca wrapper. Elas não capturam erros em event handlers, callbacks assíncronos ou na própria boundary, então esses precisam de try e catch normais mais reporte.

Error boundaries capturam qualquer coisa lançada enquanto a subárvore abaixo delas renderiza, e trocam por um fallback para que um widget quebrado não derrube a página. Eu normalmente uso o wrapper react-error-boundary em vez de escrever a classe eu mesmo, já que ele me dá um handler de reset de graça. As lacunas são a parte que as pessoas esquecem: nada lançado num onClick, num setTimeout ou numa rejeição de promise não tratada chega numa boundary, então isso ainda precisa de try e catch com um estado de erro explícito. Sobre posicionamento, uma boundary só na raiz é basicamente uma tela de crash mais bonita. O que eu de fato faço é embrulhar cada região que é útil de forma independente, então a sidebar, o painel principal e qualquer embed de terceiro têm cada um a sua, com um fallback que diz o que falhou e oferece um retry que reseta a boundary e busca os dados de novo. Toda boundary reporta para o nosso rastreador de erros com o stack de componentes e o contexto do usuário no componentDidCatch, e no React 19 eu também configuro o onUncaughtError na raiz para que nada escape sem log.