세션 리플레이

세션 리플레이는 사용자가 웹 사이트에서 수행하는 모든 이벤트를 기록하고 재생할 수 있는 기능입니다. 이 기능을 통해 클릭, 스크롤, 입력, 페이지 전환 등의 사용자 행동을 재현할 수 있습니다. 이를 통해 사용자가 실제로 웹사이트와 어떻게 상호 작용하는지 정확히 파악할 수 있습니다.

사용자 행동 기록 및 재생: 세션 리플레이는 사용자 행동을 기록합니다. 기록된 사용자의 행동은 마우스 이동, 클릭, 스크롤 등을 포함합니다. 기록된 사용자의 행동을 그대로 재생하여 특정 시점에 무엇을 했는지 시각적으로 확인할 수 있습니다.
에러 추적 및 장애 재현: 특정 이벤트나 오류 발생 시점을 추적하여 장애 원인을 분석할 수 있습니다. 페이지를 불러오는데 오랜 시간이 문제나 화면에서 발생하는 기타 기술적 결함이 사용자에게 어떻게 보여지는지 시각적으로 확인할 수 있습니다.

노트

세션 리플레이 기능은 로그 조회 권한을 가진 멤버가 이용할 수 있습니다. 멤버 권한 체계에 대한 자세한 설명은 다음 문서를 참조하세요.

지원 브라우저

세션 리플레이를 위한 수집 데이터는 requestIdleCallback API를 지원하는 브라우저에서만 수집합니다. 브라우저별 지원 버전을 확인하세요.

Chrome	Edge	Safari	Firefox	Opera	Chrome Android	Safari iOS	Samsung Internet
> 47	> 79	> 8 *	> 6	> 55	> 47	> 9 *	> 5

노트

세션 리플레이 데이터 수집 시 오버헤드를 방지하기 위해 메인 스레드의 유휴 시간에 데이터를 수집합니다. 이를 위해 requestIdleCallback API를 활용합니다.

requestIdleCallback API는 브라우저가 유휴 상태일 때 콜백을 실행하도록 설계된 API로, 세션 리플레이 데이터 수집 시 주요 작업에 영향을 주지 않도록 보장합니다. 자세한 내용은 다음 링크를 참조하세요.

팁

Safari, Safari iOS는 requestIdleCallback API를 지원하지 않아 기본적으로 세션 리플레이를 수집하지 않습니다. sessionReplayCollectAllBrowser 옵션을 true로 설정하면 해당 브라우저에서도 세션 리플레이 데이터를 수집할 수 있습니다. 단, 이 경우 메인 스레드 유휴 시간 체크 없이 수집되므로 성능에 영향을 줄 수 있습니다. 옵션 적용에 대한 자세한 내용은 다음 링크를 참조하세요.

수집 방식

실제 화면을 녹화하거나 이미지로 캡처하는 대신, DOM 변경 사항과 CSS 스타일 정보 등을 텍스트 형태로 수집합니다. 이때 오버헤드를 방지하기 위해 브라우저의 메인 스레드가 유휴 상태일 때만 변경 사항을 수집하고 데이터를 전송합니다.

에이전트 옵션 적용하기

세션 리플레이 기능을 적용하려면 브라우저 에이전트 옵션을 적용해야 합니다. 다음 예제를 참조하세요.

<script>
  (function (w, h, _a, t, a, b) {
    w = w[a] = w[a] || {
      config: {
        projectAccessKey: {projec_access_key},
        pcode: {pcode},
        sampleRate: 100,
        sessionReplaySampleRate: 50,
        sessionReplayMaskAllTexts: false,
        sessionReplayMaskAllInputs: false,
        proxyBaseUrl: "https://rum-ap-northeast-2.whatap-browser-agent.io/",
      },
    };
    a = h.createElement(_a);
    a.async = 1;
    a.src = t;
    t = h.getElementsByTagName(_a)[0];
    t.parentNode.insertBefore(a, t);
  })(window, document, 'script', 'https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js', 'WhatapBrowserAgent', '');
</script>

sessionReplaySampleRate Number

전체 수집 세션 중 세션 리플레이 수집 비율로 0부터 100까지 설정할 수 있습니다. 예를 들어, sampleRate가 100이고 sessionReplaySampleRate가 50이라면, 전체 세션 중 50%만 세션 리플레이로 기록합니다.

반면에, sampleRate가 50이고 sessionReplaySampleRate가 100이라면, 전체 세션의 50%가 수집 대상이며, 이 중 100%를 세션 리플레이로 기록합니다.
sessionReplayMaskAllTexts Boolean

기본값 true

값을 false로 설정하면 마스킹 처리 없이 모든 텍스트 데이터를 수집합니다.
sessionReplayMaskAllInputs Boolean

기본값 true

값을 false로 설정하면 마스킹 처리 없이 모든 입력(Input) 필드 영역의 데이터를 수집합니다.

민감 정보 수집 제외

민감 정보에 대한 수집 제외 방식을 기본 제공합니다. 화면의 모든 텍스트는 다음과 같이 마스킹 처리되어 수집됩니다. 단, 에이전트 옵션에서 sessionReplayMaskAllTexts의 값이 true로 설정되어 있어야 합니다.

Session replay

특정 영역 마스킹 처리하기

텍스트 외에도 개인 식별 정보나 민감한 데이터가 포함될 수 있으며, 이를 보호하기 위해 특정 영역을 마스킹 처리하는 옵션을 제공합니다.

특정 영역에 대한 마스킹 처리	마스킹을 적용하지 않은 경우

수집 대상에서 제외할 영역에 대한 html 요소(element)의 클래스(class) 이름에 session-replay-block-class를 추가하세요. 다음 예제를 참조하세요.

<div class="session-replay-block-class home-header pure-menu pure-menu-horizontal">
  <div class="home-header-bar">
    {% if site.data.archive %}
    <ul class="home-header-menu pure-menu-list">
      {% for item in site.data.archive %}
        <li class="pure-menu-item">
          <a href="{{ item.url | relative_url }}" class="pure-menu-link {% if page.url == item.url %}current-item{% endif %}"">{{ item.title }}</a>
        </li>
      {% endfor %}
    </ul>
    {% endif %}
  </div>
</div>

특정 텍스트 마스킹 처리

에이전트 옵션에서 sessionReplayMaskAllTexts를 false로 설정하면 대부분의 텍스트가 표시되만 특정 텍스트 영역은 수집 대상에서 제외할 수 있는 옵션을 제공합니다.

Text masking

특정 텍스트 영역을 수집 대상에서 제외하려면 해당 html 요소(element)의 클래스(class) 이름에 session-replay-mask-text-class를 추가하세요. 다음 예제를 참조하세요.

<main class="session-replay-mask-text-class">
  {{ content }}
</main>

<footer class="footer">
  {%- assign year_from = site.posts[-1].date | date: '%Y' -%}
  {%- assign year_to   = site.time | date: '%Y' -%}
  {%- if year_from == nil or year_from == year_to -%}
    {%- assign year_string = year_from -%}
  {%- else -%}
    {%- assign year_string = year_from | append: '&nbsp;' | append: '-' | append: '&nbsp;' | append: year_to -%}
  {%- endif -%}
</footer>