Sin Error Boundary de React
Sin error boundaries, un error de JavaScript en cualquier componente crashea todo el árbol de React y muestra una pantalla en blanco al usuario.
Cómo Funciona
Los componentes de React pueden lanzar errores durante el renderizado. Sin un componente ErrorBoundary, cualquier error no manejado en el árbol de componentes hace que React desmonte toda la app — mostrando a los usuarios una pantalla en blanco sin explicación.
// MAL: sin error boundary — un error de componente = pantalla en blanco para todos
function App() {
return (
<Router>
<UserDashboard /> {/* si esto lanza, toda la app crashea */}
<PaymentWidget />
</Router>
);
}// BIEN: envuelve secciones críticas con error boundaries
function App() {
return (
<Router>
<ErrorBoundary fallback={<ErrorDashboard />}>
<UserDashboard />
</ErrorBoundary>
<ErrorBoundary fallback={<ErrorPayment />}>
<PaymentWidget />
</ErrorBoundary>
</Router>
);
}Ejemplo Real
Múltiples interrupciones de producción han sido causadas por un solo componente que recibió datos null inesperados, haciendo que toda la app muestre una pantalla en blanco. Los error boundaries habrían contenido el crash a una sección mientras el resto de la app permanecía funcional.
Cómo Prevenirlo
- Envuelve las secciones principales de la aplicación (dashboard, pagos, perfil de usuario) en componentes ErrorBoundary
- Usa la librería react-error-boundary para un ErrorBoundary listo para producción con soporte de reintento
- Loguea los errores capturados a Sentry o tu herramienta de monitoreo de errores desde dentro del ErrorBoundary
- Muestra una UI de fallback amigable con un botón 'Intentar de nuevo' en vez de una pantalla en blanco
Tecnologías Afectadas
Data Hogo detecta esta vulnerabilidad automáticamente.
Escanea Tu Repo GratisVulnerabilidades Relacionadas
Console.log de Datos Sensibles
mediumLoguear contraseñas, tokens, objetos de usuario completos o datos de pago a la consola envía esos datos a tu agregador de logs en texto plano.
Stack Traces Expuestos al Usuario
mediumRetornar stack traces o detalles de errores internos en respuestas de API revela tu estructura de archivos, versiones de librerías y rutas de código a los atacantes.
Logging de Seguridad Insuficiente
lowNo loguear eventos de seguridad (logins fallidos, denegaciones de permisos, acciones sospechosas) significa que no puedes detectar ataques en curso ni reconstruir lo que pasó después de una brecha.
PII en Logs
mediumLoguear información personal identificable (email, nombre completo, IP, teléfono) crea riesgos de privacidad y cumplimiento bajo GDPR y CCPA.