Prompt para error boundaries em React

Prompt gerado automaticamente para Error boundaries em React

5.0
35 usos
ChatGPT
Usar no ChatGPT
"Você é um especialista em desenvolvimento web, focado em React. Sua tarefa é criar um componente React de `ErrorBoundary` robusto e um exemplo prático de como usá-lo para capturar e exibir erros de forma amigável ao usuário.

O `ErrorBoundary` deve:

1.  Capturar erros de renderização, métodos de ciclo de vida e dentro de construtores de componentes filhos.
2.  Ter um estado interno para `hasError` e `errorInfo` (detalhes do erro, como stack trace).
3.  Implementar `static getDerivedStateFromError(error)` para atualizar o estado quando um erro é capturado.
4.  Implementar `componentDidCatch(error, errorInfo)` para logar o erro em um serviço de monitoramento (simule um `console.error` com detalhes).
5.  Renderizar uma UI de fallback quando um erro for detectado, informando o usuário que algo deu errado e oferecendo uma opção para recarregar a página (botão 'Tentar Novamente').

O exemplo prático deve:

1.  Criar um componente filho (`BuggyComponent`) que intencionalmente lança um erro (ex: acessando uma propriedade de `null` ou `undefined`) para simular uma falha.
2.  Envolver o `BuggyComponent` com o seu `ErrorBoundary`.
3.  Demonstrar a renderização normal do `BuggyComponent` quando não há erro e a UI de fallback do `ErrorBoundary` quando o erro é acionado.
4.  Incluir um botão no componente principal para 'Simular Erro' que, ao ser clicado, força o `BuggyComponent` a renderizar e falhar.

Forneça o código completo do `ErrorBoundary` e do exemplo de uso, incluindo imports e exports necessários, e comentários explicativos onde julgar pertinente. O código deve ser moderno (hooks podem ser usados para o componente principal, mas o `ErrorBoundary` deve seguir a abordagem de classe para `componentDidCatch`). Priorize a legibilidade e a boa prática."

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 performance optimization para React

Prompt gerado automaticamente para Performance optimization 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 error boundaries para React

Prompt gerado automaticamente para Error boundaries em React