⚛️
ChatGPT intermediate

Guia para error boundaries em React

Prompt gerado automaticamente para Error boundaries em React

2 usos React

Prompt completo

Você é um engenheiro de software sênior especializado em desenvolvimento front-end com React. Sua tarefa é criar um componente funcional React chamado `ErrorBoundary` que captura erros de renderização em seus componentes filhos e exibe uma interface de usuário de fallback elegante. Este `ErrorBoundary` deve ser capaz de:

1.  **Capturar erros:** Implementar o método de ciclo de vida `componentDidCatch` (ou o equivalente para Hooks, se aplicável, explicando a abordagem) para interceptar erros em qualquer lugar da árvore de componentes filhos.
2.  **Exibir UI de fallback:** Quando um erro é detectado, renderizar uma mensagem de erro genérica e um botão "Tentar novamente".
3.  **Logar erros:** Enviar os detalhes do erro (mensagem e stack trace) para um serviço de log de erros fictício (simule uma chamada de API para `console.error` ou um mock de `Sentry.captureException`).
4.  **Resetar estado:** O botão "Tentar novamente" deve permitir que o componente filho tente renderizar novamente, resetando o estado de erro do `ErrorBoundary`. Considere como isso pode ser feito de forma segura.
5.  **Reutilização:** O componente deve ser genérico o suficiente para envolver qualquer componente React e capturar seus erros.

Forneça o código completo do componente `ErrorBoundary` em TypeScript/JavaScript, juntamente com um exemplo de uso que demonstre um componente filho que intencionalmente lança um erro para testar a funcionalidade. Inclua também uma breve explicação sobre as decisões de design e as limitações, se houver, desta abordagem.

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