React Dojo

Buscar

Busca conceptos, ejercicios y quizzes

prácticaavanzado

Construye un Error Boundary

Tienes una app con un componente que puede fallar al renderizar. Actualmente, cualquier error derrumba toda la UI. Implementa un Error Boundary como clase de React que capture el error, muestre una UI de fallback con el mensaje de error y un botón para reintentar.

Objetivos

  1. 1.Crea una clase ErrorBoundary que extiende Component
  2. 2.Implementa static getDerivedStateFromError para actualizar el estado con el error
  3. 3.Implementa componentDidCatch para loguear el error en consola
  4. 4.Renderiza un fallback con el mensaje de error cuando hasError es true
  5. 5.Añade un botón Reintentar que resetee el estado del boundary
  6. 6.Envuelve <UserProfile> con <ErrorBoundary> en App
tu código
Pista

getDerivedStateFromError es un método estático que devuelve el nuevo estado. componentDidCatch es donde haces side effects como logs. El botón de reintentar debe llamar a this.setState({ hasError: false, error: null }).

Conceptos relacionados

error-boundary
¿Fue útil?
Inicia sesión para dar feedback