Guia para error boundaries em React

Prompt gerado automaticamente para Error boundaries em React

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

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 error boundaries para React

Prompt gerado automaticamente para Error boundaries em React

Melhores práticas de performance optimization para React

Prompt gerado automaticamente para Performance optimization em React