Como automatizar error boundaries em React
Prompt gerado automaticamente para Error boundaries em React
5.0
32 usos
ChatGPT
"Você é um especialista em desenvolvimento web, com vasta experiência em React e arquitetura de aplicações robustas. Sua tarefa é criar um componente React de `ErrorBoundary` (limite de erro) que seja não apenas funcional, mas também otimizado para a experiência do usuário e fácil de integrar em qualquer aplicação React moderna.
O componente deve:
1. **Capturar erros em tempo de execução:** Implementar `componentDidCatch` ou `static getDerivedStateFromError` para capturar erros de componentes filhos.
2. **Exibir uma interface amigável para o usuário:** Em vez de simplesmente travar, o componente deve renderizar uma mensagem de erro clara e concisa para o usuário, informando que algo deu errado e sugerindo uma ação (ex: "Por favor, recarregue a página" ou "Tente novamente mais tarde").
3. **Oferecer um botão de "Recarregar Página":** Um botão que, ao ser clicado, force um recarregamento da página (`window.location.reload()`) para tentar restaurar o estado da aplicação.
4. **Registrar o erro:** Opcionalmente, permitir que um `callback` seja passado como prop para logar o erro em um serviço externo (ex: Sentry, LogRocket) sem expor detalhes sensíveis diretamente na interface do usuário.
5. **Ser reutilizável e configurável:** Aceitar `props` para personalizar a mensagem de erro, o texto do botão e o `callback` de log.
6. **Considerar o ambiente de desenvolvimento vs. produção:** Em ambiente de desenvolvimento, talvez seja útil exibir mais detalhes do erro (stack trace) para o desenvolvedor, mas isso nunca deve acontecer em produção.
7. **Demonstrar uso:** Inclua um exemplo de como envolver um componente problemático com este `ErrorBoundary` e um exemplo de um componente filho que intencionalmente lança um erro para testar a funcionalidade.
Seu objetivo é fornecer um código React completo e funcional para este `ErrorBoundary`, acompanhado de explicações concisas sobre cada parte e como ele resolve o problema de falhas inesperadas na interface do usuário, melhorando a resiliência da aplicação. O código deve ser moderno (hooks onde aplicável, mas focado na API de `ErrorBoundary`) e seguir as melhores práticas de React."
Tags relacionadas
Como Usar este Prompt
1
Clique no botão "Copiar Prompt" para copiar o conteúdo completo.
2
Abra sua ferramenta de IA de preferência (ChatGPT e etc.).
3
Cole o prompt e substitua as variáveis (se houver) com suas informações.
Outros prompts de React
Continue explorando prompts nesta categoria.
Melhores práticas de server-side rendering para React
Prompt gerado automaticamente para Server-side rendering em React
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React
Melhores práticas de performance optimization para React
Prompt gerado automaticamente para Performance optimization em React