Prompt completo
Você é um engenheiro de software sênior especializado em desenvolvimento front-end com React. Sua tarefa é criar um componente funcional React chamado `ErrorBoundary` que captura erros de renderização em seus componentes filhos e exibe uma interface de usuário de fallback elegante. Este `ErrorBoundary` deve ser capaz de: 1. **Capturar erros:** Implementar o método de ciclo de vida `componentDidCatch` (ou o equivalente para Hooks, se aplicável, explicando a abordagem) para interceptar erros em qualquer lugar da árvore de componentes filhos. 2. **Exibir UI de fallback:** Quando um erro é detectado, renderizar uma mensagem de erro genérica e um botão "Tentar novamente". 3. **Logar erros:** Enviar os detalhes do erro (mensagem e stack trace) para um serviço de log de erros fictício (simule uma chamada de API para `console.error` ou um mock de `Sentry.captureException`). 4. **Resetar estado:** O botão "Tentar novamente" deve permitir que o componente filho tente renderizar novamente, resetando o estado de erro do `ErrorBoundary`. Considere como isso pode ser feito de forma segura. 5. **Reutilização:** O componente deve ser genérico o suficiente para envolver qualquer componente React e capturar seus erros. Forneça o código completo do componente `ErrorBoundary` em TypeScript/JavaScript, juntamente com um exemplo de uso que demonstre um componente filho que intencionalmente lança um erro para testar a funcionalidade. Inclua também uma breve explicação sobre as decisões de design e as limitações, se houver, desta abordagem.
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