Prompt completo
"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
React
Error boundaries
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de React
ChatGPT
Melhores práticas de server-side rendering para React
Prompt gerado automaticamente para Server-side rendering em React
4 usos
ChatGPT
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React
4 usos
ChatGPT
Melhores práticas de performance optimization para React
Prompt gerado automaticamente para Performance optimization em React
4 usos