세션 재생

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

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.260.0 이상. 지속적인 개선을 위해 최신 에이전트 버전으로 업그레이드하는 것이 좋습니다.
- 에이전트 유형: Pro 또는 Pro+SPA. 세션 재생은 Lite 브라우저 에이전트에서 작동하지 않습니다.
- 세션 추적 및 세션 추적이 활성화됩니다.
최종 사용자의 브라우저는 세션 리플레이를 기록하는 데 필요한 브라우저 수준 API 지원합니다( MutationObserver 에서 호환성 확인).
는 경우 인박스(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">
```

세션 수동 녹화 리플레이

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

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

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

자동 세션 리플레이 추적 비활성화

API 설정 옵션 autoStart 을 false로 설정하면 샘플링된 경우에도 세션 리플레이가 자동으로 시작되지 않도록 할 수 있습니다. 이는 자동 샘플링보다 특정 작업의 우선 순위를 지정해야 하는 시나리오에 유용합니다. 예를 들어 세션 리플레이가 HIPAA 준수 페이지와 같은 민감한 페이지에서 자동으로 실행되는 것을 원하지 않을 수 있습니다. 이러한 경우에는 사용자 동의를 얻은 후(및 앱에서 .start() 호출) .start() API를 사용하여 재생 기능을 수동으로 트리거할 수 있습니다.

autoStart: false 설정하면 .start() 사용하여 명시적으로 호출될 때까지 초기화를 연기하도록 에이전트에 지시합니다. 이렇게 하면 백앤드가 녹음을 위해 샘플을 샘플링하더라도 세션 리플레이가 전혀 생성되지 않습니다.

중요

.start() 호출한다고 해서 세션 리플레이가 녹화된다는 보장은 없습니다. 이 시점까지는 모듈 가져오기 및 샘플링 결과 평가가 지연됩니다. 강제로 녹화해야 하는 경우 세션 수동 녹화 리플레이를 참조하세요.

이 API 사용을 시작하려면 newrelic.start 참조하세요.

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

데이터 소비

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

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

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

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

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

우리는 데이터 개인 정보 보호를 최우선으로 생각하며 민감한 고객 정보의 노출 가능성을 최소화하기 위해 강력한 기본 설정으로 세션 리플레이를 구축했습니다. 특정 요구 사항에 맞게 개인 정보 보호 설정을 추가로 사용자 정의 할 수 있습니다.

세션 리플레이는 스크린샷이나 영상을 캡쳐하지 않습니다. 대신, 사용자 복합체를 재구성하는 데 필요한 필수 DOM 상태 변경 사항만 기록합니다. 이렇게 하면 저장되는 데이터의 양이 크게 줄어듭니다.

데이터 개인 정보 보호법 준수

뉴렐릭은 GDPR 하에서는 프로세서 데이터 역할을 하고 CCPA 하에서는 서비스 공급업체 역할을 합니다. 이는 당사가 귀하의 지시에 따라 데이터를 처리한다는 것을 의미합니다. 궁극적으로 이러한 법률을 준수하는 것은 제작 내에서 세션 리플레이를 어떻게 구현하는지에 달려 있습니다.

기본적으로 개인 데이터를 포함한 모든 텍스트와 사용자 입력은 녹음 내에서 마스킹됩니다. 필요한 경우 특정 요소를 선택적으로 마스크 해제할 수 있지만 기본값을 사용하면 개인 식별 정보가 쉽게 표시되지 않습니다. 이 접근 방식은 데이터 개인 정보 보호를 위한 강력한 기반을 제공하는 동시에 특정 요구 사항에 대한 유연성을 제공합니다.

세션 리플레이와 앱의 성능

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

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

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

세션 재생 작동 방식

시작하다

세션 리플레이 활성화

샘플링 속도 구성

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

민감한 텍스트 마스크

사이트 콘텐츠 차단

사용자 입력 무시

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

New Relic에서 세션 재생 보기

문제점 해결

UI에 리플레이가 표시되지 않음

문제

해결책

리플레이가 올바르게 표시되지 않음

문제

해결책

세션 수동 녹화 리플레이

자동 세션 리플레이 추적 비활성화

중요

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

데이터 소비

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

데이터 개인 정보 보호법 준수

세션 리플레이와 앱의 성능

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

세션 재생

세션 재생 작동 방식 .css-21sua1{background:none;border:none;width:0;padding:0;}

시작하다

세션 리플레이 활성화

샘플링 속도 구성

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

민감한 텍스트 마스크

사이트 콘텐츠 차단

사용자 입력 무시

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

New Relic에서 세션 재생 보기

문제점 해결

리플레이가 올바르게 표시되지 않음

세션 수동 녹화 리플레이

자동 세션 리플레이 추적 비활성화

중요

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

데이터 소비

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

데이터 개인 정보 보호법 준수

세션 리플레이와 앱의 성능

세션 재생 작동 방식