Session Replay

Session Replay reproduz a interação do usuário em seu aplicativo da web e mapeia outros dados de telemetria para ajudá-lo a entender as jornadas do seu usuário. Session Replay pode ser utilizado para resolução de problemas e melhoria da experiência do usuário final, como:

• Resolução de problemas Erros de JavaScript: Solucione a causa de um erro vendo o que o usuário estava fazendo quando o erro ocorreu. Por exemplo, se um usuário final receber um erro ao tentar concluir uma transação de comércio eletrônico, você poderá usar Session Replay para ver quais etapas ele realizou e quais dados ele inseriu antes do erro ocorrer. Isso pode ajudá-lo a identificar e corrigir rapidamente a causa raiz do problema.
• Melhorando a experiência do usuário: Descubra áreas do seu aplicativo web que estão causando frustração ao usuário. Por exemplo, você pode ver que o usuário está se perdendo na navegação ou clicando em botões que não fazem nada.
• Identificando problemas nas principais jornadas do usuário: identifique áreas do seu aplicativo Web que estão causando problemas de desempenho. Por exemplo, se Session Replay revelar que a página /cart/checkout está apresentando um ritmo de carregamento excessivo da página, você priorizará a correção dessa jornada crítica do usuário.

Como funciona Session Replay

Quando um usuário carrega sua página da web, Session Replay tira um instantâneo do Document Object Model (DOM), que representa a estrutura e os elementos visuais da página. Para garantir informações de estilo precisas, o agente do browser acessa seus arquivos CSS. O agente então integra esses estilos diretamente na gravação de repetição, eliminando a necessidade de fazer referência a arquivos CSS externos durante a reprodução. À medida que o usuário interage com a página, uma biblioteca dentro do agente do browser captura todas as alterações feitas no DOM. Esses dados capturados são armazenados com segurança no banco de dados da New Relic.

Os replays armazenam até:

• 4 horas de uma sessão de usuário
• 30 minutos de inatividade

Por padrão, os dados de eventos do browser são armazenados por 8 dias, mas a retenção real de dados depende da sua conta.

Para obter mais detalhes sobre Session Replay, consulte as seções a seguir:

• Consumo de dados: visualize ou projete o consumo de dados.
• Preocupações com privacidade e segurança do usuário: Saiba como protegemos os dados do seu usuário e atendemos aos requisitos de privacidade.
• Session Replay e o desempenho do seu aplicativo: Saiba como Session Replay minimiza o impacto no desempenho do seu aplicativo.

Iniciar

Habilitar Session Replay

1. Vá para

   one.newrelic.com > All Capabilities > Browser

   .

2. Selecione seu aplicativo de browser.

3. No menu à esquerda, clique em

   Application settings

   .

4. Na página Configurações do aplicativo, certifique-se de

   Pro

   ou

   Pro + SPA

   agente browser esteja selecionado. Session Replay não está disponível para o agente browser Lite.

5. Ative as configurações

   Session tracking

   e

   Session replay

   .

Configurar taxas de amostragem

Defina uma taxa de amostragem (0%-100%) para as seguintes amostras:

• User sessions registra uma amostra aleatória de todas as sessões do usuário.

• Errored session registra uma amostra aleatória de todas as sessões com erros. O agente armazena em buffer uma janela deslizante de dados por até 30 segundos no lado do cliente e, se ocorrerem erros, os dados armazenados em buffer serão coletados e o restante da sessão será gravado. Se não ocorrer um erro, a reprodução nunca será coletada.

  Por exemplo, se você definir a taxa de amostragem da sessão como 50% e a taxa de amostragem de erro como 100%, isso significa que:

• Metade de todas as sessões do usuário serão gravadas.

• Todas as sessões com erro serão registradas, mesmo que não façam parte da amostra de 50%.

(Opcional) Definir configurações de privacidade

Por padrão, todos os textos e entradas são substituídos por asteriscos. Aqui está um exemplo da aparência de um replay com privacidade padrão:

Se esta configuração for apropriada, passe para a próxima etapa.

Se precisar personalizar qual conteúdo ou entrada do usuário é capturado, você terá opções para mascarar, bloquear ou ignorar classes específicas e atributos de conteúdo ou entrada do usuário. Certifique-se de verificar com sua equipe de privacidade antes de alterar as configurações de privacidade.

Mascarar texto sensível

Você pode mascarar texto confidencial, o que significa que o texto será substituído por asteriscos (*). Por exemplo, você pode mascarar o ID da conta de um usuário exibido em um URL.

Para especificar qual entrada deve ser mascarada, você tem algumas opções:

• Na página Application settings , adicione seus próprios seletores CSS ou marque as caixas de mascaramento. Observe que o uso de seletores de mascarar não irá mascarar a entrada do usuário, portanto, se você precisar ocultar a entrada do usuário, recomendamos o uso de seletores de bloco.

  

• Adicione nossa classe CSS nr-mask ou atributo data-nr-mask ao HTML da sua página da web. Por exemplo, para impedir que um ID de conta seja exibido no URL, adicione nr-mask ao <div> que contém o ID da conta:

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

  Copiar

  Essas opções usam um asterisco (*) para mascarar todo o texto desse elemento, ocultando o texto real, mas revelando o número de caracteres inseridos. No entanto, os asteriscos não são números válidos, portanto, mascarar campos específicos do tipo de número, como números de telefone ou de cartão de crédito, resultará em um campo em branco em uma repetição.

  Bloquear conteúdo do site

  Você pode bloquear seções inteiras de conteúdo do seu site, o que significa que a seção aparecerá como um espaço vazio reservado no Session Replay. Por exemplo, se você tiver uma imagem em sua página Sobre nós e não precisar capturá-la, poderá bloquear a classe que contém a imagem.

  Para bloquear aulas ou atributos específicos, você tem algumas opções:

• Na página Configurações do aplicativo, adicione seus seletores CSS no campo *Seletores de bloco .

  

• Adicione manualmente nossa classe CSS nr-block ou atributo data-nr-block ao HTML da sua página da web. Por exemplo, se você quiser bloquear textos e imagens irrelevantes do Session Replay, adicione 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>

  Copiar

  Ignorar a entrada do usuário

  Você pode ignorar as alterações em um campo de entrada do usuário, o que significa que o campo de entrada ainda será exibido na reprodução, mas você não exibirá as alterações no valor. Por exemplo, você pode ignorar a classe que contém o endereço de e-mail ou os campos do cartão de crédito. Os campos de entrada de senha são sempre mascarados. 

  Para ignorar a entrada, adicione a classe CSS nr-ignore ao nome da classe do campo de entrada. Por exemplo, se quiser ignorar informações confidenciais em uma página de faturamento, adicione 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>

  Copiar

(Para copiar/colar agente de implantação) Atualize manualmente o trecho JavaScript

Se você implantar o navegador do agente usando o método copiar/colar, será necessário copiar/colar da interface novamente. Isso ocorre porque quando você ativa Session Replay, o trecho JavaScript é atualizado para incluir as novas atualizações de configuração.

Para atualizar seu código de agente:

1. Vá para a página Application Settings e copie o trecho JavaScript.

   

2. Cole-o no seu código onde estava o trecho antigo.

3. Implantar seu aplicativo.

Veja o replay da sessão no New Relic

Você pode encontrar o Session Replay em dois lugares:

• Na página Session replay :

  1. Vá para one.newrelic.com > All Capabilities > Browser.

  2. Selecione seu aplicativo de browser.

  3. No menu à esquerda, role para baixo e clique em Session replay.

  4. Clique em cada replay para ver os detalhes da sessão.

     

• Na página Errors inbox :

  1. No menu esquerdo do browser, clique em Errors.

  2. Clique nas páginas Triage e Group errors para ver replays anexados aos erros.

     

Resolução de problemas

Gravar manualmente a repetição da sessão

Se necessário, você pode force programaticamente uma Session Replay para iniciar ou interromper a gravação usando métodos API . Aqui estão alguns casos de uso:

• Permitir que o usuário opte pela gravação de interação. Por exemplo, se você tiver um pop-up perguntando “Permitir que esta sessão seja gravada para análise de desempenho?” e um usuário consente:

  1. Chame newrelic.recordReplay() para iniciar a gravação.
  2. Assim que a sessão for concluída ou o consentimento for retirado, use newrelic.pauseReplay() para interromper a captura de dados.

• Grave sessões com base em critérios específicos, como:

  • Comece a gravar apenas sessões em URLs específicos, como um fluxo de checkout de produto.
  • Interrompa a gravação de páginas confidenciais, como /billing ou /health-records.

Consulte a documentação da API para obter instruções:

• newrelic.recordReplay
• newrelic.pauseReplay

Desativar rastreamento automático Session Replay

Você pode impedir que a repetição da sessão seja iniciada automaticamente, mesmo quando amostrada, definindo a opção de configuração API autoStart como false. Isto é útil em cenários onde você precisa priorizar ações específicas em vez de amostragem automática. Por exemplo, você pode não querer que o Session Replay seja executado automaticamente em páginas confidenciais, como as compatíveis com HIPAA. Nesses casos, você pode usar a API .start() para acionar manualmente o recurso de reprodução depois que o consentimento do usuário for obtido (e seu aplicativo chamar .start())

A configuração autoStart: false instrui o agente a adiar sua inicialização até ser chamado explicitamente usando .start(). Isso garante que o Session Replay não será criado, mesmo que o backend faça uma amostra do seu aplicativo para gravação.

Para começar a usar esta API, consulte newrelic.start.

Use o Nerdgraph para definir as configurações de reprodução

Você pode definir as configurações Session Replay usando nossa API NerdGraph em vez de usar a interface. Este método é útil se você precisar fazer alterações em massa, como aplicar taxas de amostragem a múltiplas entidades do browser.

Aqui está um exemplo de mutação e variáveis para criar um novo aplicativo de browser com configurações padrão:

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 dados

Session Replay segue o mesmo preço de consumo dos demais bytes do navegador. A quantidade de bytes produzidos depende da contagem, duração e níveis de atividade do usuário nas sessões, bem como da complexidade do DOM do seu site.

A maneira mais precisa de projetar seu custo por repetição é ativar o recurso por um curto período de teste e medir seu consumo real. Como alternativa, você pode usar uma média de 5,3 MB por replay como uma aproximação aproximada, mas lembre-se de que seu custo real pode variar significativamente. Uma fórmula simples para projetar seus custos aproximados é: sessions x sampling_rate x gb_per_replay x cost_per_gb. Aqui está um exemplo:

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 seu consumo, ajuste suas taxas de amostragem.

Preocupações com privacidade e segurança do usuário

Priorizamos a privacidade dos dados e construímos Session Replay com configurações padrão fortes para minimizar a exposição potencial de informações confidenciais dos clientes. Você pode personalizar ainda mais as configurações de privacidade para atender às suas necessidades específicas.

Session Replay não captura captura de tela ou vídeos. Em vez disso, ele registra apenas as mudanças essenciais de estado DOM necessárias para reconstruir a interação do usuário. Isso reduz significativamente a quantidade de dados armazenados.

Conformidade com as leis de privacidade de dados

New Relic atua como processadora de dados sob GDPR e provedora de serviço sob CCPA. Isto significa que processamos dados de acordo com as suas instruções. Em última análise, a conformidade com essas leis depende de como você implementa Session Replay em seu aplicativo.

Por padrão, todos os textos e entradas do usuário, incluindo dados pessoais, são mascarados nas gravações. Você pode desmascarar seletivamente elementos específicos, se necessário, mas o padrão garante que nenhuma informação de identificação pessoal esteja prontamente visível. Essa abordagem fornece uma base sólida para a privacidade de dados, ao mesmo tempo que oferece flexibilidade para suas necessidades específicas.

Session Replay e o desempenho do seu aplicativo

Session Replay minimiza o impacto no desempenho do seu aplicativo com:

• Impacto inicial mínimo: Session Replay carrega de forma assíncrona após o carregamento completo da página, garantindo nenhuma interferência na métrica de desempenho de carregamento inicial da página.

• Rastreamento de mutação DOM : uma vez carregado, Session Replay monitora as alterações DOM e as relata como carga compactada. O tamanho dessa carga está correlacionado com a complexidade da árvore DOM .

• Técnicas de otimização de desempenho: O tamanho da carga útil também pode aumentar se o DOM for grande. No entanto, Session Replay utiliza diversas técnicas para reduzir o tamanho da carga, como:

  • Compressão GZIP

  • Redução de duplicação

  • Coleta estratégica de carga útil: ela só envia uma carga útil grande (compactada) quando o DOM completo é capturado, o que normalmente só acontece quando o recurso de reprodução é importado pela primeira vez. Depois disso, enviará apenas pequenas cargas relacionadas às ações do usuário. O agente do browser coletará o que acontecer primeiro entre os seguintes:

    • A carga atinge mais de 64 KB compactados
    • 60 segundos se passam
    • A visibilidade das mudanças da página (mudança de guia, foco, navegação, etc)
    • A sessão termina