브라우저 로그 수집¶

Web 브라우저 또는 JavaScript 클라이언트를 통해 다양한 수준의 로그 데이터(对应的 source:browser_log 메트릭 유형 로그 데이터)를 Guance로 능동적으로 전송합니다.

사용자 정의 로그 데이터 수집: SDK를 클라이언트 애플리케이션에 통합하여 다양한 시나리오에 맞는 로그 데이터를 수집합니다.
애플리케이션 측 오류 정보(네트워크 오류, console 오류, JS 오류 포함)를 자동으로 수집하여 Guance에 보고합니다.
사용자 정의 오류 수준(debug, critical, error, info, warn), 사용자 정의 Logger 객체 및 사용자 정의 Log 필드를 지원합니다.
RUM 관련 데이터를 자동으로 수집하여 RUM 비즈니스 시나리오와 연동합니다.

시작하기¶

사전 조건¶

DataKit 연동공용 OpenWay

DataKit이 설치되어 있고 공개 네트워크에서 접근 가능하며 IP 지리 정보 데이터베이스가 설치되어 있는지 확인합니다.
SDK 통합 시 datakitOrigin를 DataKit의 도메인 또는 IP로 설정합니다.

콘솔에서 clientToken 및 site 등의 매개변수를 획득합니다.
SDK 통합 시 datakitOrigin를 구성할 필요가 없으며, 데이터는 기본적으로 공용 DataWay로 전송됩니다.

SDK 구성¶

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

NPM¶

import { datafluxLogs } from "@cloudcare/browser-logs"
datafluxLogs.init({
  datakitOrigin: "<DataKit的域名或IP>", // DK 방식 연동 시 필요
  clientToken: "clientToken", // 공용 OpenWay 연동 시 입력 필요
  site: "공용 OpenWay 주소", // 공용 OpenWay 연동 시 입력 필요
  //service: 'browser',
  //forwardErrorsToLogs:true
})

CDN 비동기 로드¶

<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-logs.js",
    "DATAFLUX_LOGS"
  )
  DATAFLUX_LOGS.onReady(function () {
    DATAFLUX_LOGS.init({
      datakitOrigin: "<DataKit的域名或IP>", // DK方式接入时需要配置
      clientToken: "clientToken", // 公网 OpenWay 接入时,需要填写
      site: "公网 OpenWay 地址", // 公网 OpenWay 接入时,需要填写
      //service: 'browser',
      //forwardErrorsToLogs:true
    })
  })
</script>

CDN 동기 로드¶

<script
  src="https://static.guance.com/browser-sdk/v3/dataflux-logs.js"
  type="text/javascript"
></script>
<script>
  window.DATAFLUX_LOGS &&
    window.DATAFLUX_LOGS.init({
      datakitOrigin: "<DataKit的域名或IP>", // DK方式接入时需要配置
      clientToken: "clientToken", // 公网 OpenWay 接入时,需要填写
      site: "公网 OpenWay 地址", // 公网 OpenWay 接入时,需要填写
      //service: 'browser',
      //forwardErrorsToLogs:true
    })
</script>

구성¶

초기화 매개변수¶

매개변수	유형	필수 여부	기본값	설명
`datakitOrigin`	String	예		DataKit 데이터 보고 Origin 참고: `协议（包括：//），域名（或 IP 地址）[和端口号]` 예: https://www.datakit.com, http://100.20.34.3:8088。
`clientToken`	String	예		openway 방식으로 데이터를 보고하기 위한 토큰, Guance 콘솔에서 획득, 필수(공용 openway 방식 연동).
`site`	String	예		공용 openway 방식으로 데이터를 보고할 주소, Guance 콘솔에서 획득, 필수(공용 openway 방식 연동).
`service`	String	아니요	`browser`	로그 Service 이름
`env`	String	아니요		Web 애플리케이션의 현재 환경, 예: Prod: 프로덕션 환경; Gray: 카나리 환경; Pre: 사전 릴리스 환경; Common: 일반 환경; Local: 로컬 환경.
`version`	String	아니요		Web 애플리케이션의 버전 번호
`sessionSampleRate`	Number	아니요	`100`	지표 데이터 수집 비율: `100`은 전체 수집, `0`은 수집하지 않음
`tracingSampleRate`	Number	아니요	`100`	트레이스 데이터 샘플링 비율: `100`은 전체 수집, `0`은 수집하지 않음
`forwardErrorsToLogs`	Boolean	아니요	`true`	`false`로 설정하면 console.error, JS 및 네트워크 오류를 Guance 로그 데이터로 보고하는 것을 중지합니다.
`silentMultipleInit`	Boolean	아니요	`false`	여러 로그 객체가 초기화되는 것을 허용하지 않습니다.
`forwardConsoleLogs`	문자열/배열			수집할 브라우저 console 로그 유형, 선택 가능 값: `error`, `log`, `info`, `warn`, `error`
`storeContextsToLocal`	Boolean	아니요		버전 요구 사항: `>3.1.2`. 사용자 정의 데이터를 로컬 localStorage에 캐시할지 여부. 예: `setUser`, `addGlobalContext` API로 추가한 사용자 정의 데이터.
`storeContextsKey`	String	아니요		버전 요구 사항: `>3.1.18`. localStorage에 저장할 key를 정의합니다. 기본값은 비어 있으며 자동 생성됩니다. 이 매개변수는 동일한 도메인 내에서 서로 다른 하위 경로가 store를 공유하는 문제를 구분하기 위한 것입니다.

사용법¶

애플리케이션에서 SDK를 초기화한 후, 노출된 JS API를 통해 로그 데이터를 사용자 정의할 수 있습니다.

logger.debug | info | warn | error | critical (message: string, messageContext = Context)

NPM¶

import { datafluxLogs } from "@cloudcare/browser-logs"

datafluxLogs.logger.info("Button clicked", { name: "buttonName", id: 123 })

CDN 비동기¶

DATAFLUX_LOGS.onReady(function () {
  DATAFLUX_LOGS.logger.info("Button clicked", { name: "buttonName", id: 123 })
})

CDN 동기¶

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

반환 데이터 구조¶

{
  "service": "browser",
  "session": {
    "id": "c549c2b8-4955-4f74-b7f8-a5f42fc6e79b"
  },
  "type": "logger",
  "_dd": {
    "sdk_name": "Web LOG SDK",
    "sdk_version": "1.0.0",
    "env": "",
    "version": ""
  },
  "device": {
    "os": "Mac OS",
    "os_version": "10.14.6",
    "os_version_major": "10",
    "browser": "Chrome",
    "browser_version": "90.0.4430.85",
    "browser_version_major": "90",
    "screen_size": "2560*1440",
    "network_type": "3g",
    "divice": "PC"
  },
  "user": {},
  "date": 1621321916756,
  "view": {
    "referrer": "",
    "url": "http://localhost:8080/",
    "host": "localhost:8080",
    "path": "/",
    "path_group": "/",
    "url_query": "{}",
    "id": "5dce64f4-8d6d-411a-af84-c41653ccd94a"
  },
  "application": {
    "id": "app_idxxxxxx"
  },
  "message": "XHR error get http://testing-ft2x-api.cloudcare.cn/api/v1/workspace/xxx",
  "status": "error",
  "tags": {},
  "error": {
    "source": "network",
    "stack": "Failed to load"
  },
  "resource": {
    "method": "get",
    "status": 0,
    "status_group": 0,
    "url": "http://testing-ft2x-api.cloudcare.cn/api/v1/workspace/xxx",
    "url_host": "testing-ft2x-api.cloudcare.cn",
    "url_path": "/api/v1/workspace/xxx",
    "url_path_group": "/api/?/workspace/xxx"
  }
}

Status 매개변수¶

SDK 초기화 후 제공되는 log API를 사용하여 다양한 유형의 상태를 정의할 수 있습니다.

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

NPM¶

import { datafluxLogs } from '@cloudcare/browser-logs'

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

CDN 비동기¶

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

CDN 동기¶

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

매개변수 설명¶

매개변수	설명
`<MESSAGE>`	Guance 로그의 Message 필드
`<JSON_ATTRIBUTES>`	Message를 설명하는 추가 데이터, JSON 객체
`<STATUS>`	로그 수준, 선택 가능 값: `debug`, `info`, `warn`, `error`, `critical`

사용자 정의 추가 데이터 TAG¶

LOG 초기화 후 setGlobalContextProperty(key:string，value:any) API를 사용하여 애플리케이션에서 수집된 모든 LOG 이벤트에 추가 TAG를 추가합니다.

TAG 추가¶

CDN 동기CDN 비동기NPM

window.DATAFLUX_LOGS && window.DATAFLUX_LOGS.setGlobalContextProperty('<CONTEXT_KEY>', '<CONTEXT_VALUE>');

// 코드 예시
window.DATAFLUX_LOGS && window.DATAFLUX_LOGS.setGlobalContextProperty('isvip', 'xxxx');
window.DATAFLUX_LOGS && window.DATAFLUX_LOGS.setGlobalContextProperty('activity', {
    hasPaid: true,
    amount: 23.42
});

DATAFLUX_LOGS.onReady(function() {
    DATAFLUX_LOGS.setGlobalContextProperty('<CONTEXT_KEY>', '<CONTEXT_VALUE>');
})

// 코드 예시
DATAFLUX_LOGS.onReady(function() {
    DATAFLUX_LOGS.setGlobalContextProperty('isvip', 'xxxx');
})
DATAFLUX_LOGS.onReady(function() {
    DATAFLUX_LOGS.setGlobalContextProperty('activity', {
        hasPaid: true,
        amount: 23.42
    });
})

import { datafluxLogs } from '@cloudcare/browser-logs'
datafluxLogs.setGlobalContextProperty('<CONTEXT_KEY>', <CONTEXT_VALUE>);

// 코드 예시
datafluxLogs && datafluxLogs.setGlobalContextProperty('isvip', 'xxxx');
datafluxLogs.setGlobalContextProperty('activity', {
    hasPaid: true,
    amount: 23.42
});

TAG 교체 (덮어쓰기)¶

CDN 동기CDN 비동기NPM

window.DATAFLUX_LOGS &&
     window.DATAFLUX_LOGS.setGlobalContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });

// 코드 예시
window.DATAFLUX_LOGS &&
     window.DATAFLUX_LOGS.setGlobalContext({
        codeVersion: 34,
    });

 window.DATAFLUX_LOGS.onReady(function() {
     window.DATAFLUX_LOGS.setGlobalContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });
})

// 코드 예시
 window.DATAFLUX_LOGS.onReady(function() {
     window.DATAFLUX_LOGS.setGlobalContext({
        codeVersion: 34,
    })
})

import { datafluxLogs } from '@cloudcare/browser-logs'

datafluxLogs.setGlobalContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });

// 코드 예시
datafluxLogs.setGlobalContext({
    codeVersion: 34,
});

설정된 모든 사용자 정의 TAG 가져오기¶

CDN 동기CDN 비동기NPM

var context = window.DATAFLUX_LOGS &&  window.DATAFLUX_LOGS.getGlobalContext();

 window.DATAFLUX_LOGS.onReady(function() {
    var context =  window.DATAFLUX_LOGS.getGlobalContext();
});

import { datafluxLogs } from '@cloudcare/browser-logs'

const context = datafluxLogs.getGlobalContext();

특정 key에 해당하는 사용자 정의 TAG 제거¶

CDN 동기CDN 비동기NPM

var context = window.DATAFLUX_LOGS &&  window.DATAFLUX_LOGS.removeGlobalContextProperty('<CONTEXT_KEY>');

 window.DATAFLUX_LOGS.onReady(function() {
    var context =  window.DATAFLUX_LOGS.removeGlobalContextProperty('<CONTEXT_KEY>');
});

import { datafluxLogs } from '@cloudcare/browser-logs'

const context = datafluxLogs.removeGlobalContextProperty('<CONTEXT_KEY>');

모든 사용자 정의 TAG 제거¶

CDN 동기CDN 비동기NPM

var context = window.DATAFLUX_LOGS &&  window.DATAFLUX_LOGS.clearGlobalContext();

 window.DATAFLUX_LOGS.onReady(function() {
    var context =  window.DATAFLUX_LOGS.clearGlobalContext();
});

import { datafluxLogs } from '@cloudcare/browser-logs'

const context = datafluxLogs.clearGlobalContext();

사용자 정의 사용자 식별¶

SDK는 기본적으로 사용자에게 고유 식별 ID를 자동으로 생성합니다. 이 ID는 식별 속성을 가지지 않으며, 서로 다른 사용자 속성을 구분하는 용도로만 사용됩니다. 따라서 현재 사용자에게 다양한 식별 속성을 추가할 수 있는 추가 API를 제공합니다.

속성	유형	설명
user.id	string	사용자 ID
user.name	string	사용자 닉네임 또는 사용자 이름
user.email	string	사용자 이메일

참고: 다음 속성은 선택 사항이지만, 최소한 하나는 제공하는 것이 좋습니다.

사용자 식별 추가¶

CDN 동기CDN 비동기NPM

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

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

import { datafluxLogs } from '@cloudcare/browser-logs'
datafluxLogs.setUser({
    id: '1234',
    name: 'John Doe',
    email: 'john@doe.com',
})

사용자 식별 제거¶

CDN 동기CDN 비동기NPM

window.DATAFLUX_LOGS && window.DATAFLUX_LOGS.clearUser()

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

import { datafluxLogs } from '@cloudcare/browser-logs'
datafluxLogs.clearUser()

브라우저 로그 수집¶

시작하기¶

사전 조건¶

SDK 구성¶

NPM¶

CDN 비동기 로드¶

CDN 동기 로드¶

구성¶

초기화 매개변수¶

사용법¶

NPM¶

CDN 비동기¶

CDN 동기¶

반환 데이터 구조¶

Status 매개변수¶

NPM¶

CDN 비동기¶

CDN 동기¶

매개변수 설명¶

사용자 정의 추가 데이터 TAG¶

TAG 추가¶

TAG 교체 (덮어쓰기)¶

설정된 모든 사용자 정의 TAG 가져오기¶

특정 key에 해당하는 사용자 정의 TAG 제거¶

모든 사용자 정의 TAG 제거¶

사용자 정의 사용자 식별¶

사용자 식별 추가¶

사용자 식별 제거¶

이 페이지가 도움이 되었나요? ×

이 페이지가 도움이 되었나요?