Front-End 모니터링 툴 Rum(Real User Mornitoring) 도입에 대한 고찰(2) - Rum의 국내외 출시된 제품 및 벤더사 비교 분석(DataDog 편)

Rum의 국내외 출시된 제품 및 벤더사 비교 분석(1) - DataDog 편

https://en.wikipedia.org/wiki/Datadog#/media/File:Datadog_logo.svg

 

 -  2번째 글 부터는 내가 직접, 간접적(세미나, 웨비나 등)으로 경험하거나 조사했던 RUM들중 인상 깊었던 순으로 작성 하려고 한다.  ( ※ ※ ※ 많은 도구들을 접한게 아니기 때문에 지극히 개인적인 사견이다. )

 - 이번 포스팅에선 DataDog의 주요 기능을 간략하게 살펴보려고한다.

 

※ 혹시 해당 글 부터 오신 분들은 왠만하면 개요글을 꼭 간단하게라도 살펴보길 권장한다.

2023.11.04 - [2. 웹개발/개발 주저리] - Front-End 모니터링 툴 Rum(Real User Mornitoring) 도입에 대한 고찰(1) - 개요(용어, 목적)

 

1) DataDog

 - 2023/05/29 Datadog 웨비나를 참석하여 간접 체험 할 수 있었다.
 ( 해당 시점 웨비나 참고 : https://www.youtube.com/watch?v=JjyKFEZG5Dw )

 - Sass 형태로 이용 가능하며, 세션당 비용 청구되는 구조이다.

 

 - 현재까지 경험 했던 RUM들중 기능적으로 가장 잘 다듬어 져있고 다채로워, 다양한 방법으로 인사이트를 도출해 낼 수 있어 보였다.

 

 1. 비용

 - https://www.datadoghq.com/pricing/?product=real-user-monitoring--session-replay#products

   └ 세션 리플레이, 히트맵 기능은 추가 비용이 발생한다.

   └ 1,000 세션당 1.5 or 1.8 달러의 비용이 발생한다.

   └ 위와 같은 요금체계로 인해 엄청난 비용발생을 경험하셨던 분들을 주변에서 찾아볼 수 있었으며, 물론 이때문에 비용 최적화에 대해 DataDog에서도 제공하지만 담당자들 입장에서도 고려해야할 부분이다.

 

   └ 무료 체험을 14일 동안 제공한다고 하는데 기업 Email을 입력할 것을 요구 한다. 

 

2. 초기 설정 화면 살펴보기

 - 어떤 Application Type이 제공되는지 확인 할 수 있다. 

 - 현 시점 기준 (20203년 11월) JS Base, 안드로이드, IOS, React Native, Flutter, Roku? 등에서 활용 가능한 것으로 보인다.

 - 내가 적용 검토할 환경은 React 이기 때문에 Web Base Testing을 진행할 것이기 때문에 "JS"를 선택 하면 될 것 이다.

 - 회사에서 사용할 Application Name을 지어 준후 "+ Create New RUM Application"클릭

 

 

 ▶ 적용 방법은 3가지 방식이 제공 된다.

 

참고 : https://docs.datadoghq.com/ko/real_user_monitoring/browser/

 

1) NPM (node package manager)

 - 이 방법은 최신 웹 애플리케이션에 권장된다.

 -  RUM Browser SDK는 나머지 프런트엔드 JavaScript 코드와 함께 패키지로 제공된다.

 -  페이지 로드 성능에는 영향을 미치지 않는다. 그러나 SDK가 초기화되기 전에 트리거된 오류, 리소스 및 사용자 작업을 놓칠 수 있다. => 즉 비동기 방식이라는 것 으로 보인다.

 - Datadog은 Browser Logs SDK와 일치하는 버전을 사용할 것을 권장한다.

 

2) CDN Async

 - 이 방법은 성능 목표가 있는 웹 애플리케이션에 권장된다.

 - RUM 브라우저 SDK는 CDN에서 비동기식으로 로드되므로 SDK 다운로드가 페이지 로드 성능에 영향을 미치지 않는다.

 SDK가 초기화되기 전에 트리거된 오류, 리소스 및 사용자 작업을 놓칠 수 있습니다.  => 즉 비동기 방식이라는 것 으로 보인다.

 

3) CDN Sync

 - 이 방법은 모든 RUM 이벤트를 수집하는 데 권장됩니다.

 - RUM 브라우저 SDK는 CDN에서 동기식으로 로드되므로 SDK가 먼저 로드되고 모든 오류, 리소스 및 사용자 작업을 수집한다. 이 방법은 페이지 로드 성능에 영향을 줄 수 있다.

 

 ▶  세션 및 Replay샘플링 비율 등을 설정 할 수 있다.

 - 초기 설정은 환경 설정을 통해 개발 환경(development) or 스테이징 환경(staging) or 배포 환경(production)에서 오류가 났는지 등을 알 수 있게 해주는 기능으로 보인다..

 

 ▶ 실제 설치완료 여부를 기다리고 있다.

 

 ▶ 설치가 완료 되면 다음과 같이 화면이 변경 된다. 

 

 2. 제공하는 기능 살펴보기

※ DtataDog은 RUM이외에도 통합 모니터링을 제공하는 UI이기떄문에 이번 리뷰엔 UX Monitoring(RUM + Synthetic Tets)의 기능을 대략적으로 살펴 보려고 한다.

 

1) 세션 리플레이 기능

 - 실제 고객의 화면에서의 동선이 녹화 되어 있다.

 

ex) 공식 DataDog 화면 예시

 

ex) 약 20% Session Replay 적용시 다음과 같이 수집 된다. 

 

ex) Session Replay 예시

 

2)  통계 및 트렌드 분석

 - 히트맵을 시각화 하여 제공해주어, 다양한 인사이트를 얻을 수 있다. (Bi로도 활용 가능하다고 한다)
   ( 실수로 클릭하는 부분 등의 정보를 획득 할 수 있다.)

 

ex) 내블로그의 LNB의경우 다음과 같이 Black Mode 전환 버튼의 클릭율이 높은 것을 볼 수 있다.

 - 다만 왼쪽의 Light모드도 사용율이 높은데,

아마 Black 모드에 최적화 되어 있지 않아(사실 예전에 쓴 글들은 블랙 모드에서 잘 안보이는것들이 있어 보인다.) Light 모드를 다시 클릭하는것으로 보여진다. 이러한 부분을 고려하여 Black Mode에 최적화 하는 방법을 고민해 보아야 할 것 같다.

 

3)  세션 탐색

 - 다른 Rum에서도 보통 많이 제공해주는 기능이다.

 - 특정 환경(Device Type, OS 등등) 필터 및 세션 목록을 확인 가능 하다.

ex) Filter 예시

 

ex) 세션 상세 탐색 예시

 - 쇼핑몰이었다면 얼마나 체류하였고, 몇번의 클릭횟수가 있었고, 특정 상품 탐색 이후 다른 상품 탐색 전환으로 이어졌다고 해석할 수 있지 않을까?

 

4)  성능 모니터링

ex) LCP : 1.01s, CLS : 0.04,  FID : 2.7ms 모든 기준에 충족 하였다.

 

ex) 에러 발생율이 12%정도로 보이니 이 부분

      즉, Error 발생 추적 및 개선 필요 할 것으로 해석 해 볼 수 있다.

 

5)  에러 추적

 - 어떤 에러가 발생하였는지 살펴볼 수 있다. 

 

 - SourceMap 업로드하여 소스코드 레벨로 확인할 수 있게 해주는 기능.

 - SourceMap Upload 기능을 제공하고 있으니 참고 하도록 한다.

( CI 파이프라인에 Datadog CLI로 명령어 수행을 통해 업로드 처리 하는 방식을 권장하고 있다. )

https://docs.datadoghq.com/ko/real_user_monitoring/guide/upload-javascript-source-maps/?tab=webpackjs

 

ex) 소스맵 업로드 전 / 후

 - sourceMap을 업로드하면 (3party library가 아닌경우로 가정) 해당 소스 라인 위치까지 파악 할 수 있다.

전	후

 

 

 - error에대한 Grouping기능

ex) 동일 오류, 에러에 대한 발생 빈도(Session수, Count수 등)

ex) DataDog 에서 기본적으로 제공해주는 Grouping 기능

ex) 해당 에러 그룹의 실제 오류 Session 탐색

 

 

6)  Synthetic Monitoring

 - 통합 모니터링, 테스트 기반의 도구도 제공하는데 이 부분은 웨비나 캡쳐로 예시를 대신 하려 한다.

ex)  자동화 테스트 도구(시나리오 기반 지원)도 제공해주고 있다.

ex) BOT 샘플링 차단을 통해 비용 최적화 하는 기능

 

 

ex) 웹뷰 + App에서의 에러까지도 통합하여 제공해준다고 한다.

 

 - 최대한 시간을 많이 들이지 않고 간단하게 기능을 살펴 보았다. 

 - 5~6개의 다른 Rum을 살펴본 이후 정말 좋은 기능에도 불구하고 놓친 기능이 있다면 추가하려고 한다.

 

 

7) 알림 설정

 - DataDog은 통합 모니터링을 제공하기 때문에 UX monitoring 메뉴가 아닌 별도의 Monitors메뉴에서 경고 알림 설정이 가능 하다.

 - Monitors > New Monitor 클릭 하여 신규 알람 설정을 해보자.

 

 - RUM관련 모니터링만 진행  해볼 예정이다.

 

 - 여러가지 다양한 설정이 있지만, 수집된 에러 세션 카운트 기준으로 경고 알람설정을 해보려고 한다.

 

 - 최근 4시간 기준으로 발생한 기준으로 Warning : 0.2, Alert : 1 기준 잡아 입력 하였다. 

 

 

 -  경고 문구 템플릿을 정의할 수 있는데, 우측 상단의 (Use Message Template Variables)를 클릭하면 사용할수 있는 템플릿 변수를 확인 할 수 있다.

 

 - 정상 동작 관련하여 테스트를 해본다.

 

 - "경고"만 테스트 해보도록 할 예정이다.

 

 - Run Test 클릭시 정상적으로 경고 메세지를 수신하는 것을 확인 할 수 있다.

 

 - 이상이 없으면 "Create" 를 클릭하여 완성 한다.

 

 - 이후 정상적으로 모니터링 메세지가 수신되는것을 확인 할 수 있다.

 

 - 상세 정보 및 이력도 확인 가능하다.

 

※ 개인적인 생각...

 - 개발자의 입장에서는 비용관련된 고민보다 최대한 유용햔 Tool을 도입하고자 하는 니즈가 클 것 이다.

 - 하지만 DataDog의 비용, 타 벤더사와의 유지보수의 경쟁력(국산 Software가 아니라는점(물론 DataDog Korea Office가 있지만)은 고려해야하는 중요 포인트 이지 않을까?

 - ( 잘 관리하기 나름이겠지만, 비용 먹는 하x가 될 수도 있다는 걱정 )많은 장점에도 불구하고 DataDog의 RUM의 기능만 도입하기엔 무리가 있다고 생각하게 되었다. 물론 컨설팅을 진행한 것은 아니고 개인적인 생각 이다.

 - 다만 현재까지 접한 RUM중 꽤나 발전되어, 가다듬어져 있는 것 같다.

 

 

※참고 - 무료 체험이 끝나게 되면 Upgrade 할 것을 권고 하는데 무료 플랜 사용도 가능 한 것으로 안내 하고 있다.

"Usage & Cost" : 그동안 사용했던 사용량을 알려주며 해당 사용량 기반으로 커스텀 하게 비용 구성을 할 수 있는 것으로 보인다.

 

 - 무료 사용 기간 연장 요청하는 창구도 뚫려 있다. 클릭하면 바로 요청이 날라간다. (영업쪽에서 연락올 것 같다 ㅠㅠ)

 

 

 - 또는 가장 하단에 다운 그레이드(Infrastructure 기능만 사용 가능)하여 무료 사용하는 방법도 선택 가능하다.

(다만 이번 포스팅에서는 RUM, UX Monitoring과 관련된 내용이기 떄문에 해당 연장요청으로는 Rum 사용을 연장 할 수 없다.)