Melhores práticas de error boundaries para React

Prompt gerado automaticamente para Error boundaries em React

5.0
54 usos
ChatGPT
Usar no 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."

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.

Compartilhe

Gostou deste prompt? Ajude outras pessoas a encontrá-lo!

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