세션 재생

중요

세션 리플레이는 제한된 미리보기 상태입니다. 이 기능은 2024년 5월 15일부터 요금이 청구될 예정입니다. 자세한 내용은 데이터 소비를 참조하세요.

세션 리플레이는 귀하의 웹 앱에서 사용자 블록 캡슐을 재생하고 다른 텔레메트리 데이터를 매핑하여 사용자의 여정을 이해하는 데 도움을 줍니다. 세션 리플레이는 다음과 같은 문제 해결, 최적 사용자 환경 개선에 사용될 수 있습니다.

JavaScript 오류 해결: 오류가 발생했을 때 사용자가 무엇을 하고 있었는지 확인하여 오류 원인을 해결합니다. 예를 들어, 최종 사용자가 전자상거래를 완료하려고 시도하는 동안 오류가 발생하는 경우 세션 재생을 사용하여 오류가 발생하기 전에 수행한 단계와 입력한 데이터를 확인할 수 있습니다. 이를 통해 문제의 근본 원인을 신속하게 파악하고 해결하는 데 도움이 됩니다.
사용자 경험 개선: 사용자에게 불만을 야기하는 웹 앱 영역을 발견합니다. 예를 들어 사용자가 탐색 중에 길을 잃거나 아무 작업도 수행하지 않는 버튼을 클릭하는 것을 볼 수 있습니다.
주요 사용자 여정의 문제 식별: 성능 문제를 일으키는 웹 앱 영역을 식별합니다. 예를 들어 세션 재생을 통해 /cart/checkout 페이지에서 과도한 페이지 로드 시간이 발생하고 있는 것으로 나타나면 이 중요한 사용자 경험을 해결하는 데 우선순위를 두어야 합니다.

세션 재생 작동 방식

사용자가 웹페이지를 로드하면 세션 리플레이는 페이지의 구조와 시각적 요소를 나타내는 DOM(문서 객체 모델)의 스냅샷을 찍습니다. 정확한 스타일 정보를 보장하기 위해 브라우저 에이전트는 CSS 파일에 액세스합니다. 그런 다음 에이전트는 이러한 스타일을 재생 녹음에 직접 통합하므로 재생 중에 외부 CSS 파일을 참조할 필요가 없습니다. 사용자가 페이지와 상호 작용할 때 브라우저 에이전트 내의 라이브러리는 DOM에 대한 모든 변경 사항을 캡처합니다. 이렇게 캡처된 데이터는 뉴렐릭의 데이터베이스에 안전하게 저장됩니다.

리플레이는 최대 다음까지 저장됩니다.

사용자 세션 4시간
30분 동안 활동 없음

기본적으로 브라우저 이벤트 데이터는 8일 동안 저장되지만 실제 데이터 보존 기간은 계정에 따라 다릅니다.

세션 리플레이에 대한 자세한 내용은 다음 섹션을 참조하세요.

데이터 소비: 데이터 소비 현황 및 유료 소비 전환 계획을 확인할 수 있습니다.
사용자 개인 정보 보호 및 보안 문제: 당사가 사용자 데이터를 보호하고 개인 정보 보호 요구 사항을 충족하는 방법을 알아보세요.
세션 리플레이 및 앱 성능: 세션 리플레이가 앱 성능에 미치는 영향을 최소화하는 방법을 알아보세요.

시작하다

세션 리플레이 활성화

one.newrelic.com > All Capabilities > Browser
으)로 이동합니다.
브라우저 앱을 선택하세요.
왼쪽 메뉴에서
Application settings
클릭합니다.
애플리케이션 설정 페이지에서
Pro
또는
Pro + SPA
브라우저 에이전트가 선택되어 있는지 확인하세요. 세션 리플레이는 Lite 브라우저 에이전트에 사용할 수 없습니다.
Session tracking
및
Session replay
설정을 켜기로 전환합니다.

샘플링 속도 구성

다음 샘플에 대해 샘플링 속도(0%-100%)를 설정합니다.

User sessions 모든 사용자 세션의 무작위 샘플을 기록합니다.
Errored session 오류가 발생한 모든 세션의 무작위 샘플을 기록합니다. 에이전트는 클라이언트 측에서 최대 30초 동안 버퍼링하며, 오류가 발생하면 세션이 기록됩니다. 오류가 발생하지 않으면 재생이 수집되지 않습니다.
예를 들어 세션 샘플링 비율을 50%로 설정하고 오류 샘플링 비율을 100%로 설정하면 다음을 의미합니다.
전체 사용자 세션의 절반이 녹화됩니다.
오류가 발생한 모든 세션은 50% 샘플에 속하지 않더라도 기록됩니다.

(선택사항) 개인정보 보호 설정 구성

기본적으로 모든 텍스트와 입력은 별표로 대체됩니다. 다음은 기본 개인 정보 보호를 사용하여 재생이 어떻게 보이는지에 대한 예입니다.

이 설정이 적절하다면 다음 단계로 이동하세요.

캡처되는 콘텐츠 또는 사용자 입력을 사용자 정의해야 하는 경우 특정 클래스 및 콘텐츠 또는 사용자 입력의 속성을 마스크, 차단 또는 무시할 수 있는 옵션이 있습니다. 개인정보 보호 설정을 변경하기 전에 반드시 개인정보 보호팀에 문의하세요.

민감한 텍스트 마스크

민감한 텍스트를 마스크할 수 있습니다. 즉, 텍스트가 별표(*)로 대체됩니다. 예를 들어 URL에 표시되는 사용자의 계정 ID를 마스크할 수 있습니다.

어떤 입력을 마스킹할지 지정하려면 다음과 같은 몇 가지 옵션이 있습니다.

Application settings 페이지에서 자체 CSS 선택기를 추가하거나 마스킹 상자를 선택하세요. 마스크 선택기를 사용하면 마스크 사용자 입력이 되지 않으므로 , 사용자 입력을 숨겨야 하는 경우에는 블록 선택기를 사용하는 것이 좋습니다.
웹페이지 HTML에 CSS 클래스 nr-mask 또는 속성 data-nr-mask 을 추가하세요. 예를 들어, 계정 ID를 URL에 표시하지 않으려면 계정 ID가 포함된 <div> 에 nr-mask 추가하세요.
```
<div>Account ID: <span class="nr-mask">99881123</span></div>
```
```
이러한 옵션은 별표(*)를 사용하여 해당 요소의 모든 텍스트를 마스크하여 실제 텍스트를 숨기지만 입력한 문자 수는 표시합니다. 그러나 별표는 유효한 숫자가 아니므로 전화번호 또는 신용카드 번호와 같은 번호 유형별 필드를 마스킹하면 재생 시 빈 필드가 표시됩니다.
사이트 콘텐츠 차단
사이트 콘텐츠의 전체 섹션을 차단할 수 있습니다. 즉, 해당 섹션은 세션 리플레이에서 빈 플레이스홀더로 표시됩니다. 예를 들어 회사 소개 웹페이지에 이미지가 있고 이를 캡처할 필요가 없는 경우 해당 이미지가 포함된 클래스를 차단할 수 있습니다.
특정 클래스나 속성을 차단하려면 다음과 같은 몇 가지 옵션이 있습니다.
애플리케이션 설정 페이지에서 *블록 선택기 필드에 CSS 선택기를 추가합니다.
웹페이지 HTML에 CSS 클래스 nr-block 또는 속성 data-nr-block 을 수동으로 추가하세요. 예를 들어 세션 재생에서 관련 없는 텍스트와 이미지를 차단하려면 <div class> 에 nr-block 추가하세요.
```
<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>
```
사용자 입력 무시
사용자 입력 필드에 대한 변경 사항을 무시할 수 있습니다. 즉, 입력 필드가 재생에 계속 표시되지만 값에 대한 변경 사항은 표시되지 않습니다. 예를 들어 이메일 주소나 신용 카드 필드가 포함된 클래스를 무시할 수 있습니다. 비밀번호 입력 필드는 항상 마스크되어 있습니다.
입력을 무시하려면 CSS 클래스 nr-ignore 입력 필드의 클래스 이름에 추가하세요. 예를 들어, 결제 페이지의 민감한 정보를 무시하려면 <input type> 에 class="nr-ignore" 추가하세요.
```
<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>
```

(복사/붙여넣기 배포된 에이전트의 경우) JavaScript 코드 조각을 수동으로 업데이트합니다.

복사/붙여넣기 방법을 사용하여 브라우저 에이전트를 구현하는 경우 UI 에서 다시 복사/붙여넣기해야 합니다. 세션 리플레이를 활성화하면 JavaScript 스니펫이 새로운 구성 업데이트를 포함하도록 업데이트되기 때문입니다.

에이전트 코드를 업데이트하려면:

Application Settings 페이지로 이동하여 자바스크립트 스니펫을 복사하세요.
이전 코드 조각이 있던 코드에 붙여넣으세요.
앱을 배포합니다.

New Relic에서 세션 재생 보기

세션 리플레이는 두 곳에서 찾을 수 있습니다:

Session replay 페이지에서:
1. one.newrelic.com > All Capabilities > Browser 으)로 이동합니다.
2. 브라우저 앱을 선택하세요.
3. 왼쪽 메뉴에서 아래로 스크롤하여 Session replay 클릭합니다.
4. 각 재생을 클릭하면 세션 세부정보를 볼 수 있습니다.
Errors inbox 페이지에서:
1. 왼쪽 브라우저 메뉴에서 Errors 클릭합니다.
2. 오류에 첨부된 재생을 보려면 Triage 및 Group errors 페이지를 클릭하세요.

문제점 해결

문제

세션 재생 기능이 활성화되었지만 재생이 표시되지 않습니다.

해결책

가능한 몇 가지 수정 사항은 다음과 같습니다.

샘플링 속도를 확인하세요. 재생과 오류 모두에 대한 샘플링이 있습니다.
리플레이를 볼 수 있는 권한이 있는지 확인하세요.
Pro 또는 Pro+SPA 버전의 브라우저 에이전트를 사용하고 있는지 확인하세요. 세션 재생은 Lite 브라우저 에이전트에서 작동하지 않습니다.
브라우저 에이전트가 다음 요구 사항을 충족하는지 확인하세요.
- 에이전트 버전 v1.240.0 이상. 지속적인 개선을 위해 최신 에이전트 버전으로 업그레이드하는 것이 좋습니다.
- 에이전트 유형: Pro 또는 Pro+SPA. 세션 재생은 Lite 브라우저 에이전트에서 작동하지 않습니다.
유니스 인박스(errors inbox) 에서는 토글을 사용하여 리플레이 시 오류만 표시할 수 있습니다. 그러면 항상 재생을 볼 수 있도록 보기가 필터링됩니다. 기본적으로 브라우저 이벤트 데이터는 8일 동안 저장되지만 실제 데이터 보존 기간은 계정에 따라 다릅니다.
복사/붙여넣기 배포 방법을 사용하는 경우 에이전트 코드를 업데이트했는지 확인하세요.
APM 배포 방법을 사용하는 경우 세션 재생이 자동으로 활성화될 때까지 잠시 기다려야 할 수도 있습니다. 여전히 데이터가 표시되지 않으면 에이전트를 다시 시작해 보세요.

문제

리플레이가 표시되지만 올바르게 표시되지 않습니다.

이는 CSS 파일이 별도의 도메인에서 호스팅되고 CORS(Cross-Origin Resource Sharing) 보안 조치로 인해 에이전트가 CSS 파일에 액세스하지 못하기 때문일 수 있습니다. 필수 스타일 정보가 누락될 수 있으므로 재생이 불완전하거나 부정확할 수 있습니다.

뒤에서 일어나는 일은 다음과 같습니다.

세션 리플레이는 웹사이트의 구조와 시각적 요소를 포함하는 사용자의 DOM을 재구축하는 방식으로 작동합니다. 이를 달성하려면 에이전트가 CSS 파일에 액세스하여 스타일 정보를 정확하게 캡처해야 합니다. 그런 다음 이러한 스타일을 재생 녹음에 직접 인라인하여 재생 중에 원본 CSS 파일을 참조할 필요가 없습니다.
귀하의 CSS 파일이 별도의 도메인에서 호스팅되는 경우 CORS는 당사 에이전트가 해당 파일에 액세스하는 것을 차단할 수 있습니다.
해결책
CSS 파일에 액세스할 수 있도록 하려면 HTML 코드 내의 <link rel="stylesheet"> 요소에 crossorigin="anonymous" 속성을 추가하세요. 이 속성은 브라우저에 특정 CSS 파일에 대한 교차 원본 액세스를 허용하도록 지시하여 브라우저 에이전트가 스타일 정보를 기록하고 통합할 수 있도록 합니다.
다음은 crossorigin="anonymous" 속성을 추가하는 예입니다.
```
<link rel="stylesheet" href="assets.yoursite.com/styles.css" crossorigin="anonymous">
```

세션 수동 녹화 리플레이

필요한 경우 API 메서드를 사용하여 프로그래밍 방식으로 세션 리플레이를 호출할 수 있습니다. 다음은 몇 가지 사용 사례입니다.

사용자가 상호작용 녹음을 선택하도록 허용합니다. 예를 들어, "성능 분석을 위해 이 세션을 기록하도록 허용하시겠습니까?"라는 팝업이 표시되는 경우:
1. 사용자 동의 시 NREM.startSessionReplay 호출하여 녹음을 시작합니다.
2. 세션이 완료되거나 동의가 철회되면 NREM.stopSessionReplay 사용하여 데이터 캡처를 중지합니다.
특정 기준에 따라 세션을 녹화합니다. 예를 들어:
- 제품 결제 흐름과 같은 특정 URL의 세션에 대해서만 녹화를 시작합니다.
- /billing 또는 /health-records 과 같은 민감한 페이지에 대한 기록을 중지합니다.

지침은 API 문서를 참조하세요.

수동 녹화 중에 모든 사용자 캡슐화를 캡처하려면, 샘플링 속도를 0%로 설정하세요.

Nerdgraph를 사용하여 재생 설정 구성

를 사용하는 대신 NerdGraph API 사용하여 세션 리플레이 설정을 구성할 수 UI 있습니다. 이 방법은 여러 브라우저 모임에 샘플링 비율을 적용하는 등 대량 변경이 필요한 경우에 유용합니다.

다음은 기본 설정으로 새 브라우저 애플리케이션을 생성하기 위한 변형 및 변수의 예입니다.

돌연변이	변수
`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 } }`

돌연변이

변수

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
  }
}

데이터 소비

소비량 보기

2024년 5월 15일 이전에는 세션 리플레이 바이트가 무료이지만, 바이트가 지불되면 계획에 도움이 되도록 소비량을 확인할 수 있습니다.

Application Settings 으)로 이동합니다.
Session replay로 스크롤합니다.
Session sample size 섹션에서 View your account's consumption 클릭합니다.

유료 소비 계획

2024년 5월 15일 이후 세션 리플레이는 다른 브라우저 바이트와 동일한 소비 가격을 따릅니다. 생성되는 바이트 양은 세션 수, 길이, 사용자 활동 수준은 물론 사이트 DOM의 복잡성에 따라 달라집니다.

재생당 비용을 예측하는 가장 정확한 방법은 짧은 테스트 기간 동안 기능을 활성화하고 실제 소비량을 측정하는 것입니다. 또는 대략적인 근사치로 재생당 평균 5.3MB를 사용할 수 있지만 실제 비용은 상당히 다를 수 있다는 점을 염두에 두십시오. 대략적인 비용을 예측하는 간단한 공식은 다음과 같습니다. sessions x sampling_rate x gb_per_replay x cost_per_gb

예: sessions: 1 million x sampling_rate: 5% x gb_per_replay: 0.0053 x cost_per_gb: $0.30 = $79.50 for 50,000 replays

소비를 제어하려면 샘플링 속도를 조정하세요.

사용자 개인 정보 보호 및 보안 문제

우리는 데이터 개인 정보 보호를 중요하게 생각하므로 민감한 고객 정보의 공유 가능성을 제한하도록 설계된 강력한 기본 개인 정보 보호 설정을 갖춘 세션 리플레이를 구축했습니다. 이러한 설정은 개인 정보 보호 요구 사항을 충족하도록 추가로 사용자 정의할 수 있습니다 .

세션 리플레이는 스크린샷이나 영상을 저장하지 않습니다. 사용자 경험을 재현하는 데 필요한 필수 DOM 상태 변경 사항만 기록합니다. 이로 인해 저장되는 데이터의 양이 훨씬 줄어듭니다.

세션 리플레이와 앱의 성능

세션 리플레이는 다음을 통해 앱 성능에 미치는 영향을 최소화합니다.

초기 영향 최소화: 세션 리플레이는 전체 페이지 로드 후 비동기식으로 로드되므로 초기 페이지 로드 성능 지표에 간섭이 발생하지 않습니다.
DOM 돌연변이 추적: 세션이 로드되면 세션 리플레이는 DOM 변경 사항을 모니터링하고 이를 압축된 페이로드로 보고합니다. 이러한 페이로드의 크기는 DOM 트리의 복잡성과 관련이 있습니다.
성능 최적화 기술: DOM이 큰 경우 페이로드 크기도 증가할 수 있습니다. 그러나 세션 리플레이는 페이로드 크기를 줄이기 위해 다음과 같은 다양한 기술을 사용합니다.
- GZIP 압축
- 중복 감소
- 전략적 페이로드 수집: 전체 DOM이 캡처될 때만 대규모(압축) 페이로드를 보냅니다. 이는 일반적으로 재생 기능을 처음 가져올 때만 발생합니다. 그 후에는 사용자 작업과 관련된 작은 페이로드만 보냅니다. 브라우저 에이전트는 다음 중 먼저 발생하는 모든 항목을 수집합니다.
  - 페이로드가 압축된 64KB를 초과합니다.
  - 60초 경과
  - 페이지 가시성 변경(탭 변경, 포커스, 탐색 등)

사용자의 편의를 위해 제공되는 기계 번역입니다.

중요

세션 재생 작동 방식