Mejorando la experiencia del usuario; Una guía para el seguimiento de errores con eventos y propiedades personalizadas

Presentación de Eventos Personalizados

Los frameworks modernos de desarrollo web ofrecen una multitud de herramientas para monitorear las interacciones de los usuarios y el comportamiento del sistema. Entre ellos, los eventos personalizados de Metricalp se destacan como instrumentos versátiles para rastrear acciones y ocurrencias específicas dentro de su aplicación. Ya sea capturando clics, envíos de formularios o incluso errores, los eventos personalizados permiten a los desarrolladores obtener una visión más profunda del comportamiento del usuario y el rendimiento del sistema.

Considere el escenario del seguimiento de errores. Cuando ocurre un error, no se trata solo de identificar el problema, sino de comprender su contexto e impacto en los usuarios. Los registros de errores tradicionales pueden proporcionar detalles técnicos, pero a menudo carecen de la información contextual crucial necesaria para una resolución efectiva. Aquí es donde brillan los eventos personalizados.

Seguimiento de Errores con Eventos Personalizados y Propiedades Personalizadas

Imagina un escenario en el que un usuario se encuentra con un error mientras usa tu aplicación. En lugar de confiar únicamente en registros de errores genéricos, puedes implementar un evento personalizado específicamente diseñado para capturar estas ocurrencias. Vamos a profundizar en cómo se desarrolla este proceso:

En primer lugar, en Metricalp puedes permitir todos los eventos personalizados o puedes especificar los permitidos en la configuración del Tracker.

Lo maravilloso de Metricalp es que puedes tener diferentes propiedades personalizadas por cada evento personalizado. También puedes definir alias de propiedades personalizadas por eventos personalizados en la configuración del Tracker.

Puedes obtener más información sobre alias de propiedades personalizadas y eventos personalizados en la documentación relacionada.

Ahora, aprendamos cómo podemos usar estos eventos personalizados y propiedades para el seguimiento de errores paso a paso.

Definición de Evento: Define un evento personalizado llamado "error" dentro de tu sistema de seguimiento. Este evento servirá como un indicador para capturar errores en toda tu aplicación.

Si permitiste todos los eventos personalizados en la configuración del Tracker, no necesitas definirlo en ningún lugar. Puedes comenzar a producir cualquier evento (como "error") desde el primer día. Pero si restringiste los eventos permitidos (como en nuestro ejemplo), entonces necesitas permitir el evento "error" en la configuración del Tracker.

Contexto del Error: Adjunta propiedades personalizadas al evento "error" para proporcionar contexto y detalles. Estas propiedades podrían incluir "error_title" para describir la naturaleza del error y "error_message" para proporcionar información adicional o guía.

Como describimos en la documentación, siempre puedes adjuntar propiedades personalizadas como "{ type:"error", custom_prop1: "my_value" }". Pero sabemos que custom_prop1 no es... legible. Lo maravilloso de Metricalp es que puedes definir diferentes alias de propiedades personalizadas por eventos personalizados. Luego puedes usar estos alias mientras produces eventos: "{ type:"error", error_title: "my_value" }"

Ahora también definiremos alias de propiedades personalizadas para nuestro evento personalizado de error "error".

Definimos los alias "error_title", "error_message", "user_id", "env", "app_version" para nuestro evento "error".

Ahora es más legible y valioso para analizar. ¡Qué genial, verdad?

Ahora, produciremos nuestro evento personalizado cuando detectemos un error. Hay diferentes formas de producir eventos personalizados. Si usas React o NextJS, puedes usar el método de la biblioteca de integración como se describe en la documentación. Si estás usando la integración pura, consulta la documentación de eventos personalizados.

try {
    // ....
  } catch (err) {
    window.metricalp.event({
      type: 'error',
      error_title: 'Register Attempt Error',
      error_message: err.message,
      user_id: user.id,
      env: 'production',
      app_version: '1.0.0',
    });
  }

Eso es todo. Ahora comenzamos a recopilar registros de errores de manera adecuada. Revisemos nuestro tablero.

Tenemos nuestros errores, ¡hurra! Sé que tener errores no es bueno, pero si podemos capturarlos, podemos corregirlos. Ahora, cuando seleccionamos nuestro evento de error, podemos ver propiedades personalizadas como user_id, etc.

Pero no solo eso, también tenemos todos nuestros datos estándar, como el navegador del usuario, el sistema operativo, etc. Ahora tenemos todos los detalles sobre el error. Podemos detectarlo y corregirlo sin problemas.

Supongamos que detectamos un error 'xxx is not a function' en la propiedad personalizada. Entonces podríamos seleccionar esa propiedad personalizada como filtro y buscar directamente el navegador y el dispositivo de los usuarios para ese error. Si digamos que el 95%+ es el navegador Safari, ¡entonces bang, encontramos el error! Es un problema de compatibilidad del navegador.

Con Metricalp puedes encontrar la causa raíz de cualquier error. ¿Se trata de un problema del sistema operativo? ¿Un dispositivo móvil o el país del usuario? Todos los casos pueden ser analizados en Metricalp.

Dicho esto, Metricalp no es solo una herramienta de análisis. Lo hemos utilizado aquí como un capturador de errores. Es genial tener sistemas robustos y seguros. Pero no se limita a esto, puedes usar eventos y propiedades personalizados para cualquier escenario. Por ejemplo, puedes usarlo para tus pruebas A/B. Puedes usarlo para el seguimiento de conversiones. Depende de tus necesidades y de tu imaginación. Metricalp elimina las fronteras.

Ahora aprendiste cómo puedes usar Metricalp para detectar y rastrear errores de manera adecuada.