⚛️
ChatGPT intermediate

Melhores práticas de error boundaries para React

Prompt gerado automaticamente para Error boundaries em React

4 usos React

Prompt completo

"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

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