Datadog의 RUM을 사용하여 세션별 화면 조작을 동영상으로 보기

배경

자신이 담당하는 서비스로,
Datadog의 RUM을 도입했으므로 방법 등을 Dump합니다.

준비

datadog 측과 앱 측에서 준비가 필요합니다.
다음을 따르십시오.

준비 상세

UX Monitoring 의 RUM Applications 선택

+ New Applicationを選択

Application type 를 선택하고 Application name 를 입력한 후 + Create New RUM Application

소스 코드 삼가

응용 프로그램에 반영

※ 나는 TS에서 하고 있다. 환경마다 RUM을 이용할 수 있도록 했습니다.

import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: process.env.DATADOG_RUM_APPLICATIONID as string,
  clientToken: process.env.DATADOG_RUM_CLIENT_TOKEN as string,
  site: 'datadoghq.com',
  service: process.env.DATADOG_RUM_SERVICE as string,
  env: process.env.DATADOG_RUM_ENV as string,
  // Specify a version number to identify the deployed version of your application in Datadog
  // version: '1.0.0',
  sampleRate: 100,
  trackInteractions: true,
  defaultPrivacyLevel: 'mask-user-input'
})

datadogRum.startSessionReplayRecording()

사용자 세션을 확인하고 싶다면, 다음도 추가 (로그인 후 좋습니까?)

datadogRum.setUser({
  id: {ユーザーID}
})

응용 프로그램 이동

아래와 같이되면 OK!

대시보드

이런 느낌으로 볼 수

세션별 ​​작업을 동영상으로 보기

오류가 발생한 세션을 추적합니다.

Ongoing Issues 의 대상 오류를 클릭하고 See in Error Tracking 를 클릭

Replay Session 클릭

볼 수

수수료

다음과 같습니다.

요약

오류에서 쫓았지만,
대상 페이지에서의 필터링도 가능하므로 그 페이지에서 어떤 느낌으로 조작하고 있는지 둥근 보이게 할 수 있네요 ...!
　
방금 소개한 미세한 조작 방법은 아직 이해할 수 없지만,
프론트 계열의 결함 대응 속도가 올라갈 것 같은 예감이있었습니다!
　
또, 페이지 마다의 조작이라고 하는 관점에서도 UI의 재검토이거나에 도움이 될 것 같네요!
이상입니다!