Error Boundaries & Error Handling
Error boundaries, componentDidCatch, error fallback, error recovery, estrategias de logging
1¿Qué es un Error Boundary en React?
¿Qué es un Error Boundary en React?
Respuesta
Un Error Boundary es un componente de clase React que captura errores JavaScript que ocurren en el árbol de sus componentes hijos, muestra una UI de respaldo (fallback) y evita que toda la aplicación se bloquee. Utiliza los métodos componentDidCatch() y getDerivedStateFromError() para interceptar y manejar los errores de renderizado.
2¿Por qué usar Error Boundaries en lugar del try/catch clásico en React?
¿Por qué usar Error Boundaries en lugar del try/catch clásico en React?
Respuesta
Los bloques try/catch no pueden capturar errores que ocurren durante el renderizado de componentes React, ya que estos errores se propagan por el árbol de forma asíncrona. Los Error Boundaries están diseñados específicamente para interceptar errores de renderizado, de ciclo de vida y de constructores en componentes hijos, mientras que try/catch solo funciona para código imperativo síncrono.
3¿Qué método del ciclo de vida permite capturar un error en un Error Boundary?
¿Qué método del ciclo de vida permite capturar un error en un Error Boundary?
Respuesta
componentDidCatch(error, info) es el método del ciclo de vida invocado después de que un Error Boundary captura un error. Recibe el error y un objeto info que contiene componentStack, permitiendo registrar el error o ejecutar acciones de side-effect. Cabe notar que getDerivedStateFromError() también se usa pero para actualizar el state y mostrar la UI de fallback.
¿Cuál es el rol de getDerivedStateFromError() en un Error Boundary?
¿Cuál es la diferencia entre getDerivedStateFromError() y componentDidCatch()?
+15 preguntas de entrevista
Otros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos de React
React Hooks
Ciclo de vida de los componentes
React Router
Gestión de estado con Context
Formularios y Controlled Components
Obtención de datos y API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos de Next.js
TypeScript con React
Data Fetching en Next.js
Server Actions de Next.js
Routing y Navegación en Next.js
API Routes de Next.js
Metadata & SEO en Next.js
Middleware y Auth en Next.js
Testing en React
Zustand State Management
Optimización de Rendimiento en React
Advanced React Patterns
Características avanzadas de Next.js
Despliegue y Producción de Next.js
Architecture & Design Patterns
React Server Components
Internacionalización de Next.js
React Security & Buenas Prácticas
Domina React / Next.js para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis