本文へ移動
Telemetry
フロントエンドの信頼性 SQL レシピ

ルートごとの SPA ナビゲーション遅延の測定

目的地ルートとフロントエンド リリースごとに、クライアント側の標準的なナビゲーション時間を比較します。

中級者frontend_navigation_eventsレビュー済み 2026-07-28テスト済み アパッチ DataFusion 45.2.0

レビュー者 Telemetry 製品チーム . SQL の互換性、イベント コントラクト、合成出力、および操作上の注意事項. 基準と所有権を確認する

質問に回答しました

クライアント側のナビゲーションが最も遅い目的地ルートはどれですか?

サーバーの遅延だけでは、単一ページ アプリケーションでのルーティング、データの読み込み、ハイドレーション、レンダリングの作業が失われます。ナビゲーション完了イベントは、ユーザーに表示される期間を保持します。

イベント契約

クエリが期待するフィールド

フィールド種類なぜ存在するのか
timestamp_utcTimestampナビゲーションの完了時間。
destination_routeUtf8安定した宛先ルート テンプレート。
releaseUtf8フロントエンドのリリース識別子。
duration_msFloat64ナビゲーション開始から準備完了状態までの時間。
statusUtf8成功、失敗、放棄。
DataFusion SQL

クエリをコピーする

sql
SELECT
  destination_route,
  release,
  COUNT(*) AS navigations,
  approx_percentile_cont(duration_ms, 0.50) AS p50_ms,
  approx_percentile_cont(duration_ms, 0.95) AS p95_ms,
  100.0 * SUM(CASE WHEN status <> 'success' THEN 1 ELSE 0 END)
    / NULLIF(COUNT(*), 0) AS unsuccessful_pct
FROM frontend_navigation_events
WHERE timestamp_utc >= now() - INTERVAL '7 days'
GROUP BY destination_route, release
HAVING COUNT(*) >= 50
ORDER BY p95_ms DESC;

この読み取り専用クエリは、空の型付きテーブルに対して計画され、実行されます。 アパッチ DataFusion 45.2.0。決定論的なサンプル出力は合成され、個別にレビューされます。フィールド タイプ、しきい値、ビジネス定義を独自のデータと照合して検証します。 テスト方法を読んでください。

クエリ結果

p95 クライアント ナビゲーション レイテンシ

レポート ナビゲーションの裾野ははるかに広く、失敗の割合が高くなります。

destination_routereleasenavigationsp50_msp95_msunsuccessful_pct
/reports/:idweb-1036407803,2103.13
/projects/:idweb-1031,8204101,4801.21

合成出力例。運用上の決定に使用する前に、独自のイベント スキーマとしきい値に対してクエリを実行します。

p95 client navigation latency: Measure SPA Navigation Latency by Route 結果例からの合成 p95_ms 値の静的チャート
決定論的な出力例のインデックス可能な SVG。記事、ランブック、または出典を明示した設計レビューのためにダウンロードしてください。

例を再現する

パブリックフィクスチャをダウンロードする

JSON バンドルには、型付きイベント コントラクトが含まれています。 illustrative 入力行、正確な SQL、予想される出力、レビューメモ、およびエンジンのバージョン。 CSV には、表示された結果が含まれます。

SQL の仕組み

  1. 1完了境界は、URL の変更のみではなく、ルート固有の準備完了状態を表す必要があります。
  2. 2p50 と p95 は、一般的に遅いルートと断続的なロングテールを区別します。
  3. 3失敗したナビゲーションや放棄されたナビゲーションはレイテンシを超えたままになるため、高速な失敗によってパフォーマンスが正常に見えることはありません。

決定すべきエッジケース

  • プリフェッチすると、期間に含まれる作業が変更されます。
  • バックグラウンド タブはブラウザのタイミングを歪めるため、分類する必要があります。
  • 識別子やクエリ文字列の代わりにルート テンプレートを使用します。

推奨されるダッシュボード

  • グループ化されたバー: ルート別の p50_ms および p95_ms
  • トレンド: リリース別 p95_ms
  • 表: 最も遅い安全なナビゲーションのサンプル

アラートガイダンス

大量のルートが完全なバケットについてレビューされた p95 目標を超えた場合にアラートを送信します。

アラート設定を読む

レシピを活用する

関連する機器とガイド

分析を続ける

実際のイベントで実行する

テーブルを作成し、フィールドを調整して、結果を保存します

無料で始めて、構造化されたイベントを送信し、クエリ結果をグラフ、共有ダッシュボード ウィジェット、またはアラート入力として使用します。

API キーを取得する