Como usar os limites de erro do React para travar falhas

Limites de erro do React permitem que você capture erros de JavaScript que ocorrem em componentes filho. Qualquer erro não tratado originado abaixo da posição da árvore do limite será detectado, evitando que ocorra uma falha.

Você pode exibir sua própria IU substituta depois que um limite de erro detecta um erro. Isso permite que você comunique normalmente o problema ao usuário. Eles poderão continuar usando o restante da sua interface sem sofrer uma pane na guia.

Criação de limites de erro

Qualquer componente da classe React pode se tornar um limite de erro. Você só precisa definir um dos seguintes métodos de ciclo de vida:

• componentDidCatch (erro) – Este método de instância será chamado sempre que o componente detectar um erro. Você pode usar isso para relatar o erro a um serviço de análise ou monitoramento.
• getDerivedStateFromError (erro) estático – Este método estático pode ser usado para atualizar o estado do seu componente após a ocorrência de um erro. É assim que você exibe uma IU substituta.

Esta é a aparência dos dois métodos em uso:

componentDidCatch ()

classe MyComponent estende React. Component & # 123;   componentDidCatch & # 40; error & # 41; & # 123; // usar estrutura de relatório personalizado logErrorToAnalytics & # 40; error & # 41 ;; this. props. onError & # 40; error & # 41 ;; & # 125;   & # 125;

Usando componentDidCatch (), seu componente pode relatar o erro da maneira que achar adequada. Como é um método de instância, você também pode passá-lo para a árvore de componentes por meio de adereços.

getDerivedStateFromError (erro)

classe MyComponent estende React. Component & # 123;   estado = & # 123; erro: nulo & # 125 ;;   renderizar & # 40; & # 41; & # 123; return < h1 > & # 123;! this. state. error? " Hello ": " Error " & # 125; < / h1 & gt ;; & # 125;   static getDerivedStateFromError & # 40; error & # 41; & # 123; return & # 123; error & # 125 ;; & # 125;   & # 125;

getDerivedStateFromError () também recebe o objeto de erro JavaScript. Ele deve retornar um objeto que descreve a transformação de estado para aplicar ao seu componente.

O React irá passar o objeto retornado para setState (). Neste exemplo, o valor da chave de erro no estado do componente será definido como o objeto de erro detectado. Isso resultará na alteração da saída renderizada para Erro em vez do texto Hello padrão.

Qual método usar?

Se os dois métodos de limite parecem semelhantes, é porque eles são! Tecnicamente, você pode definir um ou ambos os métodos e ainda obter os mesmos resultados – componentDidCatch () poderia chamar setState () para atualizar o estado do seu componente, e getDerivedStateFromError () poderia chamar um serviço de monitoramento externo para relatar erros que ele captura.

A diferença está na fase em que o erro é detectado. componentDidCatch () captura erros na fase de confirmação, após React ter atualizado o DOM. getDerivedStateFromError () será chamado durante a fase de renderização, antes que o React atualize o DOM do navegador.

Essa sutileza de tempo explica por que getDerivedStateFromError () geralmente é usado para alternar para a IU substituta. Quando ocorre um erro grave, o ato de atualizar o DOM pode provocar mais erros se seu aplicativo for deixado em um estado inconsistente. Atualizar o estado antes de ocorrer a atualização do DOM garante que a IU substituta seja renderizada imediatamente.

Localizando seus limites de erro

Você está livre para usar limites de erro onde achar necessário. É uma boa prática usar vários limites de erro. Adicione um limite de erro para cada camada principal de sua IU. Isso permite que você isole os erros no conteúdo da sua página do shell do aplicativo, para que uma falha em uma rota não tire a sua barra de navegação.

Aqui está uma hierarquia simples de componentes:

exportconst & # 40; & # 41; = > & # 40; < App > < Header / > < Router / > < Footer / > < / App > & # 41 ;;

Neste aplicativo, o componente App é um wrapper simples que gerencia o estado de nível superior. O cabeçalho renderiza uma barra de navegação e o rodapé exibe a barra inferior. O conteúdo da página principal – onde as falhas são mais prováveis ​​de ocorrer – é carregado dinamicamente pelo roteador, com base no URL atual.

Por padrão, uma falha nos filhos do roteador destrói todo o site. Colocando um limite de erro em torno do Roteador, os erros que ocorrem dentro do componente podem ser manipulados normalmente. O cabeçalho e o rodapé permanecem utilizáveis ​​enquanto o conteúdo da página principal é substituído por uma mensagem substituta.

O aplicativo precisa de pelo menos mais um limite de erro. O empacotamento dos filhos do App garante que os erros que surgem no cabeçalho ou rodapé possam ser detectados. Nessa situação, pode ser aceitável substituir toda a IU por uma mensagem de erro de página inteira.

Esta é a estrutura do componente refatorado:

classe ErrorBoundary estende React. Component & # 123;   estado = & # 123; erro: nulo & # 125 ;;   renderizar & # 40; & # 41; & # 123; if & # 40;! this. state. error & # 41; returnthis. props. children; elsereturn < h1 > Erro! < / h1 & gt ;; & # 125;   static getDerivedStateFromError & # 40; error & # 41; & # 123; return & # 123; error & # 125 ;; & # 125;   & # 125;   exportconst & # 40; & # 41; = > & # 40; < App > < ErrorBoundary > < Header > < ErrorBoundary > < Router / > < / ErrorBoundary > < > > < Rodapé / / ErrorBoundary > < / App > & # 41 ;;

Nós abstraímos a lógica de limite de erro em um componente reutilizável. Agora podemos envolver ErrorBoundary em torno de quaisquer componentes que devam ser isolados de seus pais. Lembre-se de que você não precisa criar um componente de limite de erro – para aplicativos simples ou um componente de IU específico, você pode adicionar os ganchos de ciclo de vida diretamente em uma classe de componente.

Limitações dos limites de erro

Os limites do erro têm algumas limitações importantes das quais você deve estar ciente. Eles são capazes de detectar a maioria dos erros de JavaScript não manipulados, mas alguns não serão detectados.

Os limites de erro não interceptam os erros que ocorrem nos métodos do manipulador de eventos. O código do manipulador de eventos não afeta o processo de renderização do React, portanto, a estrutura ainda pode renderizar seus componentes. Como os erros do manipulador de eventos não resultam em IU corrompida ou desmontagem de componentes, o React não tenta interceptá-los.

Se precisar responder a erros em seus manipuladores de eventos, você deve usar um bloco try / catch regular. Execute uma atualização de estado na instrução catch para mudar sua IU para um estado de erro.

classe MyComponent estende React. Component & # 123;   estado = & # 123; erro: nulo & # 125 ;;   handleClick = & # 40; & # 41; = > & # 123; tente & # 123; doSomething & # 40; & # 41 ;; & # 125; catch & # 40; error & # 41; & # 123; this. setState & # 40; & # 123; error & # 125; & # 41 ;; & # 125; & # 125;   renderizar & # 40; & # 41; & # 123; se & # 40; this. state. error & # 41; retornar < p > Erro! < / p & gt ;; elsereturn < botão onClick = & # 123; this. handleClick & # 125 ; > Enviar < / button > & # 125;   & # 125;

Além de manipuladores de eventos, os limites de erro não podem detectar erros que ocorrem em código assíncrono. Se você estiver usando Promises, async / await ou setTimeout (), certifique-se de usar os blocos try / catch / Promise. catch () para detectar quaisquer erros que possam ocorrer.

Um mal-entendido comum sobre limites de erro diz respeito à árvore que monitoram. Eles só podem detectar erros que ocorram mais profundamente na árvore. Limites de erro não detectam erros lançados pelo próprio componente de limite.

exportdefault & # 40; & # 41; = > & # 40; < App > // Os erros não serão detectados < ErrorBoundary > // Os erros não serão < Router / > // Os erros gerados aqui serão detectados < / ErrorBoundary > < / App > & # 41 ;;

Cada limite de erro deve envolver os componentes que podem gerar um erro.

Finalmente, apenas os componentes baseados em classe podem ser limites de erro. Atualmente, não existe nenhum mecanismo para permitir que um componente funcional se torne um limite de erro. Se você estiver trabalhando em uma base de código funcional, deverá criar um componente de limite de erro reutilizável como o mostrado acima. Você pode então envolver seus componentes com ele sempre que precisar de um limite de erro.

Conclusão

Os limites de erro trazem o try / catch do JavaScript para o modelo de renderização declarativa do React. Eles permitem que você isole partes da IU do seu site, para que uma falha em um componente não afete seus irmãos.

Você deve avaliar a IU do seu aplicativo para identificar as seções críticas. Coloque limites de erro estrategicamente para impedir que um erro não tratado desmonte toda a árvore de componentes. Os usuários são muito mais propensos a aceitar uma mensagem totalmente estilizada “ algo &’ deu errado ” do que uma tela branca que precisa ser atualizada.