⚛️
ChatGPT intermediate

Prompt para error boundaries em React

Prompt gerado automaticamente para Error boundaries em React

4 usos React

Prompt completo

"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."

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