ブラウザの測定値が 1 つの管理された境界を越える
ブラウザーが取り込みキーを受け取ったり、宛先テーブルを選択したりすることはありません。サーバーは、分析イベントを転送する前に、小さなペイロードを検証します。
- 1
測定する
同意後に、許可リストに登録された Web Vital または制限されたフロントエンドの結果を収集します。
- 2
検証
発信元、サイズ、レート、フィールド、ルート、および数値範囲のルールを適用します。
- 3
進む
サーバー側キーと 1 つの制御されたイベント コントラクトを使用します。
- 4
レビュー
サンプルをクエリし、各集計の横にボリュームを表示してリリースの傾向を確認します。
始める前に
前提条件と境界
- Telemetry API キーを秘密に保つことができる同一オリジン サーバー エンドポイント
- イベント名、フィールド、メトリック名、ルート テンプレート、および数値範囲のホワイトリスト
- ブラウザ測定の同意、サンプリング、保存、および削除の動作を文書化
配信設定
サーバー側のインストールと初期化
サーバー専用コードで telemetry-sh をインポートし、process.env.TELEMETRY_API_KEY で一度初期化します。 ブラウザ バンドル、クライアントに表示される環境変数、ソース管理、ログ、および例外メッセージに取り込み資格情報が含まれないようにします。
npmのインストール
npm install telemetry-sh- 1制限されたネットワーク動作を持つ再利用可能なサーバー側配信クライアントを 1 つ準備します。
- 2成功、失敗、再試行、またはタイムアウトの境界に結果イベントを追加します。
- 3アラートを有効にする前に、制御されたフィクスチャを送信し、保存されている行を検査します。
スニペット
1 つの構造化されたイベントから始める
ワークフローが完了、失敗、または再試行される場所にこの図形を追加します。次に、実際のフィールドからダッシュボードを構築します。
Browser JavaScript and Web Vitals Telemetryイベント
// Browser: post only allowlisted measurements to your own origin.
function reportMetric(metric) {
navigator.sendBeacon("/api/browser-telemetry", JSON.stringify({
event_name: "browser_performance_observed",
metric_name: metric.name,
metric_value: metric.value,
metric_id: metric.id,
route_template: routeTemplateFor(location.pathname),
release: window.__APP_RELEASE__,
navigation_type: metric.navigationType,
}));
}
// Server: validate origin, size, rate, names, fields, and numeric ranges first.
await telemetry.log("browser_performance_observed", validatedMetric);イベント契約
metric_name、metric_value、metric_id、route_template、およびリリース
navigation_type、device_category、サンプリングされた、consent_state、および環境
生の URL、クエリ文字列、DOM テキスト、フォーム値、Cookie、リファラー識別子、またはクライアント指定のテーブル名は含まれません
実装のチェックポイント
チェックポイント 1
ホワイトリストに登録された小さなペイロードを独自のオリジンに送信します。転送する前に、送信元、コンテンツ タイプ、本文サイズ、レート、イベント名、フィールド、および範囲を検証します。
チェックポイント 2
location.href の代わりにルート テンプレートを使用し、ブラウザーが測定値を送信する前に同意またはオプトアウト ルールを適用します。
チェックポイント 3
sendBeacon と keepalive fetch はベストエフォート型です。サンプル数をパーセンタイル以外に保ち、ブラウザ配信を正確な台帳として扱わないでください。
検証
イベントが到着したことを証明する
既知の成功例と失敗例を実行した後、これを実行します。最終的なイベント コントラクトがスニペットと異なる場合は、フォールバック テーブル名を置き換えます。
Browser JavaScript and Web Vitals Telemetry 検証クエリ
SELECT *
FROM browser_performance_observed
ORDER BY timestamp_utc DESC
LIMIT 20;実装の参考資料
新しい運用パスを有効にする前に、イベント契約、データ安全性に関するガイダンス、上流の主要ドキュメントを確認してください。
生産境界
結果イベントを小さく、回復可能なものに保つ
このパターンが提供するのは、
- 上流のワークフローの横にある、制限付きの SQL 対応の結果。
- ダッシュボード、アラート、およびイベント間の相関関係の安定したフィールド。
- 成功、失敗、再試行、タイムアウトの動作を検証するためのフィクスチャ駆動のパス。
このパターンでは提供されません
- OTLP エクスポーター、自動収集パイプライン、または詳細なトレースと診断ログの代替。
- ペイロードにイベント ID が含まれているという理由だけで、1 回だけ配信されます。
- 生のプロバイダー ペイロード、ユーザー コンテンツ、資格情報、または規制されたデータを収集する許可。
イベントスキーマの開始点
このワークフローのイベント コントラクト
クエリまたはスニペットを運用環境に適用する前に、行粒度、出力境界、必要なタイプ、プライバシー クラス、サンプル ペイロード、および検証チェックリストを確認してください。
関連製品の機能
このワークフローを続行します アラート
レビューされた信頼性クエリを、所有するしきい値と応答のワークフローにプロモートします。
関連する SQL レシピ
SQL で次の質問に答えてください
このワークフローの構造化フィールドに対してクエリを実行し、結果の例を検査して、有用な回答をダッシュボードまたはアラートに変換します。
ルートとリリースごとにコア Web バイタルを比較
フロントエンドのパフォーマンスが最も弱いルートとリリースはどれですか?
レシピを開くルートおよびリリースごとの JavaScript エラーのランク
JavaScript エラーの影響が最も広範に発生するルートとフロントエンド リリースはどれですか?
レシピを開くルートごとの SPA ナビゲーション遅延の測定
クライアント側のナビゲーションが最も遅い目的地ルートはどれですか?
レシピを開くルートごとにブラウザのロングタスク率を計算する
どのルートとリリースがブラウザーの長いタスクに最も時間を費やしますか?
レシピを開くホストごとに遅いフロントエンド リソースを検索する
どのリソースのホストとタイプがページの読み込みを遅らせたり、失敗させたりしていますか?
レシピを開く実装ファミリーごとに参照する
関連する統合パターンを比較する
この統合と組み合わせるテンプレート
さらなる統合