Prompt completo
"Você é um especialista em desenvolvimento web, focado em React. Sua tarefa é criar um componente React de `ErrorBoundary` robusto e um exemplo prático de como usá-lo para capturar e exibir erros de forma amigável ao usuário. O `ErrorBoundary` deve: 1. Capturar erros de renderização, métodos de ciclo de vida e dentro de construtores de componentes filhos. 2. Ter um estado interno para `hasError` e `errorInfo` (detalhes do erro, como stack trace). 3. Implementar `static getDerivedStateFromError(error)` para atualizar o estado quando um erro é capturado. 4. Implementar `componentDidCatch(error, errorInfo)` para logar o erro em um serviço de monitoramento (simule um `console.error` com detalhes). 5. Renderizar uma UI de fallback quando um erro for detectado, informando o usuário que algo deu errado e oferecendo uma opção para recarregar a página (botão 'Tentar Novamente'). O exemplo prático deve: 1. Criar um componente filho (`BuggyComponent`) que intencionalmente lança um erro (ex: acessando uma propriedade de `null` ou `undefined`) para simular uma falha. 2. Envolver o `BuggyComponent` com o seu `ErrorBoundary`. 3. Demonstrar a renderização normal do `BuggyComponent` quando não há erro e a UI de fallback do `ErrorBoundary` quando o erro é acionado. 4. Incluir um botão no componente principal para 'Simular Erro' que, ao ser clicado, força o `BuggyComponent` a renderizar e falhar. Forneça o código completo do `ErrorBoundary` e do exemplo de uso, incluindo imports e exports necessários, e comentários explicativos onde julgar pertinente. O código deve ser moderno (hooks podem ser usados para o componente principal, mas o `ErrorBoundary` deve seguir a abordagem de classe para `componentDidCatch`). Priorize a legibilidade e a boa prática."
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 performance optimization para React
Prompt gerado automaticamente para Performance optimization em React
3 usos
ChatGPT
Melhores práticas de context api e redux para React
Prompt gerado automaticamente para Context API e Redux em React
3 usos
ChatGPT
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React
3 usos