콘텐츠로 이동

JavaScript¶

JavaScript는 RUM(실사용자 모니터링) 범주에 속하며, 주로 브라우저 사용자의 접근 행위를 감지해 Guance로 전송하는 데 사용됩니다.

구성¶

DataKit에서 RUM 수집기 활성화¶

RUM 수집기 활성화

웹 애플리케이션 연동¶

웹 애플리케이션 연동 방법은 NPM 연동, 동기 로드, 비동기 로드의 세 가지입니다.

연동 방식	소개
NPM	SDK 코드를 프런트엔드 프로젝트에 함께 번들링하는 방식입니다. 이 방식은 프런트엔드 페이지 성능에 어떠한 영향도 주지 않지만, SDK 초기화 이전의 요청과 오류 수집은 놓칠 수 있습니다.
CDN 비동기 로드	CDN 가속 캐시를 통해 비동기 스크립트로 SDK 스크립트를 불러오는 방식입니다. 이 방식은 SDK 스크립트 다운로드가 페이지 로딩 성능에 영향을 주지 않지만, SDK 초기화 이전의 요청과 오류 수집은 놓칠 수 있습니다.
CDN 동기 로드	CDN 가속 캐시를 통해 동기 스크립트로 SDK 스크립트를 불러오는 방식입니다. 이 방식은 모든 오류, 리소스, 요청, 성능 지표를 수집할 수 있지만, 페이지 로딩 성능에 영향을 줄 수 있습니다.

NPMCDN 비동기 로드CDN 동기 로드

import { datafluxRum } from '@cloudcare/browser-rum'

datafluxRum.init({
  applicationId: 'demo-app',
  datakitOrigin: '<DATAKIT ORIGIN>', // 프로토콜(// 포함), 도메인명(또는 IP 주소)[및 포트 번호]
  env: 'production',
  version: '1.0.0',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 70,
  trackInteractions: true,
  traceType: 'ddtrace', // 필수 아님, 기본값은 ddtrace이며 현재 ddtrace, zipkin, skywalking_v-jaeger, zipkin_single_header, w3c_traceparent 6가지 유형을 지원합니다
  allowedTracingOrigins: ['https://api.example.com', /https:\/\/.*\.my-api-domain\.com/],  // 필수 아님, trace 수집기에 필요한 header 헤더를 주입할 모든 요청 목록입니다. 요청의 origin이 될 수도 있고 정규식일 수도 있습니다
})

<script>
 (function (h, o, u, n, d) {
    h = h[d] = h[d] || {
      q: [],
      onReady: function (c) {
        h.q.push(c)
      }
    }
    d = o.createElement(u)
    d.async = 1
    d.src = n
    n = o.getElementsByTagName(u)[0]
    n.parentNode.insertBefore(d, n)
  })(
    window,
    document,
    'script',
    'https://static.guance.com/browser-sdk/v3/dataflux-rum.js',
    'DATAFLUX_RUM'
  )
  DATAFLUX_RUM.onReady(function () {
    DATAFLUX_RUM.init({
      applicationId: 'demo-app',
      datakitOrigin: '<DATAKIT ORIGIN>', // 프로토콜(// 포함), 도메인명(또는 IP 주소)[및 포트 번호]
      env: 'production',
      version: '1.0.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 70,
      trackInteractions: true,
      traceType: 'ddtrace', // 필수 아님, 기본값은 ddtrace이며 현재 ddtrace, zipkin, skywalking_v-jaeger, zipkin_single_header, w3c_traceparent 6가지 유형을 지원합니다
      allowedTracingOrigins: ['https://api.example.com', /https:\/\/.*\.my-api-domain\.com/],  // 필수 아님, trace 수집기에 필요한 header 헤더를 주입할 모든 요청 목록입니다. 요청의 origin이 될 수도 있고 정규식일 수도 있습니다
    })
  })
</script>

<script src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js" type="text/javascript"></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: 'demo-app',
      datakitOrigin: '<DATAKIT ORIGIN>', //프로토콜(// 포함), 도메인명(또는 IP 주소)[및 포트 번호]
      env: 'production',
      version: '1.0.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 70,
      trackInteractions: true,
      traceType: 'ddtrace', //필수 아님, 기본값은 ddtrace이며 현재 ddtrace, zipkin, skywalking_v-jaeger, zipkin_single_header, w3c_traceparent 6가지 유형을 지원합니다
      allowedTracingOrigins: ['https://api.example.com', /https:\/\/.*\.my-api-domain\.com/],  //필수 아님, trace 수집기에 필요한 header 헤더를 주입할 모든 요청 목록입니다. 요청의 origin이 될 수도 있고 정규식일 수도 있습니다
    })
</script>

매개변수 설정¶

JavaScript는 Web 모니터링의 개별화된 설정을 구현하기 위한 다양한 매개변수를 제공합니다.