Como Lidar com Erros em React: Error Boundaries e Interfaces de Fallback Inteligentes

Erros em aplicações React podem causar frustração tanto para desenvolvedores quanto para usuários. Diferente de erros em requisições HTTP ou validações de formulário, que podem ser tratados diretamente, falhas que ocorrem em tempo de execução dentro da árvore de componentes precisam de estratégias mais específicas para evitar que a aplicação quebre completamente. É aí que entram os Error Boundaries e a Fallback UI.

O que são Error Boundaries?

Introduzidos a partir da versão 16 do React, os Error Boundaries (ou Limites de Erro) são componentes especiais capazes de capturar erros de JavaScript em qualquer parte da árvore de componentes abaixo deles. Quando um erro é capturado, o React não renderiza mais a árvore problemática e permite que o Error Boundary forneça uma interface alternativa (fallback) ao usuário.

Error Boundaries não capturam todos os tipos de erro. Eles são eficazes para falhas durante a renderização, em métodos do ciclo de vida e em construtores de componentes de classe. Eles não capturam erros de eventos assíncronos, callbacks, ou efeitos (hooks como useEffect). Nesses casos, é preciso tratamento individualizado com try/catch ou promessas.

Como criar um Error Boundary

Error Boundaries só podem ser criados usando componentes de classe. Um exemplo básico de implementação seria:

Copiar
import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Aqui você pode logar o erro para serviços como Sentry ou LogRocket
    console.error("Erro capturado:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Algo deu errado. Tente novamente mais tarde.</h2>;
    }

    return this.props.children;
  }
}

Esse componente pode ser usado como um "wrapper" em torno de qualquer parte da sua interface que possa falhar:

Copiar
<ErrorBoundary>
  <ComponenteQuePodeFalhar />
</ErrorBoundary>

Fallback UI: mantendo a experiência fluida

O principal papel do Error Boundary é fornecer uma Fallback UI — ou seja, uma interface alternativa para o usuário no caso de erro. Essa interface deve ser clara, amigável e, sempre que possível, fornecer um caminho de ação: tentar novamente, atualizar a página, ou reportar o erro.

Você também pode personalizar a fallback UI dinamicamente, usando o erro capturado para exibir mensagens diferentes:

Copiar
class ErrorBoundary extends React.Component {
  // ...
  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>Oops! Algo não saiu como esperado.</h2>
          <button onClick={() => window.location.reload()}>Recarregar</button>
        </div>
      );
    }

    return this.props.children;
  }
}

Error Boundaries com React 18 e frameworks modernos

Com a evolução do React e da arquitetura moderna com frameworks como Next.js e Remix, é cada vez mais comum usar renderização híbrida (SSR + CSR) e code splitting. Nestes cenários, Error Boundaries se tornam ainda mais importantes, pois ajudam a prevenir falhas que poderiam comprometer páginas inteiras.

Além disso, ferramentas como react-error-boundary, uma biblioteca de terceiros, oferecem uma API baseada em hooks para facilitar o uso em projetos funcionais. Essa abordagem permite que você defina handlers de erro e fallback de forma mais declarativa:

Copiar
import { ErrorBoundary } from "react-error-boundary";

function FallbackComponent({ error, resetErrorBoundary }) {
  return (
    <div>
      <p>Erro: {error.message}</p>
      <button onClick={resetErrorBoundary}>Tentar novamente</button>
    </div>
  );
}

<ErrorBoundary
  FallbackComponent={FallbackComponent}
  onReset={() => {
    // lógica de reset
  }}
>
  <ComponenteQuePodeFalhar />
</ErrorBoundary>

Lidar com erros em React vai muito além de capturar exceções em funções isoladas. É sobre garantir que sua aplicação continue funcional mesmo quando algo inesperado acontece. Error Boundaries são ferramentas essenciais para criar aplicações resilientes, que falham de forma elegante e recuperável.