Frontend Performance Monitoring with SQL: 実装から決定まで
完全な frontend performance monitoring with sql 測定ループは、1 つの所有ワークフロー、制限されたイベント コントラクト、制御されたフィクスチャ、および誰かが行動できる質問を接続します。
- 1
境界を設定する
重要な製品ルートとサポートされているパフォーマンス指標を選択してください。
- 2
結果を把握する
Begin with frontend_vital_measured, frontend_navigation_completed, frontend_resource_failed and document the grain of each event.
- 3
行を証明する
リリース ガードレールを有効にする前に、ルート レベルのサンプルとしきい値を確認してください。
- 4
決断を下す
通過サンプル レートが最も低いルートはどれですか?
エージェントプロンプト
これをコーディングエージェントに貼り付けます
交換する YOUR_API_KEY サインアップ後、エージェントに製品フローを実行して最初のイベントを確認するように依頼します。
Frontend Performance Monitoring with SQL セットアップ プロンプト
Telemetry を使用してフロントエンドのパフォーマンスを計測します。
/skill.md とこの Telemetry API キーを使用します: YOUR_API_KEY
route_template、release、metric_name、metric_value、metric_unit、threshold_version、passed、device_class、および環境を使用して、型指定された frontend_vital_measured イベントを追加します。
SQL と、routeおよびリリース別のサンプル数、LCP、INP、CLS、通過サンプル レートのダッシュボードを作成します。リリースを比較したり、アラートを有効にしたりする前に、最小サンプル数を確認する必要があります。
route テンプレート、制限されたデバイス クラス、およびバージョン管理されたしきい値を使用します。生の URL、クエリ文字列、DOM コンテンツ、フォーム値、Cookie、認証トークン、または無制限のユーザー ID をログに記録しないでください。セットアップ手順
- 1重要な製品ルートとサポートされているパフォーマンス指標を選択してください。
- 2ルート、リリース、しきい値バージョン、および環境を使用して、入力されたブラウザー測定値を出力します。
- 3テスト リリースから合成の合格サンプルと不合格サンプルを送信します。
- 4リリース ガードレールを有効にする前に、ルート レベルのサンプルとしきい値を確認してください。
キャプチャするイベント
質問のロックが解除されました
- 通過サンプル レートが最も低いルートはどれですか?
- 最新のフロントエンド リリースでは LCP、INP、または CLS が変更されましたか?
- 回帰は広範囲にわたるものですか、それともレビューされたデバイス クラスに限定されたものですか?
イベントスキーマの開始点
このワークフローのイベント コントラクト
クエリまたはスニペットを運用環境に適用する前に、行粒度、出力境界、必要なタイプ、プライバシー クラス、サンプル ペイロード、および検証チェックリストを確認してください。
関連製品の機能
このワークフローを続行します アラート
レビューされた信頼性クエリを、所有するしきい値と応答のワークフローにプロモートします。
関連する SQL レシピ
SQL で次の質問に答えてください
このワークフローの構造化フィールドに対してクエリを実行し、結果の例を検査して、有用な回答をダッシュボードまたはアラートに変換します。
ルートとリリースごとにコア Web バイタルを比較
フロントエンドのパフォーマンスが最も弱いルートとリリースはどれですか?
レシピを開くルートおよびリリースごとの JavaScript エラーのランク
JavaScript エラーの影響が最も広範に発生するルートとフロントエンド リリースはどれですか?
レシピを開くルートごとの SPA ナビゲーション遅延の測定
クライアント側のナビゲーションが最も遅い目的地ルートはどれですか?
レシピを開くルートごとにブラウザのロングタスク率を計算する
どのルートとリリースがブラウザーの長いタスクに最も時間を費やしますか?
レシピを開くホストごとに遅いフロントエンド リソースを検索する
どのリソースのホストとタイプがページの読み込みを遅らせたり、失敗させたりしていますか?
レシピを開く次のステップ
エージェントが使用する API キーを作成します
プロンプトの実行、テスト イベントの送信、最初のダッシュボードの確認には無料プランで十分です。
関連ページ