⚛️
ChatGPT intermediate

Como automatizar error boundaries em React

Prompt gerado automaticamente para Error boundaries em React

2 usos React

Prompt completo

"Você é um especialista em desenvolvimento web, com vasta experiência em React e arquitetura de aplicações robustas. Sua tarefa é criar um componente React de `ErrorBoundary` (limite de erro) que seja não apenas funcional, mas também otimizado para a experiência do usuário e fácil de integrar em qualquer aplicação React moderna.

O componente deve:

1. **Capturar erros em tempo de execução:** Implementar `componentDidCatch` ou `static getDerivedStateFromError` para capturar erros de componentes filhos.
2. **Exibir uma interface amigável para o usuário:** Em vez de simplesmente travar, o componente deve renderizar uma mensagem de erro clara e concisa para o usuário, informando que algo deu errado e sugerindo uma ação (ex: "Por favor, recarregue a página" ou "Tente novamente mais tarde").
3. **Oferecer um botão de "Recarregar Página":** Um botão que, ao ser clicado, force um recarregamento da página (`window.location.reload()`) para tentar restaurar o estado da aplicação.
4. **Registrar o erro:** Opcionalmente, permitir que um `callback` seja passado como prop para logar o erro em um serviço externo (ex: Sentry, LogRocket) sem expor detalhes sensíveis diretamente na interface do usuário.
5. **Ser reutilizável e configurável:** Aceitar `props` para personalizar a mensagem de erro, o texto do botão e o `callback` de log.
6. **Considerar o ambiente de desenvolvimento vs. produção:** Em ambiente de desenvolvimento, talvez seja útil exibir mais detalhes do erro (stack trace) para o desenvolvedor, mas isso nunca deve acontecer em produção.
7. **Demonstrar uso:** Inclua um exemplo de como envolver um componente problemático com este `ErrorBoundary` e um exemplo de um componente filho que intencionalmente lança um erro para testar a funcionalidade.

Seu objetivo é fornecer um código React completo e funcional para este `ErrorBoundary`, acompanhado de explicações concisas sobre cada parte e como ele resolve o problema de falhas inesperadas na interface do usuário, melhorando a resiliência da aplicação. O código deve ser moderno (hooks onde aplicável, mas focado na API de `ErrorBoundary`) e seguir as melhores práticas de React."

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