Se você trabalhou com o React por um tempo, pode ter encontrado uma mensagem que diz “Considere adicionar um limite de erro para sua árvore para personalizar o comportamento de tratamento de erros.” Você deve ter visto isso no console do seu navegador sempre que seus componentes colidir.
O React recomenda usar um limite de erro para fornecer uma melhor experiência do usuário quando ocorrer um erro.
Qual é a classe de limite de erro em React?
Limites de erro funcionam como o bloco try/catch no JavaScript vanilla. A diferença é que eles capturam os erros que ocorrem nos componentes do React. Se ocorrer um erro em um componente da interface do usuário, o React desmonta a árvore desse componente e a substitui pela interface do usuário de fallback que você definiu. Isso significa que um erro afeta apenas o componente em que ocorre e o restante do aplicativo funciona conforme o esperado.
De acordo com Reagir documentação, classes de limite de erro não detectam erros em:
- Manipuladores de eventos.
- Código assíncrono.
- Código do lado do servidor.
- Erros lançados no próprio limite de erro (em vez de seus filhos).
Para os erros acima, você pode usar o bloco try/catch.
Por exemplo, para detectar um erro que ocorre no manipulador de eventos, use o seguinte código:
funçãoEventComponent() {
const [erro, setError] = useState(nulo)const handleClick = () => {
tentar {
// Faça alguma coisa
} pegar (erro) {
setError (erro)
}
}
retornar (
<>
<div>{erro? erro: ""}div>
<botãoao clicar={handleClick}>Botãobotão>
)
}
Use limites de erro para detectar erros apenas em componentes React.
Criando uma classe de limite de erro
Você pode criar um limite de erro definindo uma classe que contenha um ou ambos os seguintes métodos:
- estático getDerivedStateFromError()
- componenteDidCatch()
A função getDerivedStateFromError() atualiza o estado do componente assim que o erro é detectado enquanto você pode usar componentDidCatch() para registrar informações de erro no console. Você também pode enviar os erros para um serviço de relatório de erros.
Abaixo está um exemplo mostrando como criar uma classe de limite de erro simples.
aulaErrorBoundaryestendeReagir.Componente{
construtor(adereços) {
super(adereços);
esse.estado = { erro: falso };
}estáticogetDerivedStateFromError(erro){
// Atualize o estado para que a próxima renderização mostre a UI de fallback.
retornar { erro: erro };
}componentDidCatch (erro, errorInfo) {
// Registra o erro em um serviço de relatório de erros
}render() {
se (esse.estado.erro) {
// Crie uma UI de fallback personalizada aqui
retornar<h1>Parece haver um problema.h1>;
}
retornaresse.props.crianças;
}
}
exportarpadrão ErrorBoundary;
Quando ocorre um erro, getDerivedStateFromError() atualizará o estado e, consequentemente, acionará uma nova renderização que exibirá a UI de fallback.
Se você não deseja criar a classe de limite de erro do zero, use o pacote NPM react-error-boundary. Este pacote fornece o componente ErrorBoundary que envolve os componentes que você acha que podem gerar erros.
Usando a classe de limite de erro
Para lidar com erros, envolva os componentes com o componente de classe de limite de erro. Você pode encapsular o componente de nível superior ou componentes individuais.
Se você agrupar o componente de nível superior, a classe de limite de erro manipulará os erros lançados por todos os componentes no aplicativo React.
<ErrorBoundary>
<Aplicativo/>
ErrorBoundary>
Se você agrupar um componente individual com um ErrorBoundary, um erro nesse componente não afetará a renderização de outro componente.
<ErrorBoundary>
<Perfil/>
ErrorBoundary>
Por exemplo, um erro no componente de perfil não afetará a renderização de outro componente, como o componente Hero. Embora o componente de perfil possa travar, o restante do aplicativo funcionará bem. Isso é muito melhor do que renderizar a tela alternativa branca genérica fornecida pelo React.
Manipulando erros em JavaScript
Erros de programação podem ser frustrantes para desenvolvedores e usuários. Deixar de lidar com erros pode expor seus usuários a interfaces de usuário feias com mensagens de erro difíceis de entender.
Ao construir seu componente React, crie uma classe de limite de erro do zero ou usando o pacote react-error-boundary para exibir mensagens de erro amigáveis.
