El choque silencioso

En el desarrollo backend, gestionar los errores es sencillo. Si su servidor Node.js falla, los registros en stderr gritan FATAL ERROR. La comprobación de estado (ping) falla. Kubernetes reinicia el pod. El buscapersonas (PagerDuty) suena en su teléfono. Inmediatamente te das cuenta de que algo anda mal.

En el desarrollo frontend, las fallas son silenciosas. Imagine un usuario en su sitio de comercio electrónico. Han estado 30 minutos navegando. Tienen artículos por valor de €500 en su carrito. Hacen clic en “Continuar con el pago”. El motor de JavaScript encuentra “TypeError: no se pueden leer las propiedades de undefinido (leyendo ‘precio’)”. ¿Lo que sucede? La pantalla no explota. El navegador no se cierra. La interfaz de usuario inevitablemente se congela. El botón giratorio gira para siempre. El usuario espera 10 segundos. Vuelven a hacer clic. Nada. Suspiran, cierran la pestaña y van a Amazon. Usted (el desarrollador) tiene cero conocimiento de que esto sucedió. Los registros de su servidor muestran “200 OK” para la carga de la página. Asumes que tu software es perfecto. En realidad, estás perdiendo miles de dólares por hora.

Esto se llama Volar a ciegas. Monitoreo de errores (Sentry, Datadog, LogRocket) es la solución. Instala un “Black Box Recorder” (SDK) en el navegador de cada usuario. Cuando ocurre un bloqueo, captura el estado, lo envía a la nube y le avisa.

Por qué Maison Code analiza esto

En Maison Code, creemos que La observación es el primer paso de la ingeniería. A menudo heredamos bases de código de clientes que dicen: “Nuestra tasa de conversión cayó un 20% y no sabemos por qué”. Instalamos Sentry y, en 10 minutos, vemos miles de “CheckoutError: indefinido no es un objeto” provenientes de usuarios de Safari. El error siempre estuvo ahí. El cliente simplemente hizo oídos sordos. Implementamos el monitoreo no solo para detectar errores, sino también para Cuantificar la calidad. Ayudamos a los CTO a pasar de “Creo que el sitio es estable” a “Tenemos una tasa de sesiones sin fallas del 99,98 %”.

La herramienta: Centinela

Sentry es el estándar indiscutible de la industria para el monitoreo del rendimiento de aplicaciones (APM) y el seguimiento de errores. Es compatible con todos los idiomas, pero su integración con JavaScript/TypeScript es particularmente poderosa. No sólo captura el mensaje de error; captura el Contexto.

Implementación: integración de Sentry en Next.js

Configurar Sentry solía ser difícil. Ahora está automatizado.

El Mago: Ejecute npx @sentry/wizard@latest -i nextjs. Este guión es mágico.
- Crea un Proyecto Sentry vía API.
- Actualiza next.config.js para cargar mapas fuente.
- Crea sentry.client.config.ts (Navegador), sentry.server.config.ts (Nodo) y sentry.edge.config.ts (Edge Runtime).
Uso (SDK): Sentry se conecta automáticamente a los eventos globales window.onerror y window.onunhandledrejection. Generalmente no es necesario ajustar el código en try/catch manualmente.

Captura manual: A veces, desea detectar un error (para que la aplicación no falle) pero aun así informarlo.

importar * como Sentry desde "@sentry/nextjs";

función asíncrona procesoPago() {
  prueba {
    espere stripe.confirmPayment();
  } captura (error) {
    // Inicie sesión en Sentry, pero muestre una interfaz de usuario agradable al usuario
    Sentry.captureException(error);
    brindis.error("Error en el pago, inténtelo de nuevo.");
  }
}

Mapas fuente: La Piedra Rosetta

El JavaScript de producción está minimizado y uglificado. Elimina espacios en blanco, cambia el nombre de las variables a a, b, c y elimina el código muerto. Esto es excelente para el rendimiento, pero terrible para la depuración.

El Terror:

Error: indefinido no es una función
  en un (app-123.js:1:432)
  en b (app-123.js:1:890)

Esto no te dice nada.

La solución: Mapas fuente (.js.map). Estos archivos asignan el código minimizado a la fuente TypeScript original. Cuando Sentry recibe un informe de fallo, busca el mapa fuente coincidente. Efectivamente “desminimiza” el seguimiento de la pila.

El resultado:

TypeError: la dirección de usuario no está definida
  en calcularEnvío (src/utils/shipping.ts:45:12)
  en CheckoutForm (src/components/Checkout.tsx:102:4)

Ahora sabes exactamente que la línea 45 de shipping.ts es la culpable.

El contexto es el rey

Saber dónde se estrelló es el paso 1. Saber para quién falló es el paso 2. Sentry le permite enriquecer el evento de error con etiquetas personalizadas y datos de usuario.

// En tu AuthProvider o Layout
utilizarEfecto(() => {
  si (usuario) {
    Sentry.setUser({
      identificación: usuario.id,
      correo electrónico: usuario.correo electrónico, // Tenga cuidado con la PII (GDPR)
      segmento: usuario.isVIP? "VIP": "Estándar"
    });
  }
}, [usuario]);

En Sentry Dashboard, ahora puede ejecutar consultas potentes:

“Muéstrame todos los fallos que afectan a los usuarios VIP”.
“Muéstrame todos los fallos en iOS 17”.

Alerta de fatiga: El niño que gritó lobo

El mayor peligro de la supervisión de errores es el ruido. Si su canal de Slack #alerts-prod hace ping cada 5 minutos con “Error al cargar la imagen”, los desarrolladores silenciarán el canal. Luego, cuando la base de datos deja de funcionar, nadie se da cuenta. Esto es Fatiga de alerta.

Estrategia de señal-ruido:

Ignorar errores benignos: Configure ignoreErrors en sentry.client.config.ts (por ejemplo, ResizeObserver loop limit).
Protección contra picos: No alertar sobre un error. Alerta si: “Más de 50 usuarios experimentan este error en 5 minutos”.

Repetición de la sesión: La opción nuclear

A veces, un seguimiento de la pila no es suficiente. “El usuario dice que hizo clic en el botón pero no pasó nada. No se registró ningún error”. Session Replay (LogRocket / Sentry Replay) graba una reproducción similar a un vídeo de la sesión del usuario. Registra las mutaciones DOM, los movimientos del mouse y los clics. Literalmente puedes mirar la pantalla del usuario. “Ah, hicieron triple clic en el botón ‘Atrás’ mientras se abría el modal”.

Privacidad (GDPR/CCPA): Esto es delicado. DEBE enmascarar los campos de entrada (Contraseñas, Tarjetas de crédito). Sentry hace esto de forma predeterminada (maskAllText: true), convirtiendo el texto en ****. Verifique esta configuración manualmente.

7. Seguimiento del rendimiento (transacciones Sentry)

Los errores son accidentes. Las transacciones son lentitud. Sentry rastrea todo el ciclo de vida de la solicitud.

El usuario hace clic en “Comprar”.
Navegador (fetch /api/buy) -> 100ms.
Servidor Next.js (db.insertorders) -> 500ms.
API de banda (carga) -> 2000 ms. Total: 2,6s. Si sólo supervisas los errores, crees que todo está bien. Pero 2,6 segundos es inaceptable. Sentry le muestra la “Cascada” de la solicitud, destacando que Stripe es el cuello de botella. Solución: No esperes a Stripe. Utilice una cola.

Cuando ocurre un bloqueo, Sentry puede abrir automáticamente un cuadro de diálogo. “Parece que nos estrellamos. Cuéntanos qué pasó”. El usuario escribe: “Hice clic en ‘Aplicar cupón’ dos veces”. Esto es oro. Conecta el “Stack Trace” (Técnico) con la “Intención del Usuario” (Negocio). Habilite esto para que los usuarios verificados establezcan una buena relación.

10. Estado de la versión: confianza en la implementación

Implementa la versión 2.0. ¿Los errores aumentan o disminuyen? Sentry Release Health rastrea las “sesiones libres de accidentes”. v1.0: 99,9 % libre de fallos. v2.0: 98,0 % libre de fallos. Esto activa una alerta automática: “Regresión detectada en v2.0”. Puede realizar una reversión instantánea antes de que los clientes se quejen. Este es el circuito de retroalimentación que permite “Implementar el viernes”.

11. Seguridad del mapa fuente

Cargar mapas de origen facilita la depuración. Pero también expone su código fuente al público (si lo carga en la CDN). Los competidores pueden robar sus algoritmos. Solución: cargar mapas de origen en Sentry Artifacts (privado). No cargue archivos .map en su CDN pública. Configure Sentry para buscar mapas internamente. Ahora obtienes seguimientos de pila completos, pero el mundo ve código ofuscado.

12. Conclusión

No puedes arreglar lo que no puedes ver. El monitoreo transforma los errores de “Historias de fantasmas” en “Tickets procesables”. Te permite llamar a un cliente y decirle: “Nos dimos cuenta de que había un error durante el pago. Lo hemos solucionado. Aquí tienes un cupón del 10%”. Así es como se convierte un fracaso en lealtad.

¿Estás cansado de la depuración a ciegas?

Si su equipo pasa horas buscando errores no reproducibles, Maison Code puede ayudar. Implementamos pilas de observabilidad que le brindan visión de rayos X en su entorno de producción.

¿Volar a ciegas?

Integramos pilas de monitoreo Sentry/Datadog con mapas de origen y enriquecimiento de contexto. Contrata a nuestros Arquitectos.

Monitoreo de errores: la grabadora de caja negra