Prompt para error boundaries em React
Prompt gerado automaticamente para Error boundaries em React
5.0
35 usos
ChatGPT
"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
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 performance optimization para React
Prompt gerado automaticamente para Performance optimization em React
Melhores práticas de context api e redux para React
Prompt gerado automaticamente para Context API e Redux em React
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React