Los errores en frontend son invisibles para el equipo si no tienes forma de saberlos. Un error handling serio combina captura local, logging centralizado y alertas cuando algo se quiebra.
Error Boundaries: atrapa errores antes de que rompan todo
Un Error Boundary es un componente que captura errores de sus hijos. Sin él, un error en un componente rompe toda la aplicación. Con él, aislas el problema.
Lo ideal es tener múltiples boundaries: uno global y otros para secciones críticas.
- Error Boundary global para caídas de máxima importancia.
- Boundaries locales para features críticas.
- Fallback UI que comunica el error sin drama.
Sentry: logging centralizado de errores
Sentry captura automáticamente errores no manejados, excepciones y eventos personalizados. Te muestra stack trace, contexto, usuario y más. Alertas cuando el error rate sube.
Sin Sentry, los errores se quedan en máquinas de usuarios sin que lo sepas.
- Integra Sentry en tu aplicación (librerías para React, Next.js).
- Configura alertas para errores críticos.
- Crea dashboards para monitoreo continuo.
Validación y manejo de errores esperados
No todos los errores son inesperados. Muchos vienen de validación: email inválido, archivo muy grande, network timeout. Esos deben manejarse diferente.
Para esos casos, comunica claramente al usuario qué salió mal sin confundir errores esperados con fallos inesperados.
- Errores de validación: mensajes claros al usuario.
- Errores de red: reintenta o sugiere acción.
- Errores inesperados: reporta a Sentry y comunica error genérico.
Retry logic: algunos errores son transitorios
Cuando falla una petición a la red, no es siempre culpa del usuario. A veces es transición de red. Un retry automático (con backoff exponencial) puede arreglarlo sin intervención.
Pero no reintentes todo: validación rechazada no mejora con reintentos. Peticiones fallidas por red, sí.
El mejor error handling es cuando el usuario ni se da cuenta de que algo falló porque ya se recuperó automáticamente.
Contexto para debugging
Cuando reportas un error a Sentry, adjunta contexto: qué ruta está el usuario, qué datos estaba manipulando, qué versión de app, qué navegador. Sin contexto, los errores son cajas negras.
Sentry permite adjuntar contexto de forma estructurada, lo que facilita debugging.