Frontend Academy · Aula

Limites de erros

Implementar limites de erros baseados em classes com componentDidCatch e getDerivedStateFromError para impedir que erros de renderização não tratados façam toda a aplicação falhar.

Limites de erros é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que usar limites de erro

Por padrão, um erro não capturado durante a renderização, em um método do ciclo de vida ou em um construtor derruba toda a árvore do React. Limites de erro capturam esses erros em uma subárvore e permitem renderizar uma alternativa.

Somente componentes de classe

Limites de erro devem ser componentes de classe (ainda em 2026 — não existe um equivalente em forma de gancho). O gancho useErrorBoundary existe em bibliotecas como react-error-boundary.

getDerivedStateFromError

Método estático chamado quando um descendente lança um erro. Retorne uma atualização de estado que acione a renderização alternativa.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

componentDidCatch para registro

Use componentDidCatch para registrar o erro em um serviço (Sentry, Datadog) — ele recebe tanto o erro quanto a pilha de componentes do React.

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    contexts: { react: { componentStack: errorInfo.componentStack } }
  });
}

Encapsulando a raiz do aplicativo

Encapsule o App de nível superior em um limite de erro para evitar a tela branca da morte.

<ErrorBoundary fallback={<GlobalErrorPage />}>
  <App />
</ErrorBoundary>

Limites granulares por rota ou componente

Um limite global é o mínimo. Adicione limites por rota para que uma falha em uma seção não deixe o aplicativo inteiro em branco.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={
    <ErrorBoundary fallback={<DashboardError />}>
      <Dashboard />
    </ErrorBoundary>
  } />
</Routes>

O que os limites de erro não capturam

Os limites de erro NOT capturam: erros em manipuladores de eventos, código assíncrono (setTimeout, promessas), erros lançados durante o SSR e erros no próprio limite. Use try/catch nesses casos.

Erros em manipuladores de eventos

Envolva os manipuladores de eventos em try/catch e chame uma função manual reportError.

function Button() {
  function onClick() {
    try {
      riskyOperation();
    } catch (err) {
      reportError(err);
      toast.error('Something went wrong');
    }
  }
  return <button onClick={onClick}>Click</button>;
}

Biblioteca react-error-boundary

O pacote da comunidade react-error-boundary oferece uma API adequada para componentes de função, com suporte à redefinição.

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onReset={() => refetch()}
>
  <DataView />
</ErrorBoundary>

Redefinição após a recuperação

Ofereça uma forma de recuperação, como um botão de tentar novamente ou uma mudança de rota. O limite deve redefinir seu estado para deixar de exibir o conteúdo alternativo.

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  reset = () => this.setState({ hasError: false });
  render() {
    if (this.state.hasError) {
      return <button onClick={this.reset}>Retry</button>;
    }
    return this.props.children;
  }
}

Desenvolvimento versus produção

Em desenvolvimento, o React ainda renderiza a sobreposição vermelha de erro mesmo com um limite — isso é intencional. Em produção, somente o conteúdo alternativo do limite é exibido.

Boas práticas

1) Limite global na raiz do app. 2) Limites por rota. 3) Limites granulares ao redor de widgets independentes. 4) Sempre registre os erros em um serviço de rastreamento. 5) Mostre ações de recuperação, como tentar novamente ou voltar à página inicial. 6) Não silencie os erros.

Verificação rápida

Que tipo de erros os limites de erro do React NOT capturam?

Recapitulação: limites de erro

Componente de classe com getDerivedStateFromError estático e componentDidCatch. Envolve uma subárvore para capturar erros durante a renderização. Não captura erros em manipuladores de eventos, código assíncrono nem SSR. Coloque um limite global na raiz do app, além de limites por rota e por widget. Registre os erros no Sentry. Ofereça uma ação de recuperação. A biblioteca react-error-boundary proporciona uma experiência mais simples.

Perguntas Frequentes

A aula “Limites de erros” é grátis?

Sim — o texto completo de “Limites de erros” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Limites de erros”?

Implementar limites de erros baseados em classes com componentDidCatch e getDerivedStateFromError para impedir que erros de renderização não tratados façam toda a aplicação falhar. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Limites de erros”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Frontend Academy