브라우저 모니터링 클라이언트 측 설정

이 번역은 최신 버전이 아닙니다. 최신 영문 버전을 보려면 여기를 클릭하세요.

개요

Datadog 브라우저 SDK를 사용하면 웹 애플리케이션에 대해 Real User Monitoring(RUM)을 활성화하여 사용자 경험과 애플리케이션 성능에 대한 포괄적인 가시성을 확보할 수 있습니다. RUM을 사용하면 페이지 로드 시간, 사용자 상호작용, 리소스 로딩 및 애플리케이션 오류를 실시간으로 모니터링할 수 있습니다.

RUM의 주요 기능:

  • 페이지 로드, 사용자 작업 및 리소스 요청에 대한 상세 성능 메트릭을 통해 사용자 경험 모니터링
  • 세션 리플레이 기능을 통해 애플리케이션 내 사용자 여정 추적
  • 성능 병목 현상 식별 및 APM 트레이스와의 연계를 통한 프론트엔드/백엔드 성능의 상관관계 분석

브라우저 SDK는 최신 데스크톱 및 모바일 브라우저를 지원하며 주요 성능 메트릭, 사용자 상호작용 및 애플리케이션 오류를 자동으로 수집합니다. 설정이 완료되면 Datadog에서 애플리케이션별 RUM 구성을 관리하고, 대시보드 및 RUM Explorer에서 수집된 데이터를 시각화할 수 있습니다.

This page describes how to instrument your web applications with the Datadog Browser SDK. The Browser SDK supports Real User Monitoring (RUM), Error Tracking, Session Replay, and Product Analytics.

Select a setup method based on your application stack and workflow:

  • Manual client-side setup: Add the SDK directly to your frontend code when you need full control over initialization and configuration.
  • Agentic Onboarding: Use an AI-assisted workflow to automatically configure and deploy the SDK with minimal manual steps.
  • Server-side auto-instrumentation (RUM only): Inject the SDK through your web server or proxy when you cannot modify frontend code directly.

The Browser SDK supports all modern desktop and mobile browsers.

Setup

Create the application in the UI

  1. In Datadog, navigate to Digital Experience > Add an Application and select the JavaScript (JS) application type.
  2. Enter a name for your application, then click Create Application. This generates a clientToken and an applicationId for your application.

Install the Browser SDK

Choose the installation method for the Browser SDK.

    Installing through Node Package Manager (npm) registry is recommended for modern web applications. The Browser SDK is packaged with the rest of your frontend JavaScript code. It has no impact on page load performance. However, the SDK may miss errors, resources, and user actions triggered before the SDK is initialized. Datadog recommends using a matching version with the Browser Logs SDK.

    Add @datadog/browser-rum to your package.json file, for example if you use npm cli:

    npm install --save @datadog/browser-rum

    Installing through CDN async is recommended for web applications with performance targets. The Browser SDK loads from Datadog's CDN asynchronously, ensuring the SDK download does not impact page load performance. However, the SDK may miss errors, resources, and user actions triggered before the SDK is initialized.

    Add the generated code snippet to the head tag of every HTML page you want to monitor in your application.

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/eu/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/ap1/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/ap2/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us3/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us5/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/uk1/v7/datadog-rum.js','DD_RUM')
</script>

    <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,d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum-v7.js','DD_RUM')
</script>

    Installing through CDN sync is recommended for collecting all events. The Browser SDK loads from Datadog's CDN synchronously, ensuring the SDK loads first and collects all errors, resources, and user actions. This method may impact page load performance.

    Add the generated code snippet to the head tag (in front of any other script tags) of every HTML page you want to monitor in your application. Placing the script tag higher and loading it synchronously ensures Datadog RUM can collect all performance data and errors.

    <script
    src="https://www.datadoghq-browser-agent.com/us1/v7/datadog-rum.js"
    type="text/javascript"
    crossorigin>
</script>

    <script
    src="https://www.datadoghq-browser-agent.com/eu/v7/datadog-rum.js"
    type="text/javascript"
    crossorigin>
</script>

    <script
    src="https://www.datadoghq-browser-agent.com/ap1/v7/datadog-rum.js"
    type="text/javascript"
    crossorigin>
</script>

    <script
    src="https://www.datadoghq-browser-agent.com/ap2/v7/datadog-rum.js"
    type="text/javascript"
    crossorigin>
</script>

    <script
    src="https://www.datadoghq-browser-agent.com/us3/v7/datadog-rum.js"
    type="text/javascript"
    crossorigin>
</script>

    <script
    src="https://www.datadoghq-browser-agent.com/us5/v7/datadog-rum.js"
    type="text/javascript"
    crossorigin>
</script>

    <script
    src="https://www.datadoghq-browser-agent.com/uk1/v7/datadog-rum.js"
    type="text/javascript"
    crossorigin>
</script>

    <script
    src="https://www.datadoghq-browser-agent.com/datadog-rum-v7.js"
    type="text/javascript">
</script>

    Initialize the Browser SDK

    The SDK should be initialized as early as possible in the app lifecycle. This ensures all measurements are captured correctly.

    In the initialization snippet, set an environment name, service name, and client token. See the full list of initialization parameters.

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

datadogRum.init({
   applicationId: '<APP_ID>',
   clientToken: '<CLIENT_TOKEN>',
   // `site` refers to the Datadog site parameter of your organization
   // see https://docs.datadoghq.com/getting_started/site/
   site: '<DATADOG_SITE>',
  //  service: 'my-web-application',
  //  env: 'production',
  //  version: '1.0.0',
});

      Types are compatible with TypeScript >= 3.8.2. For earlier versions of TypeScript, import JavaScript sources and use global variables to avoid any compilation issues.

      import '@datadog/browser-rum/bundle/datadog-rum'

window.DD_RUM.init({
  ...
})

      <script>
  window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APP_ID>',
      // `site` refers to the Datadog site parameter of your organization
      // see https://docs.datadoghq.com/getting_started/site/
      site: '<DATADOG_SITE>',
      //  service: 'my-web-application',
      //  env: 'production',
      //  version: '1.0.0',
    });
  })
</script>

      <script>
    window.DD_RUM && window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APP_ID>',
      // `site` refers to the Datadog site parameter of your organization
      // see https://docs.datadoghq.com/getting_started/site/
      site: '<DATADOG_SITE>',
      //  service: 'my-web-application',
      //  env: 'production',
      //  version: '1.0.0',

    });
</script>

      Configure tracking consent (GDPR compliance)

      To be compliant with GDPR, CCPA, and similar regulations, the Browser SDK lets you provide the tracking consent value at initialization.

      Configure Content Security Policy (CSP)

      If you're using the Datadog Content Security Policy (CSP) integration on your site, see the CSP documentation for additional setup steps.

      Use the Agentic Onboarding page to instrument your browser application using the AI Setup CLI or the Datadog MCP Server.

      RUM Auto-Instrumentation is not available for the selected site (). Use Client-Side instrumentation instead.

      Server-side auto-instrumentation only supports RUM. For Error Tracking, Session Replay, or Product Analytics, use manual client-side setup.

      RUM Auto-Instrumentation allows you to add RUM JS to your web app HTML. It works by injecting the RUM Browser SDK into the HTML responses being served through a web server or proxy. After auto-instrumentation is set up, you can manage configurations from the UI.

      RUM Auto-Instrumentation requires Datadog Agent version 7.34+.

      Getting started

      Select a platform to start collecting RUM data on your application:

      To request support for a web server that is not listed here, fill out this form.

      Java Servlet
      NGINX
      Windows IIS
      Apache HTTP Server
      IBM HTTP Server

      Limitations

      Server-side auto-instrumentation has the following limitations. If your use case requires more control, use client-side instrumentation instead.

      • This instrumentation method does not support advanced RUM configurations.
      • If your web server is acting as a proxy and the upstream server uses end-to-end encryption (TLS) or content compression (gzip, zstd, Brotli), the RUM Browser SDK cannot be injected. For proper instrumentation:
        • Disable content compression on the upstream server.
        • Enable TLS origination on the web server.

      Start monitoring

      Visualize the data collected in dashboards or create a search query in the RUM Explorer.

      Your application appears as pending on the Applications page until Datadog starts receiving data. If data takes time to appear, see Troubleshooting Browser SDK Issues.

      세션 샘플링 비율 설정

      애플리케이션이 Datadog RUM으로 전송하는 데이터 양을 제어하기 위해 브라우저 SDK 초기화 시 RUM 세션의 샘플링 비율을 지정할 수 있습니다. 예를 들어, 세션의 80%를 샘플링하려면 sessionSampleRate를 80으로 설정합니다.

      datadogRum.init({
  applicationId: '<APP_ID>',
  clientToken: '<CLIENT_TOKEN>',
  site: '<DATADOG_SITE>',
  sessionSampleRate: 80,
  sessionReplaySampleRate: 20,
  // ... other configuration options
});

      자세한 내용은 브라우저 RUM & 세션 리플레이 샘플링을 참조하세요.

      애플리케이션 모니터링 시작

      RUM의 기본 설정을 완료했으므로, 애플리케이션이 브라우저 오류를 수집하고 실시간으로 문제 모니터링과 디버깅을 시작할 수 있습니다.

      대시보드에서 수집된 데이터를 시각화하거나 RUM Explorer에서 검색 쿼리를 생성합니다.

      Datadog이 데이터 수신을 시작할 때까지 애플리케이션은 Applications 페이지에 pending으로 표시됩니다.

      다음 단계

      고급 구성을 참조하세요.

      Further reading

      추가 유용한 문서, 링크 및 기사: