コンテンツにスキップ

JavaScript¶

JavaScript は RUM（ユーザー実アクセス監視）の範囲に属し、主にブラウザユーザーのアクセス動作を検知してGuanceへ送信するために使います。

設定¶

DataKit で RUM コレクタを有効にする¶

RUM コレクタを有効にする

Web アプリの接続¶

Web アプリの接続方法は、NPM 接続、同期読み込み、非同期読み込みの 3 種類です。

接続方法	概要
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 監視を個別に設定するための多くのパラメータがあります。