FAQ¶

接続後にデータがない場合¶

以下の順序で確認することで、通常は設定、サンプリング、またはネットワークの問題を迅速に特定できます。

SDK が初期化されていることを確認：初期化コードはビジネスイベント発生前に実行し、同一ページで init() は 1 回だけ呼び出す必要があります。
接続パラメータが完全であることを確認：applicationId は必須です。パブリック OpenWay を使用する場合は site と clientToken を設定し、DataKit 直接接続を使用する場合は datakitOrigin を設定します。これら 2 つの送信方法を混在させないでください。
Session がサンプリングにヒットしていることを確認：最初の調査では sessionSampleRate を 100 に設定し、サンプリング未ヒットによる誤判定を避けてください。
ブラウザの Console を確認：以下の初期化エラーに特に注意してください。

エラーメッセージ	対応方法
`Application ID is not configured`	コンソールで生成された `applicationId` を設定してください
`datakitOrigin or site is not configured`	現在の送信方法に対応するアドレスを設定してください
`Allowed Tracing URLs should be an array`	`allowedTracingUrls` を配列に変更してください

Network を確認：/v1/write/rum をフィルタリングしてください。リクエストがない場合は、初期化のタイミング、サンプリング、CSP を確認し、リクエストが失敗している場合はアドレス、Token、CORS、プロキシ、DataKit の到達可能性を確認してください。
コンソールのフィルタ条件を確認：正しいアプリケーションが選択されていることを確認し、service、env、version、時間範囲を確認してください。

基本的な調査方法については、Web アプリケーション接続 > 接続の検証も参照してください。

`allowedTracingUrls` を設定した後に非同期リクエストがクロスオリジンになる¶

APM（アプリケーションパフォーマンスモニタリング）ツールを使用してフロントエンドからバックエンドまでの完全なトレース（通常 RUM（リアルユーザーモニタリング）と呼ばれます）を実現するには、フロントエンドとバックエンドの両方で適切な設定を行う必要があります。以下に主な手順と注意点を示します。

フロントエンドの設定¶

RUM SDK をインストールして設定：
Web フロントエンドアプリケーションに APM ツールが提供する RUM SDK をインストールします。
SDK を設定し、allowedTracingUrls（Trace Header の注入を許可するリクエスト URL のマッチリスト）と traceType（分散型トレーシングタイプ）を設定します。NPM + TypeScript で接続する場合は TraceType 列挙型（例：TraceType.DDTRACE）を使用します。対応するランタイム値は ddtrace です。
トレース情報を送信：
RUM SDK は traceType に基づいて自動的に適切なリクエストヘッダーを追加します。DDTrace を例にとると、x-datadog-parent-id、x-datadog-origin、x-datadog-sampling-priority、x-datadog-trace-id などが含まれます。

バックエンドの設定¶

CORS ポリシーを設定：
バックエンドサーバーで CORS（クロスオリジンリソース共有）ポリシーを設定し、フロントエンドドメインからのリクエストを許可し、Access-Control-Allow-Headers に必要なすべてのトレース情報ヘッダーを含めるように指定します。
例えば、バックエンドが Node.js と Express フレームワークを使用している場合、CORS ミドルウェアを追加し、allowedHeaders プロパティを設定してこれらのトレース情報ヘッダーを含めます。

const cors = require('cors')
app.use(
  cors({
    origin: 'https://your-frontend-domain.com', // フロントエンドアプリケーションのドメインに置き換えてください
    allowedHeaders: [
      'x-datadog-parent-id',
      'x-datadog-origin',
      'x-datadog-sampling-priority',
      'x-datadog-trace-id',
      // その他必要なヘッダーがある場合
    ],
  })
)

リクエストを処理：
バックエンドサービスがこれらのトレース情報ヘッダーを受信し、正しく処理できることを確認します。これらの情報は、バックエンドサービス内でリクエストを関連付けて追跡するために使用されます。

検証とテスト¶

設定のテスト：
フロントエンドからバックエンドへのリクエストを実行し、ネットワークリクエストの HTTP ヘッダーを確認して、トレース情報が正しく送信されていることを確認します。
バックエンドサーバーのログを確認し、トレース情報が正しく処理されていることを確認します。
デバッグと修正：
問題が発生した場合（CORS エラー、ヘッダー未送信など）、フロントエンドとバックエンドの設定を確認し、必要に応じて調整してください。

注意点¶

セキュリティ：allowedTracingUrls は信頼できるリクエスト URL のみにマッチするようにし、意図しない宛先に Trace Header が注入されるのを防ぎます。
パフォーマンス：トレース情報はパフォーマンス監視に不可欠ですが、アプリケーションのパフォーマンスに悪影響を及ぼさないように注意してください。

上記の手順により、APM ツールを設定してフロントエンドからバックエンドまでの完全なトレースをサポートし、Web アプリケーションのパフォーマンスをより効果的に監視および最適化できます。

Script error が発生する¶

Guance Web RUM SDK を使用して Web 側のエラーを収集する際、js_error で Script error が頻繁に発生することがあります。このエラーメッセージには詳細情報が含まれていません。

上記の問題が発生する可能性のある原因：

ユーザーが使用しているブラウザがエラーキャプチャをサポートしていない（可能性は非常に低い）。
エラーが発生したスクリプトファイルがクロスオリジンでページに読み込まれている。

ブラウザがサポートしていない場合は対処できません。ここでは、クロスオリジンスクリプトエラーが収集できない原因と解決策を主に説明します。

一般的に、スクリプトファイルは <script> タグを使用して読み込まれます。同一オリジンのスクリプトでエラーが発生した場合、ブラウザの GlobalEventHandlers API を使用すると、収集されるエラー情報には詳細なエラー内容が含まれます。一方、異なるオリジンのスクリプトでエラーが発生した場合、収集されるエラー情報は Script error. というテキストのみになります。これはブラウザの同一オリジンポリシーによるもので、正常な動作です。異なるオリジンのスクリプトの場合は、クロスオリジンリソース共有（CORS）の設定を行う必要があります。

解決方法：

スクリプトファイルをサーバーに直接配置する場合：

サーバーで静的ファイル出力時に以下のヘッダーを追加します：

Access-Control-Allow-Origin: *

異なるオリジンのスクリプトが配置されている Script タグに crossorigin="anonymous" 属性を追加します：

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

スクリプトファイルを CDN に配置する場合：

CDN 設定に以下のヘッダーを追加します：

Access-Control-Allow-Origin: *

異なるオリジンのスクリプトが配置されている Script タグに crossorigin="anonymous" 属性を追加します：

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

スクリプトファイルをサードパーティから読み込む場合：

異なるオリジンのスクリプトが配置されている Script タグに crossorigin="anonymous" 属性を追加します：

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

Resource データ収集が不完全¶

以下の現象は、リソースデータが完全に収集されていないと見なされる場合があります。

リソースサイズ関連データが 0
resource_transfer_size、resource_decode_size、resource_encode_size、resource_size などのフィールドが該当します。
時間関連データが未収集
resource_dns、resource_tcp、resource_ssl、resource_ttfb、resource_trans、resource_first_byte、resource_dns_time、resource_download_time、resource_first_byte_time、resource_connect_time などのフィールドが該当します。

考えられる原因¶

接続の再利用 (Keep-Alive)
リソースリクエストが keep-alive 方式で接続を維持する場合、DNS クエリと TCP 接続プロセスは最初のリクエスト時のみ発生し、以降のリクエストは同じ接続を再利用するため、関連データが記録されないか 0 になる可能性があります。
クロスオリジンでのリソース読み込み
リソースがクロスオリジンで読み込まれ、関連するヘッダー情報が設定されていない場合、ブラウザは完全なパフォーマンスデータを収集できません。これがデータ欠落の主な原因です。
ブラウザの互換性
ごくまれに、一部のブラウザが Performance API をサポートしていないため、リソース関連のパフォーマンスデータを取得できない場合があります。

クロスオリジンリソースによるデータ欠落の解決方法¶

1. リソースファイルをサーバーに配置する場合
サーバーでリソースファイルに以下の HTTP ヘッダーを追加します：

Timing-Allow-Origin: *

2. リソースファイルを CDN に配置する場合
CDN 設定でリソースファイルに以下の HTTP ヘッダーを追加します：

Timing-Allow-Origin: *

参考ドキュメント

Resource `resource_status` データが未収集¶

特定の状況で resource_status データが欠落する場合があります。原因は以下のとおりです。

クロスオリジンでのリソース読み込み
リソースがクロスオリジンで読み込まれ、クロスオリジンアクセス権限が設定されていない場合、ブラウザはリソースステータス情報を取得できません。
ブラウザの互換性
一部のブラウザが Performance API をサポートしていないため、関連データを収集できない場合があります（非常にまれ）。

クロスオリジンリソースによる `resource_status` データ欠落の解決方法¶

1. リソースファイルをサーバーに配置する場合
サーバー設定でリソースファイルに以下の HTTP ヘッダーを追加します：

Access-Control-Allow-Origin: *

2. リソースファイルを CDN に配置する場合
CDN 設定でリソースファイルに以下の HTTP ヘッダーを追加します：

Access-Control-Allow-Origin: *

上記の設定により、クロスオリジンリソースによるデータ収集の問題を効果的に解決し、ブラウザがパフォーマンスデータを正しく取得できるようになります。参考ドキュメント。

検索エンジンボットの識別¶

Web アクティビティを実行する際には、実際のユーザーアクティビティと検索エンジンを区別する必要があります。以下のサンプルスクリプトを使用して、ボットを含むセッションをフィルタリングできます。

// 既知のボットインスタンスを識別するための正規表現パターン:
let botPattern = "(googlebot\/|bot|Googlebot-Mobile|Googlebot-Image|Google favicon|Mediapartners-Google|bingbot|slurp|java|wget|curl|Commons-HttpClient|Python-urllib|libwww|httpunit|nutch|phpcrawl|msnbot|jyxobot|FAST-WebCrawler|FAST Enterprise Crawler|biglotron|teoma|convera|seekbot|gigablast|exabot|ngbot|ia_archiver|GingerCrawler|webmon |httrack|webcrawler|grub.org|UsineNouvelleCrawler|antibot|netresearchserver|speedy|fluffy|bibnum.bnf|findlink|msrbot|panscient|yacybot|AISearchBot|IOI|ips-agent|tagoobot|MJ12bot|dotbot|woriobot|yanga|buzzbot|mlbot|yandexbot|purebot|Linguee Bot|Voyager|CyberPatrol|voilabot|baiduspider|citeseerxbot|spbot|twengabot|postrank|turnitinbot|scribdbot|page2rss|sitebot|linkdex|Adidxbot|blekkobot|ezooms|dotbot|Mail.RU_Bot|discobot|heritrix|findthatfile|europarchive.org|NerdByNature.Bot|sistrix crawler|ahrefsbot|Aboundex|domaincrawler|wbsearchbot|summify|ccbot|edisterbot|seznambot|ec2linkfinder|gslfbot|aihitbot|intelium_bot|facebookexternalhit|yeti|RetrevoPageAnalyzer|lb-spider|sogou|lssbot|careerbot|wotbox|wocbot|ichiro|DuckDuckBot|lssrocketcrawler|drupact|webcompanycrawler|acoonbot|openindexspider|gnam gnam spider|web-archive-net.com.bot|backlinkcrawler|coccoc|integromedb|content crawler spider|toplistbot|seokicks-robot|it2media-domain-crawler|ip-web-crawler.com|siteexplorer.info|elisabot|proximic|changedetection|blexbot|arabot|WeSEE:Search|niki-bot|CrystalSemanticsBot|rogerbot|360Spider|psbot|InterfaxScanBot|Lipperhey SEO Service|CC Metadata Scaper|g00g1e.net|GrapeshotCrawler|urlappendbot|brainobot|fr-crawler|binlar|SimpleCrawler|Livelapbot|Twitterbot|cXensebot|smtbot|bnf.fr_bot|A6-Indexer|ADmantX|Facebot|Twitterbot|OrangeBot|memorybot|AdvBot|MegaIndex|SemanticScholarBot|ltx71|nerdybot|xovibot|BUbiNG|Qwantify|archive.org_bot|Applebot|TweetmemeBot|crawler4j|findxbot|SemrushBot|yoozBot|lipperhey|y!j-asr|Domain Re-Animator Bot|AddThis)";

let regex = new RegExp(botPattern, 'i');

// ユーザーエージェントがボットパターンに一致する場合、トレーシングヘッダーの注入を無効にする
const allowedTracingUrls = regex.test(navigator.userAgent)
  ? []
  : ['https://api.example.com']

window.DATAFLUX_RUM.init({
  // ... 設定オプション
  allowedTracingUrls
})