Error Boundaries para controle de erros no React §

---

Em React, os Error Boundaries são mecanismos projetados para gerenciar e capturar erros durante a renderização, a vida útil de um componente, ou durante a execução de métodos de ciclo de vida. Esses componentes especiais ajudam a evitar que erros se propaguem pela árvore de componentes, permitindo que a aplicação continue a funcionar, pelo menos em parte, após a ocorrência de um erro.

Caso de uso §

Para implementar um Error Boundary em React, você cria um componente que estende React.Component e define os métodos componentDidCatch e render. O primeiro método é invocado quando um erro ocorre dentro da árvore de renderização de um componente filho. Aqui está um exemplo básico:

import React, { Component } from 'react';
 
class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
 
  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true });
    console.error(error, errorInfo);
  }
 
  render() {
    if (this.state.hasError) {
      return <h1>Algo deu errado.</h1>;
    }
 
    return this.props.children;
  }
}
 
export default ErrorBoundary;

O componente acima registra se ocorreu um erro durante a renderização dos componentes filhos e, se sim, renderiza uma mensagem de erro. Caso contrário, ele renderiza os componentes filhos normalmente.

Apresentando uma UI de Fallback

Ao detectar um erro usando Error Boundaries, você pode renderizar uma UI alternativa no lugar do componente que falhou. Isso pode incluir uma mensagem de erro, botão de recarregamento ou qualquer outra lógica que torne a experiência do usuário mais suave.

Exemplo de uso §

Agora, para utilizar esse Error Boundary, basta envolver os componentes que você deseja proteger.

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
 
function MyComponent() {
  // ... código ...
 
  // Simulando um erro
  if (isError) {
    throw new Error('Algo deu errado!');
  }
 
  // ... mais código ...
}
 
function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

Neste exemplo, se MyComponent lançar um erro, o Error Boundary irá capturá-lo e exibir a mensagem “Algo deu errado” em vez de quebrar a renderização da aplicação inteira.

Limitações §

1. Um porção da aplicação: Error Boundaries são eficazes para lidar com erros em uma porção da sua aplicação, mas não podem capturar erros em manipuladores de eventos, callbacks assíncronos, renderização no servidor e na própria error boundary (ao invés nos seus filhos).

2. Não podem ser usados em Hooks: Não é possível usar Error Boundaries dentro de Hooks. Se um erro ocorrer dentro de um Hook, ele irá se propagar diretamente para o componente pai.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)