브라우저 로그 수집하기

브라우저 로그 SDK를 사용해 웹 브라우저 페이지에서 Datadog으로 로그를 보냅니다.

브라우저 로그 SDK를 사용하면 웹 브라우저 페이지에서 직접 Datadog으로 로그를 보낼 수 있고, 다음과 같은 기능을 활용할 수 있습니다.

  • SDK를 로거로 사용. 모든 항목이 Datadog에 JSON 문서로 전달됩니다.
  • 전송한 각 로그에 context 및 추가 사용자 지정 속성 추가
  • 모든 프런트엔드 오류를 자동으로 래핑 및 전달
  • 프런트엔드 오류 전달
  • 실제 클라이언트 IP 주소 및 사용자 에이전트 기록
  • 자동 일괄 포스트를 사용해 네트워크 사용량 최적화
  • Worker 및 Service Worker 환경에서 사용

참고:

  • RUM SDK와 무관: 브라우저 로그 SDK는 RUM SDK 없이 사용할 수 있습니다.
  • Worker 환경: 브라우저 로그 SDK는 Worker 및 Service Worker 환경에서 같은 설정 방법을 사용하여 작동합니다. 하지만 Worker 환경에서 보낸 로그에는 세션 정보가 자동으로 포함되지 않습니다.
  • WebAssembly 오류: 브라우저 로그에서 WASM 프레임을 심볼화하려면 Browser SDK WASM 플러그인을 구성하고 모듈의 디버그 심볼을 업로드하세요.

설정

1단계 - 클라이언트 토큰 생성

Datadog에서 Organization Settings > New Client Tokens로 이동하세요.

지원되는 환경: 브라우저 로그 SDK는 모든 최신 데스크톱 및 모바일 브라우저, 그리고 Worker 및 Service Worker 환경을 지원합니다. 브라우저 지원 표를 참조하세요.

보안상의 이유로, 브라우저 로그 SDK를 구성하는 데 API 키를 사용할 수는 없습니다. 해당 키가 JavaScript 코드의 클라이언트 측에 노출되기 때문입니다. 웹 브라우저에서 로그를 수집하려면 반드시 클라이언트 토큰을 사용해야 합니다.

2단계 - 로그 브라우저 SDK 설치

브라우저 SDK의 설치 방법을 선택하세요.

    최신 웹 애플리케이션의 경우, Datadog에서는 노드 패키지 관리자(npm)를 통해 설치하는 편을 권장합니다. 브라우저 SDK는 나머지 프런트엔드 JavaScript 코드로 패키징됩니다. 페이지 로드 성능에는 아무런 영향이 없습니다. 하지만 SDK가 해당 SDK를 초기화하기 전에 발생하는 오류 또는 콘솔 로그를 캡처하지 않을 가능성이 있습니다. Datadog에서는 브라우저 로그 SDK와 일치하는 버전을 사용하도록 권장합니다.

    @datadog/browser-logs를 package.json 파일에 추가하세요. 예를 들어, npm cli를 사용하는 경우입니다.

    성능 목표가 있는 웹 애플리케이션은 CDN async를 통해 설치해야 합니다. 브라우저 SDK는 Datadog의 CDN에서 비동기식으로 로드되어 페이지 로드 성능에 영향을 미치지 않습니다. 하지만 SDK가 해당 SDK를 초기화하기 전에 발생하는 오류 또는 콘솔 로그를 캡처하지 않을 가능성이 있습니다.

    애플리케이션에서 모니터링하려는 모든 HTML 페이지의 헤드 태그에 생성된 코드 스니펫을 추가합니다.

    <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-logs.js','DD_LOGS')
</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/eu1/v7/datadog-logs.js','DD_LOGS')
</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-logs.js','DD_LOGS')
</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-logs.js','DD_LOGS')
</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-logs.js','DD_LOGS')
</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-logs.js','DD_LOGS')
</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-logs.js','DD_LOGS')
</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-logs-v7.js','DD_LOGS')
</script>

    모든 이벤트를 수집하려면 CDN sync를 통해 설치해야 합니다. 브라우저 SDK가 Datadog의 CDN에서 동기식으로 로드되어 SDK가 먼저 로드되고 모든 오류, 리소스와 사용자 액션을 수집합니다. 이 방법은 페이지 로드 성능에 영향을 미칠 수 있습니다.

    애플리케이션에서 모니터링하려는 모든 HTML 페이지의 헤드 태그(다른 모든 스크립트 태그 앞)에 생성된 코드 스니펫을 추가합니다. 스크립트 태그를 더 높이 배치하고 동기식으로 로드하면 Datadog RUM이 모든 성능 데이터와 오류를 수집할 수 있습니다.

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


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


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


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


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


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


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


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

    3단계 - 로그 브라우저 SDK 초기화

    SDK는 앱 수명 주기에서 최대한 일찍 초기화되어야 합니다. 이렇게 해야 모든 로그가 정확하게 캡처됩니다.

    초기화 스니펫에서 클라이언트 토큰과 사이트를 설정합니다. 초기화 파라미터의 전체 목록을 참조하세요.

      import { datadogLogs } from '@datadog/browser-logs';

datadogLogs.init({
  clientToken: '<CLIENT_TOKEN>',
  // `site` refers to the Datadog site parameter of your organization
  // see https://docs.datadoghq.com/getting_started/site/
  site: '<DATADOG_SITE>',
  forwardErrorsToLogs: true,
  sessionSampleRate: 100,
});

      <script>
  window.DD_LOGS.onReady(function() {
    window.DD_LOGS.init({
      clientToken: '<CLIENT_TOKEN>',
      // `site` refers to the Datadog site parameter of your organization
      // see https://docs.datadoghq.com/getting_started/site/
      site: '<DATADOG_SITE>',
      forwardErrorsToLogs: true,
      sessionSampleRate: 100,
    });
  })
</script>

      <script>
    window.DD_LOGS && window.DD_LOGS.init({
      clientToken: '<CLIENT_TOKEN>',
      // `site` refers to the Datadog site parameter of your organization
      // see https://docs.datadoghq.com/getting_started/site/
      site: '<DATADOG_SITE>',
      forwardErrorsToLogs: true,
      sessionSampleRate: 100,
    });
</script>

      RUM 브라우저 SDK는 GDPR, CCPA 및 유사한 규정을 준수하기 위해 초기화 시 추적 동의 값을 제공하게 해줍니다.

      콘텐츠 보안 정책(CSP) 구성

      사이트에서 Datadog 콘텐츠 보안 정책(CSP) 통합을 사용하는 경우, 추가적인 설정 단계를 CSP 설명서에서 참조하세요.

      4단계 - 데이터 시각화

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

      Log Explorer에서 로그를 시각화하세요.

      사용 방법

      사용자 지정 로그

      Datadog 브라우저 로그 SDK가 초기화된 후 API를 사용해 사용자 지정 로그 항목을 Datadog에 직접 전송하세요.

      logger.debug | info | warn | error (message: string, messageContext?: Context, error?: Error)

        import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.logger.info('Button clicked', { name: 'buttonName', id: 123 })

        window.DD_LOGS.onReady(function () {
  window.DD_LOGS.logger.info('Button clicked', { name: 'buttonName', id: 123 })
})

        참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

        window.DD_LOGS && window.DD_LOGS.logger.info('Button clicked', { name: 'buttonName', id: 123 })

        참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

        결과

        NPM, CDN async 또는 CDN sync 사용 시 결과는 모두 같습니다.

        {
  "status": "info",
  "session_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "name": "buttonName",
  "id": 123,
  "message": "Button clicked",
  "date": 1234567890000,
  "origin": "logger",
  "http": {
    "useragent": "Mozilla/5.0 ...",
  },
  "view": {
    "url": "https://...",
    "referrer": "https://...",
  },
  "network": {
    "client": {
      "geoip": {...}
      "ip": "xxx.xxx.xxx.xxx"
    }
  }
}

        로그 SDK가 기본적으로 다음 정보를 추가합니다(RUM SDK가 있는 경우 더 많은 필드가 추가될 수 있음).

        • date
        • view.url
        • view.referrer
        • session_id(세션이 사용된 경우에만)

        Datadog 백엔드는 다음과 같은 더 많은 필드를 추가합니다.

        • http.useragent
        • network.client.ip

        오류 추적

        Datadog 브라우저 로그 SDK를 사용하면 선택 사항인 error 파라미터(SDK v4.36.0 이상에서 사용 가능)를 사용하여 수동으로 오류를 추적할 수 있습니다. JavaScript 오류의 인스턴스가 제공된 경우, SDK가 해당 오류에서 관련 정보(종류, 메시지, 스택 트레이스)를 추출합니다.

        logger.{debug|info|warn|error}(message: string, messageContext?: Context, error?: Error)

          import { datadogLogs } from '@datadog/browser-logs'

try {
  ...
  throw new Error('Wrong behavior')
  ...
} catch (ex) {
  datadogLogs.logger.error('Error occurred', {}, ex)
}

          try {
  ...
  throw new Error('Wrong behavior')
  ...
} catch (ex) {
  window.DD_LOGS.onReady(function () {
    window.DD_LOGS.logger.error('Error occurred', {}, ex)
  })
}

          참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

          try {
  ...
  throw new Error('Wrong behavior')
  ...
} catch (ex) {
    window.DD_LOGS && window.DD_LOGS.logger.error('Error occurred', {}, ex)
}

          참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

          결과

          NPM, CDN async 또는 CDN sync 사용 시 결과는 모두 같습니다.

          {
  "status": "error",
  "session_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "message": "Error occurred",
  "date": 1234567890000,
  "origin": "logger",
  "error" : {
    "message": "Wrong behavior",
    "kind" : "Error",
    "stack" : "Error: Wrong behavior at <anonymous> @ <anonymous>:1:1"
  },
  ...
}

          WebAssembly 오류

          WebAssembly(WASM) 스택 프레임을 심볼화하려면 Browser SDK WASM 플러그인을 설치하세요. 플러그인과 Browser Logs SDK의 버전을 동일하게 사용하세요.

          npm install --save-exact \
  @datadog/browser-logs@<VERSION> \
  @datadog/browser-plugin-wasm@<VERSION>

          Browser Logs를 초기화할 때 플러그인을 등록하세요.

          import { datadogLogs } from '@datadog/browser-logs';
import { makeWasmPlugin } from '@datadog/browser-plugin-wasm';

datadogLogs.init({
  // ...
  forwardErrorsToLogs: true,
  plugins: [makeWasmPlugin()],
});

          WASM 모듈을 로드하기 전에 Browser Logs를 초기화하세요. 플러그인은 브라우저의 WebAssembly API로 생성된 모듈을 관찰하고, WASM 스택 프레임이 포함된 오류에 해당 URL 및 빌드 ID를 추가합니다.

          처리되지 않은 WASM 오류를 자동으로 전달하려면 forwardErrorsToLogs를 true로 설정하세요. 처리된 WASM 오류를 로깅할 때 오류 추적에 표시된 대로 Error 객체를 logger.error()의 세 번째 인수로 전달하세요.

          그런 다음 WebAssembly 심볼을 업로드하여 오류를 심볼화하세요.

          일반 로거 함수

          Datadog 브라우저 로그 SDK는 편의상 로거에 약식 함수(.debug, .info, .warn, .error)를 추가합니다. 일반 로거 함수도 사용할 수 있으며, 이 경우 status 파라미터가 노출됩니다.

          log(message: string, messageContext?: Context, status? = 'debug' | 'info' | 'warn' | 'error', error?: Error)

            import { datadogLogs } from '@datadog/browser-logs';

datadogLogs.logger.log(<MESSAGE>,<JSON_ATTRIBUTES>,<STATUS>,<ERROR>);

            window.DD_LOGS.onReady(function() {
  window.DD_LOGS.logger.log(<MESSAGE>,<JSON_ATTRIBUTES>,<STATUS>,<ERROR>);
})

            참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

            window.DD_LOGS && window.DD_LOGS.logger.log(<MESSAGE>,<JSON_ATTRIBUTES>,<STATUS>,<ERROR>);

            참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

            자리표시자

            위 예시의 자리표시자는 아래에 설명되어 있습니다.

            자리표시자설명
            <MESSAGE>Datadog이 전체 인덱싱한 로그의 메시지입니다.
            <JSON_ATTRIBUTES>유효한 JSON 개체이며, <MESSAGE>에 연결된 모든 속성을 포함합니다.
            <STATUS>로그의 상태. 허용되는 상태 값은 debug, info, warn 또는 error입니다.
            <ERROR>JavaScript 오류 개체의 인스턴스입니다.

            고급 사용

            브라우저 로그에서 민감한 데이터 스크러빙

            브라우저 로그에 삭제해야 하는 민감한 정보가 포함되어 있다면 Browser Log Collector를 초기화할 때 beforeSend 콜백을 사용해 민감한 시퀀스를 스크러빙하도록 Browser SDK를 구성하세요.

            beforeSend 콜백 함수는 두 가지 인수인 log 이벤트 및 context로 호출할 수 있습니다. 이 함수를 사용하면 Datadog으로 전송되기 전에 브라우저 SDK가 수집한 각 로그에 액세스할 수 있으며, 컨텍스트를 사용해 로그 속성을 조정할 수 있습니다. 컨텍스트에는 이벤트와 관련되지만, 이벤트에 꼭 포함되는 것은 아닌 추가 정보가 포함됩니다. 일반적으로 이 정보를 사용해 이벤트를 강화하거나 폐기할 수 있습니다.

            function beforeSend(log, context)

            가능한 context 값은 다음과 같습니다.

            값데이터 유형사용 사례
            isAborted불리언네트워크 로그 이벤트에서 이 속성은 실패한 요청이 애플리케이션에 의해 중단되었는지를 알려줍니다. 이 경우, 해당 전송이 의도적으로 중단될 수 있기 때문에 이 이벤트 전송을 다시 고려해봐야 할 수 있습니다.
            handlingStackString로그 이벤트가 처리된 스택 트레이스입니다. 이것을 사용해 로그를 어느 마이크로프런트엔드에서 보냈는지 확인할 수 있습니다.

            웹 애플리케이션 URL에서 이메일 주소를 삭제하는 방법은 다음과 같습니다.

              import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.init({
    ...,
    beforeSend: (log) => {
        // remove email from view url
        log.view.url = log.view.url.replace(/email=[^&]*/, "email=REDACTED")
    },
    ...
});

              window.DD_LOGS.onReady(function() {
    window.DD_LOGS.init({
        ...,
        beforeSend: (log) => {
            // remove email from view url
            log.view.url = log.view.url.replace(/email=[^&]*/, "email=REDACTED")
        },
        ...
    })
})

              참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

              window.DD_LOGS &&
    window.DD_LOGS.init({
        ...,
        beforeSend: (log) => {
            // remove email from view url
            log.view.url = log.view.url.replace(/email=[^&]*/, "email=REDACTED")
        },
        ...
    });

              참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

              다음 속성은 SDK가 자동으로 수집하며, 민감한 데이터를 포함할 수 있습니다.

              속성유형설명
              view.urlString활성 웹 페이지의 URL입니다.
              view.referrerString현재 요청된 페이지로 연결된 링크가 포함되어 있던 이전 웹 페이지의 URL입니다.
              messageString로그의 내용입니다.
              error.stackString오류에 대한 스택 트레이스 또는 보완 정보입니다.
              http.urlStringHTTP URL입니다.

              특정 로그 삭제

              beforeSend 콜백 함수를 사용하면 로그를 Datadog으로 보내기 전에 삭제할 수도 있습니다.

              네트워크 오류의 상태가 404인 경우 해당 오류를 삭제하는 방법은 다음과 같습니다.

                import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.init({
    ...,
    beforeSend: (log) => {
        // discard 404 network errors
        if (log.http && log.http.status_code === 404) {
          return false
        }
    },
    ...
});

                window.DD_LOGS.onReady(function() {
    window.DD_LOGS.init({
        ...,
        beforeSend: (log) => {
          // discard 404 network errors
          if (log.http && log.http.status_code === 404) {
            return false
          }
        },
        ...
    })
})

                참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

                window.DD_LOGS &&
    window.DD_LOGS.init({
        ...,
        beforeSend: (log) => {
          // discard 404 network errors
          if (log.http && log.http.status_code === 404) {
            return false
          }
        },
        ...
    });

                참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

                여러 로거 정의

                Datadog 브라우저 로그 SDK에는 기본 로거가 포함되지만, 다른 로거를 정의할 수도 있습니다.

                새 로거 생성

                Datadog 브라우저 로그 SDK가 초기화되고 나서, API createLogger를 사용해 새 로거를 정의하세요.

                createLogger (name: string, conf?: {
    level?: 'debug' | 'info' | 'warn' | 'error',
    handler?: 'http' | 'console' | 'silent',
    context?: Context
})

                참고: 이러한 파라미터는 setLevel, setHandler 및 setContext API로 설정할 수 있습니다.

                사용자 지정 로거 가져오기

                로거를 생성하고 나서, 다음 API를 사용해 JavaScript 코드의 아무 부분에서나 액세스하세요.

                getLogger(name: string)

                  예를 들어, 다른 모든 로거와 함께 정의된 signupLogger가 있다고 가정합니다.

                  import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.createLogger('signupLogger', {
  level: 'info',
  handler: 'http',
  context: { env: 'staging' }
})

                  그러면 코드의 다른 부분에서 다음과 같이 사용할 수 있습니다.

                  import { datadogLogs } from '@datadog/browser-logs'

const signupLogger = datadogLogs.getLogger('signupLogger')
signupLogger.info('Test sign up completed')

                  예를 들어, 다른 모든 로거와 함께 정의된 signupLogger가 있다고 가정합니다.

                  window.DD_LOGS.onReady(function () {
  const signupLogger = window.DD_LOGS.createLogger('signupLogger', {
    level: 'info',
    handler: 'http',
    context: { env: 'staging' }
  })
})

                  그러면 코드의 다른 부분에서 다음과 같이 사용할 수 있습니다.

                  window.DD_LOGS.onReady(function () {
  const signupLogger = window.DD_LOGS.getLogger('signupLogger')
  signupLogger.info('Test sign up completed')
})

                  참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

                  예를 들어, 다른 모든 로거와 함께 정의된 signupLogger가 있다고 가정합니다.

                  if (window.DD_LOGS) {
  const signupLogger = window.DD_LOGS.createLogger('signupLogger', {
    level: 'info',
    handler: 'http',
    context: { env: 'staging' }
  })
}

                  그러면 코드의 다른 부분에서 다음과 같이 사용할 수 있습니다.

                  if (window.DD_LOGS) {
  const signupLogger = window.DD_LOGS.getLogger('signupLogger')
  signupLogger.info('Test sign up completed')
}

                  참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

                  컨텍스트 덮어쓰기

                  전역 컨텍스트

                  Datadog 브라우저 로그 SDK가 초기화되고 나면 다음 작업을 수행할 수 있습니다.

                  • setGlobalContext (context: object) API를 사용해 모든 로거에 대한 전체 컨텍스트 설정
                  • setGlobalContextProperty (key: string, value: any) API를 사용해 모든 로거에 컨텍스트 추가
                  • getGlobalContext () API를 사용해 전체 글로벌 컨텍스트 가져오기
                  • removeGlobalContextProperty (key: string) API를 사용해 컨텍스트 속성 제거
                  • clearGlobalContext () API를 사용해 기존 컨텍스트 속성 모두 제거

                  로그 브라우저 SDK v4.17.0에서는 여러 API 이름이 다음과 같이 업데이트되었습니다.

                  getLoggerGlobalContext 대신 > - getGlobalContext setLoggerGlobalContext 대신 > - setGlobalContext addLoggerGlobalContext 대신 > - setGlobalContextProperty removeLoggerGlobalContext 대신 > - removeGlobalContextProperty

                    NPM의 경우, 다음을 사용하세요.

                    import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.setGlobalContext({ env: 'staging' })

datadogLogs.setGlobalContextProperty('referrer', document.referrer)

datadogLogs.getGlobalContext() // => {env: 'staging', referrer: ...}

datadogLogs.removeGlobalContextProperty('referrer')

datadogLogs.getGlobalContext() // => {env: 'staging'}

datadogLogs.clearGlobalContext()

datadogLogs.getGlobalContext() // => {}

                    CDN async의 경우, 다음을 사용하세요.

                    window.DD_LOGS.onReady(function () {
  window.DD_LOGS.setGlobalContext({ env: 'staging' })
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.setGlobalContextProperty('referrer', document.referrer)
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getGlobalContext() // => {env: 'staging', referrer: ...}
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.removeGlobalContextProperty('referrer')
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getGlobalContext() // => {env: 'staging'}
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.clearGlobalContext()
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getGlobalContext() // => {}
})

                    참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

                    CDN sync의 경우, 다음을 사용하세요.

                    window.DD_LOGS && window.DD_LOGS.setGlobalContext({ env: 'staging' })

window.DD_LOGS && window.DD_LOGS.setGlobalContextProperty('referrer', document.referrer)

window.DD_LOGS && window.DD_LOGS.getGlobalContext() // => {env: 'staging', referrer: ...}

window.DD_LOGS && window.DD_LOGS.removeGlobalContextProperty('referrer')

window.DD_LOGS && window.DD_LOGS.getGlobalContext() // => {env: 'staging'}

window.DD_LOGS && window.DD_LOGS.clearGlobalContext()

window.DD_LOGS && window.DD_LOGS.getGlobalContext() // => {}

                    참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

                    사용자 컨텍스트

                    Datadog 로그 SDK는 User를 생성된 로그와 연결하는 편리한 함수를 제공합니다.

                    • setUser (newUser: User) API를 사용해 모든 로거에 대한 사용자 설정
                    • setUserProperty (key: string, value: any) API를 사용해 모든 로거에 사용자 속성 추가 또는 수정
                    • getUser () API를 사용해 현재 저장된 사용자 가져오기
                    • removeUserProperty (key: string) API를 사용해 사용자 속성 제거
                    • clearUser () API를 사용해 기존 사용자 속성 모두 제거

                    참고: 사용자 컨텍스트가 글로벌 컨텍스트 전에 적용됩니다. 따라서 글로벌 컨텍스트에 포함된 모든 사용자 속성이 로그 생성 시 사용자 컨텍스트를 재정의하게 됩니다.

                      NPM의 경우, 다음을 사용하세요.

                      import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.setUser({ id: '1234', name: 'John Doe', email: 'john@doe.com' })
datadogLogs.setUserProperty('type', 'customer')
datadogLogs.getUser() // => {id: '1234', name: 'John Doe', email: 'john@doe.com', type: 'customer'}

datadogLogs.removeUserProperty('type')
datadogLogs.getUser() // => {id: '1234', name: 'John Doe', email: 'john@doe.com'}

datadogLogs.clearUser()
datadogLogs.getUser() // => {}

                      CDN async의 경우, 다음을 사용하세요.

                      window.DD_LOGS.onReady(function () {
  window.DD_LOGS.setUser({ id: '1234', name: 'John Doe', email: 'john@doe.com' })
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.setUserProperty('type', 'customer')
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getUser() // => {id: '1234', name: 'John Doe', email: 'john@doe.com', type: 'customer'}
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.removeUserProperty('type')
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getUser() // => {id: '1234', name: 'John Doe', email: 'john@doe.com'}
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.clearUser()
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getUser() // => {}
})

                      참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

                      CDN sync의 경우, 다음을 사용하세요.

                      window.DD_LOGS && window.DD_LOGS.setUser({ id: '1234', name: 'John Doe', email: 'john@doe.com' })

window.DD_LOGS && window.DD_LOGS.setUserProperty('type', 'customer')

window.DD_LOGS && window.DD_LOGS.getUser() // => {id: '1234', name: 'John Doe', email: 'john@doe.com', type: 'customer'}

window.DD_LOGS && window.DD_LOGS.removeUserProperty('type')

window.DD_LOGS && window.DD_LOGS.getUser() // => {id: '1234', name: 'John Doe', email: 'john@doe.com'}

window.DD_LOGS && window.DD_LOGS.clearUser()

window.DD_LOGS && window.DD_LOGS.getUser() // => {}

                      참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

                      계정 컨텍스트

                      Datadog 로그 SDK는 Account를 생성된 로그와 연결하는 편리한 함수를 제공합니다.

                      • setAccount (newAccount: Account) API를 사용해 모든 로거에 대한 계정 설정
                      • setAccountProperty (key: string, value: any) API를 사용해 모든 로거에 계정 속성 추가 또는 수정
                      • getAccount () API를 사용해 현재 저장된 계정을 가져오기
                      • removeAccountProperty (key: string) API를 사용해 계정 속성 제거
                      • clearAccount () API를 사용해 기존 계정 속성을 모두 제거

                      참고: 계정 컨텍스트가 글로벌 컨텍스트 전에 적용됩니다. 따라서 글로벌 컨텍스트에 포함된 모든 계정 속성이 로그 생성 시 계정 컨텍스트를 재정의하게 됩니다.

                        import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.setAccount({ id: '1234', name: 'My Company Name' })
datadogLogs.setAccountProperty('type', 'premium')
datadogLogs.getAccount() // => {id: '1234', name: 'My Company Name', type: 'premium'}

datadogLogs.removeAccountProperty('type')
datadogLogs.getAccount() // => {id: '1234', name: 'My Company Name'}

datadogLogs.clearAccount()
datadogLogs.getAccount() // => {}

                        window.DD_LOGS.onReady(function () {
  window.DD_LOGS.setAccount({ id: '1234', name: 'My Company Name' })
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.setAccountProperty('type', 'premium')
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getAccount() // => {id: '1234', name: 'My Company Name', type: 'premium'}
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.removeAccountProperty('type')
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getAccount() // => {id: '1234', name: 'My Company Name'}
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.clearAccount()
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getAccount() // => {}
})

                        참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

                        window.DD_LOGS && window.DD_LOGS.setAccount({ id: '1234', name: 'My Company Name' })

window.DD_LOGS && window.DD_LOGS.setAccountProperty('type', 'premium')

window.DD_LOGS && window.DD_LOGS.getAccount() // => {id: '1234', name: 'My Company Name', type: 'premium'}

window.DD_LOGS && window.DD_LOGS.removeAccountProperty('type')

window.DD_LOGS && window.DD_LOGS.getAccount() // => {id: '1234', name: 'My Company Name'}

window.DD_LOGS && window.DD_LOGS.clearAccount()

window.DD_LOGS && window.DD_LOGS.getAccount() // => {}

                        참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

                        컨텍스트 수명 주기

                        기본적으로 컨텍스트는 현재 페이지 메모리에 저장되며, 이는 다음과 같은 의미입니다.

                        • 페이지를 완전히 다시 로드한 이후 유지되지 않음
                        • 동일한 세션의 다른 탭이나 창에서 공유되지 않음

                        컨텍스트를 세션의 모든 이벤트에 추가하려면 모든 페이지에 연결해야 합니다.

                        브라우저 SDK의 v4.49.0에 storeContextsAcrossPages 구성 옵션이 도입되어서, 그러한 컨텍스트를 localStorage에 저장할 수 있으므로 다음과 같은 동작이 가능합니다.

                        • 전체 다시 로드 이후에도 컨텍스트가 보존됨
                        • 동일한 출처에서 열린 여러 탭 간에 컨텍스트가 동기화됨

                        단, 이 기능에는 몇 가지 제한 사항이 있습니다.

                        • localStorage가 사용자 세션보다 수명이 길기 때문에 그러한 컨텍스트에 개인 식별 정보(PII)를 설정하는 것은 권장되지 않음
                        • localStorage 데이터는 동일한 출처에서만 공유되므로(login.site.com ≠ app.site.com) 이 기능은 trackSessionAcrossSubdomains 옵션과 호환되지 않음
                        • localStorage는 출처별로 5MiB로 제한되므로, localStorage에 저장된 애플리케이션별 데이터, Datadog 컨텍스트 및 기타 타사 데이터는 이 한도 이내여야만 문제 발생을 방지할 수 있음

                        로거 컨텍스트

                        로거가 생성되고 나면, 다음과 작업을 수행할 수 있습니다.

                        • setContext (context: object) API를 사용해 로거에 대한 전체 컨텍스트 설정
                        • setContextProperty (key: string, value: any) API를 사용해 로거에 컨텍스트 속성 설정
                          import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.setContext("{'env': 'staging'}")

datadogLogs.setContextProperty('referrer', document.referrer)

                          window.DD_LOGS.onReady(function () {
  window.DD_LOGS.setContext("{'env': 'staging'}")
})

window.DD_LOGS.onReady(function () {
  window.DD_LOGS.setContextProperty('referrer', document.referrer)
})

                          참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

                          window.DD_LOGS && window.DD_LOGS.setContext("{'env': 'staging'}")

window.DD_LOGS && window.DD_LOGS.setContextProperty('referrer', document.referrer)

                          참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

                          상태별 필터링

                          Datadog 브라우저 로그 SDK가 초기화된 후 로거에 대한 최소 로그 수준이 API를 사용해 설정됩니다.

                          setLevel (level?: 'debug' | 'info' | 'warn' | 'error')

                          지정된 수준 이상인 상태의 로그만 전송됩니다.

                            import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.logger.setLevel('<LEVEL>')

                            window.DD_LOGS.onReady(function () {
  window.DD_LOGS.logger.setLevel('<LEVEL>')
})

                            참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

                            window.DD_LOGS && window.DD_LOGS.logger.setLevel('<LEVEL>')

                            참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

                            목적지 변경

                            기본적으로 Datadog 브라우저 로그 SDK가 생성한 로거는 Datadog으로 로그를 보냅니다. Datadog 브라우저 로그 SDK가 초기화되고 나면, 로거를 구성해 다음 작업을 수행할 수 있습니다.

                            • console 및 Datadog(http)에 로그 보내기
                            • console에만 로그 보내기
                            • 로그를 보내지 않음(silent)
                            setHandler (handler?: 'http' | 'console' | 'silent' | Array<handler>)

                              import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.logger.setHandler('<HANDLER>')
datadogLogs.logger.setHandler(['<HANDLER1>', '<HANDLER2>'])

                              window.DD_LOGS.onReady(function () {
  window.DD_LOGS.logger.setHandler('<HANDLER>')
  window.DD_LOGS.logger.setHandler(['<HANDLER1>', '<HANDLER2>'])
})

                              참고: 초기 API 호출은 window.DD_LOGS.onReady() 콜백 내에서 래핑해야 합니다. 이렇게 해야 SDK가 적절히 로드된 다음에만 코드가 실행됩니다.

                              CDN sync의 경우, 다음을 사용하세요.

                              window.DD_LOGS && window.DD_LOGS.logger.setHandler('<HANDLER>')
window.DD_LOGS && window.DD_LOGS.logger.setHandler(['<HANDLER1>', '<HANDLER2>'])

                              참고: window.DD_LOGS 검사는 SDK와 관련해 로딩이 실패할 경우 발생하는 문제를 방지합니다.

                              로그 브라우저 SDK는 GDPR, CCPA 및 유사한 규정을 준수하기 위해 초기화 시 추적 동의 값을 제공하게 해줍니다.

                              trackingConsent 초기화 파라미터는 다음 값 중 하나일 수 있습니다.

                              1. "granted": 로그 브라우저 SDK가 데이터를 수집하기 시작하고 이를 Datadog으로 보냅니다.
                              2. "not-granted": Logs Browser SDK가 데이터를 수집하지 않습니다.

                              Logs Browser SDK가 초기화된 이후에 추적 동의 값을 변경하려면 setTrackingConsent() API 호출을 사용하세요. 로그 브라우저 SDK는 새 값에 따라 동작을 변경합니다.

                              • "granted"에서 "not-granted"로 변경되면 Logs 세션이 중지되고 데이터가 더 이상 Datadog으로 전송되지 않습니다.
                              • "not-granted"에서 "granted"로 변경되면 새 Logs 세션이 생성되고(활성인 이전 세션이 없는 경우), 데이터 수집이 재개됩니다.

                              이 상태는 탭 간에 동기화되지 않고, 탐색 간에 지속되지도 않습니다. 사용자에게는 Logs Browser SDK 초기화 중에 또는 setTrackingConsent()를 사용하여 사용자 결정을 제공할 책임이 있습니다.

                              setTrackingConsent()를 init() 이전에 사용한 경우, 제공된 값이 초기화 파라미터보다 우선합니다.

                                import { datadogLogs } from '@datadog/browser-logs';

datadogLogs.init({
    ...,
    trackingConsent: 'not-granted'
});

acceptCookieBannerButton.addEventListener('click', function() {
    datadogLogs.setTrackingConsent('granted');
});

                                window.DD_LOGS.onReady(function() {
    window.DD_LOGS.init({
        ...,
        trackingConsent: 'not-granted'
    });
});

acceptCookieBannerButton.addEventListener('click', () => {
    window.DD_LOGS.onReady(function() {
        window.DD_LOGS.setTrackingConsent('granted');
    });
});

                                window.DD_LOGS && window.DD_LOGS.init({
  ...,
  trackingConsent: 'not-granted'
});

acceptCookieBannerButton.addEventListener('click', () => {
    window.DD_LOGS && window.DD_LOGS.setTrackingConsent('granted');
});

                                내부 컨텍스트 액세스

                                Datadog 브라우저 로그 SDK가 초기화되고 나면, 해당 SDK의 내부 컨텍스트에 액세스할 수 있습니다. 이렇게 하면 session_id에 액세스할 수 있습니다.

                                getInternalContext (startTime?: 'number' | undefined)

                                선택 사항으로 startTime 파라미터를 사용해 특정 시간의 컨텍스트를 가져올 수 있습니다. 파라미터가 생략된 경우, 현재 컨텍스트가 반환됩니다.

                                  import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.getInternalContext() // { session_id: "xxxx-xxxx-xxxx-xxxx" }

                                  window.DD_LOGS.onReady(function () {
  window.DD_LOGS.getInternalContext() // { session_id: "xxxx-xxxx-xxxx-xxxx" }
})

                                  window.DD_LOGS && window.DD_LOGS.getInternalContext() // { session_id: "xxxx-xxxx-xxxx-xxxx" }