Session Replay

Session Replay captura la interacción en su aplicación sitio web y mapea otros telemetry data para ayudarlo a comprender las rutas de sus usuarios. Session Replay se puede emplear para la resolución de problemas y mejorar la experiencia del usuario final, tales como:

• Resolución de problemas Errores de JavaScript: soluciona la causa de un error viendo qué estaba haciendo el usuario cuando ocurrió el error. Por ejemplo, si un usuario final recibe un error al intentar completar una transacción de comercio electrónico, puede usar Session Replay para ver qué pasos tomó y qué datos ingresó antes de que ocurriera el error. Esto puede ayudarle a identificar y solucionar rápidamente la causa raíz del problema.
• Mejorar la experiencia del usuario: descubra áreas de su aplicación web que están causando frustración en el usuario. Por ejemplo, es posible que vea que el usuario se pierde en su navegación o hace clic en botones que no hacen nada.
• Identificación de problemas en los recorridos de los usuarios clave: identifique áreas de su aplicación web que están causando problemas de rendimiento. Por ejemplo, si Session Replay revela que la página /cart/checkout está experimentando un tiempo de carga de la página excesivo, priorizaría corregir este recorrido crítico del usuario.

Cómo funciona Session Replay

Cuando un usuario carga su página web, Session Replay toma una instantánea del modelo de objetos de documento (DOM), que representa la estructura y los elementos visuales de la página. Para garantizar información de estilo precisa, el agente del browser accede a sus archivos CSS. Luego, el agente integra estos estilos directamente en la grabación de repetición, eliminando la necesidad de hacer referencia a archivos CSS externos durante la reproducción. A medida que el usuario interactúa con la página, una biblioteca dentro del agente del browser captura cualquier cambio realizado en el DOM. Estos datos capturados se almacenan de forma segura en la base de datos de New Relic.

Las repeticiones se almacenan hasta:

• 4 horas de sesión de usuario
• 30 minutos de inactividad

De forma predeterminada, los datos de eventos browser se almacenan durante 8 días, pero la retención real de datos depende de su cuenta.

Para obtener más detalles sobre Session Replay, consulte las siguientes secciones:

• Consumo de datos: Ver o proyectar el consumo de datos.
• Preocupaciones de privacidad y seguridad del usuario: conozca cómo protegemos sus datos de usuario y cumplimos con los requisitos de privacidad.
• Session Replay y el rendimiento de su aplicación: aprenda cómo Session Replay minimiza el impacto en el rendimiento de su aplicación.

Empezar

Habilitar Session Replay

1. Vaya a one.newrelic.com > All Capabilities > Browser.
2. Seleccione la aplicación de su browser .
3. En el menú de la izquierda, haga clic en Application settings.
4. En la página de configuración de la aplicación, asegúrese de que esté seleccionado Pro o Pro + SPA agente del navegador. Session Replay no está disponible para el agente Lite del navegador.
5. Active las configuraciones Session tracking y Session replay .

Configurar tasas de muestreo

Establezca una frecuencia de muestreo (0%-100%) para las siguientes muestras:

• User sessions registra una muestra aleatoria de todas las sesiones de usuario.

• Errored session registra una muestra aleatoria de todas las sesiones con errores. El agente almacena en el búfer una ventana deslizante de datos durante hasta 30 segundos en el lado del cliente y, si se producen errores, los datos almacenados en el búfer se recopilarán y se registrará el resto de la sesión. Si no se produce un error, la repetición nunca se recopila.

  Por ejemplo, si establece la tasa de muestreo de la sesión en 50% y la tasa de muestreo de error en 100%, significa que:

• Se grabará la mitad de todas las sesiones de usuario.

• Todas las sesiones con errores serán grabadas, incluso si no forman parte de la muestra del 50%.

(Opcional) Configurar ajustes de privacidad

De forma predeterminada, todo el texto y las entradas se reemplazan con asteriscos. A continuación se muestra un ejemplo de cómo se ve una repetición con privacidad predeterminada:

Si esta configuración es apropiada, continúe con el siguiente paso.

Si necesita personalizar qué contenido o entrada del usuario se captura, tiene opciones para enmascarar, bloquear o ignorar clases y atributos específicos de contenido o entrada del usuario. Asegúrese de consultar con su equipo de privacidad antes de cambiar la configuración de privacidad.

Enmascarar texto sensible

Puede enmascarar texto confidencial, lo que significa que el texto se reemplazará con asteriscos (*). Por ejemplo, puede enmascarar el ID de cuenta de un usuario que se muestra en una URL.

Para especificar qué entrada debe enmascararse, tiene algunas opciones:

• En la página Application settings , agregue sus propios selectores de CSS o marque las casillas de enmascaramiento. Tenga en cuenta que el uso de selectores de enmascarar no enmascarará la entrada del usuario, por lo que si necesita ocultar la entrada del usuario, le recomendamos utilizar selectores de bloque.

  

• Agregue nuestra clase CSS nr-mask o atributo data-nr-mask al HTML de su página web. Por ejemplo, para enmascarar el ID de una cuenta para que no se muestre en la URL, agregue nr-mask al <div> que contiene el ID de la cuenta:

  <div>Account ID: <span class="nr-mask">99881123</span></div>
  ```

  Copia

  Estas opciones utilizan un asterisco (*) para enmascarar todo el texto de ese elemento, ocultando el texto real pero revelando la cantidad de caracteres ingresados. Sin embargo, los asteriscos no son números válidos, por lo que enmascarar campos específicos del tipo de número, como números de teléfono o de tarjeta de crédito, dará como resultado un campo en blanco en una repetición.

  Bloquear contenido del sitio

  Puedes bloquear secciones enteras de contenido en tu sitio, lo que significa que la sección aparecerá como un marcador de posición vacío en Session Replay. Por ejemplo, si tiene una imagen en su página web Acerca de nosotros y no necesita capturarla, puede bloquear la clase que contiene la imagen.

  Para bloquear clases o atributos específicos, tienes algunas opciones:

• En la página de configuración de la aplicación, agregue sus selectores CSS en el campo *Bloquear selectores .

  

• Agregue manualmente nuestra clase CSS nr-block o atributo data-nr-block al HTML de su página web. Por ejemplo, si desea bloquear texto e imágenes irrelevantes de Session Replay, agregue nr-block a <div class>:

  <html>
    <head>
      <title>Sample image and text</title>
    </head>
    <body>
      <div class="image-text-container nr-block">
        <img src="https://example.com/image.png" alt="Image description" />
      </div>
    </body>
  </html>

  Copia

  Ignorar la entrada del usuario

  Puede ignorar los cambios en un campo de entrada del usuario, lo que significa que el campo de entrada seguirá mostrar en la repetición, pero no mostrará los cambios en el valor. Por ejemplo, puede ignorar la clase que contiene los campos de dirección de email o tarjeta de crédito. Los campos de entrada de contraseña siempre están enmascarados. 

  Para ignorar la entrada, agregue la clase CSS nr-ignore al nombre de clase del campo de entrada. Por ejemplo, si desea ignorar información confidencial en una página de facturación, agregue class="nr-ignore" a <input type>:

  <div class="sensitive-information">
    <h2>Sensitive Information</h2>
    <p>
      Credit card number:
      <input type="number" class="nr-ignore" id="creditCardNumber" />
    </p>
    <p>
      Expiration date:
      <input type="number" class="nr-ignore" id="expirationDate" />
    </p>
    <p>CVV code: <input type="number" class="nr-ignore" id="cvvCode" /></p>
  </div>

  Copia

(Para copiar/pegar desplegar agente) Actualizar manualmente el fragmento de JavaScript

Si implementa el agente del navegador usando el método copiar/pegar, deberá copiar/pegar desde la UI nuevamente. Esto se debe a que cuando habilita Session Replay, el fragmento de JavaScript se actualiza para incluir las nuevas actualizaciones de configuración.

Para actualizar su código de agente:

1. Vaya a la página Application Settings y copie el fragmento de JavaScript.

   

2. Pégalo en tu código donde estaba el fragmento anterior.

3. Desplegar tu aplicación.

Ver la repetición de la sesión en New Relic

Puede encontrar Session Replay en dos lugares:

• En la página Session replay :

  1. Vaya a one.newrelic.com > All Capabilities > Browser.

  2. Seleccione la aplicación de su browser .

  3. En el menú de la izquierda, desplácese hacia abajo y haga clic en Session replay.

  4. Haga clic en cada repetición para ver los detalles de la sesión.

     

• En la página Errors inbox :

  1. En el menú browser de la izquierda, haga clic en Errors.

  2. Haga clic en las páginas Triage y Group errors para ver las repeticiones adjuntas a los errores.

     

Resolución de problemas

Grabar manualmente la repetición de la sesión

Si es necesario, puede force mediante programación una Session Replay para iniciar o detener la grabación empleando métodos API . A continuación se muestran algunos casos de uso:

• Permitir que el usuario opte por la grabación de interacciones. Por ejemplo, si aparece una ventana emergente que pregunta "¿Permitir que se grabe esta sesión para analizar el rendimiento?" y un usuario consiente:

  1. Llame a newrelic.recordReplay() para iniciar la grabación.
  2. Una vez que se complete la sesión o se retire el consentimiento, use newrelic.pauseReplay() para dejar de capturar datos.

• Grabe sesiones según criterios específicos, como:

  • Comience a grabar solo sesiones en URL específicas, como el flujo de pago de un producto.
  • Detenga la grabación de páginas confidenciales como /billing o /health-records.

Consulte la documentación de la API para obtener instrucciones:

• newrelic.recordReplay
• newrelic.pauseReplay

Deshabilitar el seguimiento automático Session Replay

Puede evitar que la reproducción de sesión se inicie automáticamente, incluso cuando se muestrea, estableciendo la opción de configuración API autoStart en false. Esto resulta útil en escenarios en los que es necesario priorizar acciones específicas sobre la ejemplificación automática. Por ejemplo, es posible que no desee que Session Replay se ejecute automáticamente en páginas confidenciales, como las que cumplen con HIPAA. En tales casos, puede emplear la API .start() para activar manualmente la característica de reproducción luego de obtener el consentimiento del usuario (y su aplicación llama a .start()).

La configuración autoStart: false indica al agente que posponga su inicialización hasta que se llame explícitamente mediante .start(). Esto garantiza que la reproducción de sesión no se creará en absoluto, incluso si el backend toma muestras de su aplicación para grabar.

Para comenzar a emplear esta API, consulte newrelic.start.

Utilice Nerdgraph para configurar los ajustes de reproducción

Puede configurar los ajustes Session Replay usando nuestra API NerdGraph en lugar de usar la UI. Este método es útil si necesita realizar cambios masivos, como aplicar frecuencias de muestreo a múltiples entidades browser .

Aquí hay un ejemplo de mutación y variables para crear una nueva aplicación browser con la configuración predeterminada:

mutation SessionReplayConfigUpdate(
  $guid: EntityGuid!
  $settings: AgentApplicationSettingsUpdateInput!
) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      sessionReplay {
        blockSelector
        errorSamplingRate
        maskTextSelector
        enabled
        collectFonts
        inlineImages
        inlineStylesheet
        samplingRate
        maskAllInputs
        maskInputOptions {
          color
          date
          datetimeLocal
          email
          month
          number
          range
          search
          select
          tel
          text
          textArea
          time
          url
          week
        }
      }
    }
    errors {
      field
      errorClass
      description
    }
  }
}

{
  "sessionReplay": {
    "enabled": true,
    "collectFonts": true,
    "blockSelector": ".private-fields",
    "maskTextSelector": "*",
    "inlineStylesheet": false,
    "maskAllInputs": true,
    "maskInputOptions": {
      "color": true,
      "date": true,
      "textArea": true
    },
    "samplingRate": 9.99,
    "errorSamplingRate": 1.11
  }
}

Consumo de datos

Session Replay sigue el mismo precio de consumo que los otros bytes de su browser . La cantidad de bytes producidos depende del recuento, la duración y los niveles de actividad del usuario de las sesiones, así como de la complejidad del DOM de su sitio.

La forma más precisa de proyectar su costo por repetición es habilitar la característica durante un periodo de prueba corto y medir su consumo real. Alternativamente, puedes usar un promedio de 5,3 MB por repetición como una aproximación aproximada, aunque ten en cuenta que el costo real puede variar significativamente. Una fórmula sencilla para proyectar sus costos aproximados es: sessions x sampling_rate x gb_per_replay x cost_per_gb. He aquí un ejemplo:

1 million (sessions) x 5% (sampling_rate) x 0.0053 (gb_per_replay) x $0.35 (cost_per_gb) = $92.75 for 50,000 replays

Para controlar su consumo, ajuste sus tasas de muestreo.

Preocupaciones de seguridad y privacidad del usuario

Priorizamos la privacidad de los datos y creamos Session Replay con configuraciones predeterminadas estables para minimizar la exposición potencial de información confidencial de los clientes. Puede personalizar aún más la configuración de privacidad para satisfacer sus necesidades específicas.

Session Replay no captura capturas de pantalla ni videos. En cambio, registra solo los cambios de estado DOM esenciales necesarios para reconstruir la interacción del usuario. Esto reduce significativamente la cantidad de datos almacenados.

Cumplimiento de las leyes de privacidad de datos

New Relic actúa como procesador de datos según GDPR y proveedor de servicios según CCPA. Esto significa que procesamos datos de acuerdo con sus instrucciones. En última instancia, el cumplimiento de estas leyes depende de cómo implemente Session Replay dentro de su aplicación.

De forma predeterminada, todo el texto y las entradas del usuario, incluidos los datos personales, están enmascarados dentro de las grabaciones. Puede desenmascarar selectivamente elementos específicos si es necesario, pero la configuración predeterminada garantiza que ninguna información de identificación personal sea fácilmente visible. Este enfoque proporciona una base estable para la privacidad de los datos y al mismo tiempo ofrece flexibilidad para sus necesidades específicas.

Session Replay y el rendimiento de tu app

Session Replay minimiza el impacto en el rendimiento de su aplicación con:

• Impacto inicial mínimo: Session Replay se carga de forma asincrónica después de cargar la página completa, lo que garantiza que no interfiera con el rendimiento métrico de la carga temprana de la página.

• Seguimiento de mutaciones DOM : una vez cargado, Session Replay monitorea los cambios DOM y los informa como carga comprimida. El tamaño de estas cargas se correlaciona con la complejidad del árbol DOM .

• Técnicas de optimización del rendimiento: el tamaño de la carga útil también puede aumentar si el DOM es grande. Sin embargo, Session Replay utiliza una serie de técnicas para reducir el tamaño de la carga, como por ejemplo:

  • Compresión GZIP

  • Reducción de duplicación

  • Recolección estratégica de carga: solo envía una carga grande (comprimida) cuando se captura el DOM completo, lo que generalmente solo ocurre cuando se importa por primera vez la característica de reproducción. Después de eso, solo enviará pequeñas cargas relacionadas con las acciones del usuario. El agente del browser recogerá lo que ocurra primero de lo siguiente:

    • La carga útil alcanza más de 64 KB comprimidos
    • Pasan 60 segundos
    • La visibilidad de la página cambia (cambio de pestaña, enfoque, navegación, etc.)
    • La sesión termina