Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React
5.0
54 usos
ChatGPT
"Você é um engenheiro de software sênior com vasta experiência em React. Sua tarefa é criar um componente React chamado `ErrorBoundaryInteligente` que seja robusto e fácil de usar.
O `ErrorBoundaryInteligente` deve:
1. **Capturar erros em qualquer componente filho** dentro de sua árvore de renderização.
2. **Exibir uma interface de usuário amigável em caso de erro**, informando ao usuário que algo deu errado e oferecendo uma opção para "Tentar novamente" (que deve redefinir o estado do erro, permitindo que o componente filho tente renderizar novamente).
3. **Registrar o erro detalhadamente** em um serviço de log externo (simule isso com um `console.error` aprimorado, mostrando o stack trace completo e o componente que causou o erro).
4. **Permitir que um callback `onError` personalizado** seja passado como prop, para que o desenvolvedor possa executar ações adicionais (como enviar o erro para um serviço de monitoramento real ou exibir uma notificação global) quando um erro for capturado.
5. **Ser resiliente a erros na própria interface de fallback**, ou seja, se a interface de erro também falhar, ele deve exibir uma mensagem de erro genérica final para evitar uma tela branca.
6. **Fornecer um exemplo de uso** que demonstre como envolver um componente propenso a erros (simule um componente que lança um erro propositalmente ao clicar em um botão) com o `ErrorBoundaryInteligente`.
Pense em como tornar este Error Boundary o mais útil e "production-ready" possível para um projeto React real."
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 context api e redux para React
Prompt gerado automaticamente para Context API e Redux em React
Melhores práticas de performance optimization para React
Prompt gerado automaticamente para Performance optimization em React