La tasa de errores de JavaScript mide el porcentaje de la aplicación de su navegador que experimenta errores de JavaScript, lo que puede alterar la funcionalidad del usuario y crear una mala experiencia del usuario. Esta regla del cuadro de mando lo ayuda a identificar y priorizar la solución de los problemas del frontend que afectan directamente la satisfacción de los clientes.
Acerca de esta regla del cuadro de mando
Esta regla de tasa de errores de JavaScript es parte del Nivel 1 (Reactivo) en el modelo de madurez de la experiencia digital. Evalúa si la aplicación de su navegador tiene errores de JavaScript no resueltos que podrían estar afectando al usuario.
Por qué esto es importante: Los errores de JavaScript pueden interrumpir funciones críticas del usuario, como formularios, navegación, pagos o funciones interactivas. Los usuarios que encuentran una funcionalidad rota a menudo abandonan las tareas, lo que genera pérdida de conversiones y una percepción negativa de la marca.
Cómo funciona esta regla
Esta regla evalúa el porcentaje de entidades del navegador (aplicaciones monitoreadas por New Relic Browser) que exhiben errores de JavaScript. Identifica la aplicación en la que el usuario puede estar experimentando una funcionalidad defectuosa debido a problemas en el código del frontend.
Entendiendo tu puntaje
- Aprobado (Verde): Bajo porcentaje de aplicaciones del navegador tienen errores de JavaScript que afectan al usuario
- Error (Rojo): Un alto porcentaje de aplicaciones del navegador tienen errores de JavaScript sin resolver
- Objetivo: Minimizar los errores de JavaScript en todas las aplicaciones del navegador, especialmente aquellas con alto tráfico de usuarios.
Qué significa esto:
- Puntaje de aprobación: Su aplicación frontend proporciona una experiencia de usuario confiable con una funcionalidad mínimamente defectuosa
- Puntaje reprobatoria: el usuario puede encontrar con funciones, formularios o interacciones defectuosas que podrían afectar la satisfacción y las conversiones.
Cómo reducir la tasa de errores de JavaScript
Si su puntaje muestra una alta tasa de errores de JavaScript, siga estos pasos para identificar y resolver problemas de interfaz:
1. Analizar patrones de error en la Bandeja de entrada de errores
- Bandeja de entrada de errores de acceso: navegue a la Bandeja de entrada de errores de New Relic para ver todos los errores de JavaScript en su aplicación
- Identificar errores de alto impacto: centrar en los errores que afectan a los recorridos de usuario más críticos o de mayor impacto.
- Agrupar errores similares: buscar patrones en el mensaje de error, páginas afectadas o segmentos de usuarios
- Priorizar según el impacto en el negocio: abordar primero los errores en páginas con mucho tráfico o flujos críticos para la conversión.
2. Categorizar y clasificar los errores
Errores críticos (solución inmediata):
- Fallos en el procesamiento de pagos
- Problemas de autenticación del usuario
- Problemas con el envío de datos
- Fallos de navegación o enrutamiento
Errores de alta prioridad (corrección durante el sprint):
- Errores de validación de formularios
- Problemas con la funcionalidad de búsqueda
- Problemas de interacción del usuario
- Errores de carga de contenido
Errores de prioridad media (se solucionarán en próximas versiones):
- pequeños fallos UI
- Fallos característicos no críticos
- Problemas cosméticos o de estilo
- Escenarios de casos extremos
3. Implementar la resolución sistemática de errores
Reproducir y diagnosticar:
- Emplee el rastreo de stack: examine los detalles del error para comprender qué código está fallando
- Comprobar la compatibilidad del navegador: verificar que los errores no sean problemas específicos del navegador
- Probar escenarios de usuario: reproducir las acciones del usuario que desencadenan errores
- Revisar la implementación reciente: verificar si los errores se correlacionan con cambios recientes en el código
Solucionar las causas fundamentales:
- Comprobaciones de valores nulos o indefinidos: agregar un manejo de errores adecuado para datos faltantes
- Manejo de erroresAPI : Implemente alternativas elegantes para requestsde red fallidas
- Validación de entrada: Cerciorar de que los formularios manejen casos extremos y entradas no válidas
- Carga de recursos: agregue manejo de errores para imágenes, secuencias de comandos u hojas de estilo faltantes
4. Establecer prácticas de prevención de errores
Implementar un mejor manejo de errores:
- Bloques try-catch: envuelven operaciones riesgosas en un manejo adecuado de errores
- Valores predeterminados: Proporcionar alternativas para datos faltantes o no válidos
- Degradación elegante: garantiza que la funcionalidad principal funcione incluso cuando fallan las características
- Mensajes fáciles de usar: muestra mensajes de error útiles en lugar de detalles técnicos.
Mejorar las prácticas de desarrollo:
- Revisión de código: centrar en el manejo de errores durante las revisiones por pares
- Estrategias de prueba: Incluir escenarios de error en las pruebas unitarias y de integración
- Entorno de prueba: realice pruebas exhaustivas antes de los lanzamientos de producción
- Monitoreo integración: Agregar rastreo de errores a entornos de desarrollo y de prueba
Medición de la mejora
Realice un seguimiento de estas métricas para verificar sus esfuerzos de reducción de errores de JavaScript:
- Reducción de tasa de errores: Disminución del porcentaje de aplicaciones con errores de JavaScript.
- Métrica de impacto del usuario: tasa de conversión mejorada, tasas de rebote reducidas, mayor satisfacción del usuario
- Tiempo de resolución de errores: identificación y solución más rápida de problemas de JavaScript
- Recurrencia de errores: Menos errores repetidos luego de implementar las correcciones
Escenarios de error comunes de JavaScript
Errores script de terceros:
- Problema: La biblioteca o el widget externo provocan errores cuando no se cargan o tienen problemas
- Solución: Implementar límites de error, emplear alternativas y monitorear la dependencia de terceros.
Problemas de compatibilidad Browser :
- Problema: el código funciona en algunos navegadores pero falla en otros
- Solución: Pruebe en todos los navegadores, emplee polyfills e implemente una mejora progresiva
Fallos de red y API:
- Problema: Errores de JavaScript cuando requests de red fallan o devuelven datos inesperados
- Solución: Agregar un manejo de errores adecuado para API de llamada, implementar lógica de reintento y brindar comentarios al usuario.
Casos extremos de entrada del usuario:
- Problema: Los formularios o la interacción se rompen con entradas inesperadas del usuario
- Solución: Implementar validación integral de entrada y desinfección
Estrategias avanzadas de gestión de errores
Rastreo de errores de automatización
- Alertas automáticas: configure alertas para errores de JavaScript nuevos o frecuentes
- Agrupación de errores: emplee la agrupación inteligente para evitar el exceso de alertas
- Puntaje de impacto: priorice los errores según el impacto y la frecuencia en el usuario
integración con flujos de trabajo de desarrollo
- Integración CI/CD: bloquear el despliegue si se detectan errores críticos
- Cotizaciones de rendimiento: Establecer tasa de errores umbral como puertas de despliegue
- Atribución de errores: conecta errores a lanzamientos específicos de implementaciones o características
Enfoque en la experiencia del usuario
- Monitoreo de usuarios reales: Realice un seguimiento de cómo los errores afectan el comportamiento real del usuario
- Impacto de la conversión: Mida cómo la tasa de error se correlaciona con las métricas del negocio
- Análisis del recorrido del usuario: comprender en qué parte del flujo del usuario se producen los errores con mayor frecuencia
Consideraciones importantes
- Priorizar según el impacto en el usuario: centrar primero en los errores que afectan a los usuarios más importantes o a las funciones empresariales más críticas.
- Equilibre la perfección con la practicidad: algunos errores pueden ser aceptables si no afectan significativamente la experiencia del usuario.
- Considere el contexto comercial: las aplicaciones de alto tráfico pueden necesitar una menor tolerancia a errores que las herramientas internas
- Monitorear la fase posterior al despliegue: garantizar que las correcciones no introduzcan nuevos errores
Próximos pasos
- Acción inmediata: Revisar la Bandeja de entrada de errores e identificar los errores de JavaScript de mayor impacto que afectan al usuario
- Mejora de procesos: Establecer reuniones periódicas de triaje de errores y resolución de flujo de trabajo
- Enfoque de prevención: Implementar mejores prácticas de manejo de errores en los procesos de desarrollo
- Monitoreo avanzado: avanzar hacia la prevención proactiva de errores y la optimización de la experiencia del usuario
- Progresar al nivel 2: una vez que los errores de JavaScript estén bajo control, concentrar en la Core Web Vitals optimización
Para obtener instrucciones detalladas sobre el monitoreo y la resolución de errores de JavaScript, consulte nuestra documentación de monitoreo del navegador y la guía de la Bandeja de entrada de errores.