Demo built with React and TypeScrirpt to demonstrate using error bound in react.
É crucial que seu aplicativo lide com erros fornecendo feedback visual adequado e ações potenciais, como mecanismos de repetição.
Como fazemos isso?
A API React oferece o mecanismo de limites de erro para capturar todos os tipos de erros que podem “explodir” dentro de um componente.
Por exemplo, se <ComponentA />
acima estiver envolvido em um limite React Error, a propagação do erro irá parar no nível Error Boundary, evitando que o React App falhe:
No entanto, essas implementações simples e nativas de Limites de Erro têm limitações. Primeiro, de acordo com a documentação do React, os limites de erro não capturam erros para:
- Manipuladores de eventos
- Código assíncrono (por exemplo, callbacks setTimeout ou requestAnimationFrame)
- Renderização do lado do servidor
- Erros lançados no próprio limite de erro (em vez de seus filhos)
Utilizando a biblioteca react-error-boundary
. Ela detecta corretamente todos tipos de erros e fornece um mecanismo de repetição.
Para entender como implementá-la, veja o código.
Este demo foi desenvolvido com as seguintes tecnologias:
- React
- TypeScript
- Clone este repositório
git clone https://github.com/dudunog/react-error-boundary-demo.git
- Entre no diretório do projeto
cd react-error-boundary-demo
- Instale as dependências com
yarn install
ounpm install
- Inicie o projeto em modo desenvolvimento com
yarn run dev
ounpm run dev