ブラウザログ収集¶

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`	ログのサービス名
`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 に保存するキーを定義します。デフォルトでは未入力で自動生成されます。このパラメータは、同じドメイン名の下で異なるサブパスがストアを共有する問題を区別するために使用されます。

使用¶

アプリケーションで 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();

特定のキーに対応するカスタム 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	ユーザーメールアドレス

注意：以下の属性はオプションですが、少なくとも 1 つは提供することをお勧めします。

ユーザー識別子の追加¶

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 を取得¶

特定のキーに対応するカスタム TAG を削除¶

すべてのカスタム TAG を削除¶

カスタムユーザー識別子¶

ユーザー識別子の追加¶

ユーザー識別子の削除¶

このページは役に立ちましたか？ ×

このページは役に立ちましたか？