特定のアプリコードのカスタムモニタリングを追加する

Performance Monitoringは、アプリのパフォーマンスを監視するのに役立つトレースを収集します。トレースは、アプリの2つの時点の間にキャプチャされたパフォーマンスデータのレポートです。

独自のトレースを作成して、アプリ内の特定のコードに関連付けられたパフォーマンスデータを監視できます。カスタムコードトレースを使用すると、アプリが特定のタスクまたは一連のタスクを完了するのにかかる時間を測定できます。たとえば、一連の画像の読み込みやデータベースへのクエリなどです。

カスタムコードトレースのデフォルトのメトリックはその「期間」(トレースの開始点と停止点の間の時間)ですが、カスタムメトリックを追加することもできます。

コードでは、Performance Monitoring SDKによって提供されるAPIを使用して、カスタムコードトレースの開始と終了を定義します。カスタムコードトレースは、作成後いつでも開始でき、スレッドセーフです。

これらのトレースに対して収集されるデフォルトのメトリックは「期間」であるため、「期間トレース」と呼ばれることもあります。

これらのトレースのデータは、パフォーマンスダッシュボードの下部にあるトレーステーブルの[カスタムトレース]サブタブで表示できます(コンソールの使用について詳しくは、このページの後半を参照してください)。

デフォルト属性、カスタム属性、およびカスタムメトリック

カスタムコードトレースの場合、パフォーマンスモニタリングはデフォルトの属性(国、ブラウザ、ページURLなどの一般的なメタデータ)を自動的にログに記録するため、Firebaseコンソールでトレースのデータをフィルタリングできます。カスタム属性(ゲームレベルやユーザープロパティなど)を追加および監視することもできます。

さらに、カスタムコードトレースを構成して、トレースのスコープ内で発生するパフォーマンス関連のイベントのカスタムメトリックを記録できます。たとえば、キャッシュのヒットとミスの数、またはUIが目立った期間応答しなくなった回数のカスタムメトリックを作成できます。

カスタム属性とカスタム指標は、トレースのデフォルト属性とデフォルト指標と一緒にFirebaseコンソールに表示されます。

カスタムコードトレースを追加する

Performance Monitoring Trace APIを使用して、特定のアプリケーションコードを監視するためのカスタムコードトレースを追加します。

次の点に注意してください。

  • アプリには、複数のカスタムコードトレースを含めることができます。
  • 複数のカスタムコードトレースを同時に実行できます。
  • カスタムコードトレースの名前は、次の要件を満たしている必要があります。先頭または末尾の空白、先頭の下線( _ )文字、最大長は100文字です。
  • カスタムコードトレースは、カスタムメトリックカスタム属性の追加をサポートします。

カスタムコードトレースを開始および停止するには、トレースするコードを次のようなコード行でラップします。

Web version 9

import { trace } from "firebase/performance";

const t = trace(perf, "CUSTOM_TRACE_NAME");
t.start();

// Code that you want to trace 
// ...

t.stop();

Web version 8

const trace = perf.trace("CUSTOM_TRACE_NAME");
trace.start();

// Code that you want to trace 
// ...

trace.stop();

UserTimingAPIを使用してカスタムコードトレースを追加する

Performance Monitoring Trace APIに加えて、ブラウザのネイティブUserTimingAPIを使用してカスタムコードトレースを追加できます。このAPIを使用して測定されたトレースの期間は、PerformanceMonitoringSDKによって自動的に取得されます。 User Timing APIの使用は、PerformanceMonitoringSDKを非同期でロードする場合に特に役立ちます。 SDKが初期化されると、SDKはロード前に発生した測定値を記録します。

この機能を使用するには、トレースするコードをユーザータイミングマークでラップします。

Web version 9

const performance = window.performance;

performance.mark("measurementStart");

// Code that you want to trace 
// ...

performance.mark("measurementStop");
performance.measure("customTraceName", "measurementStart", "measurementStop");

Web version 8

const performance = window.performance;

performance.mark("measurementStart");

// Code that you want to trace 
// ...

performance.mark("measurementStop");
performance.measure("customTraceName", "measurementStart", "measurementStop");

上記の例のperformanceは、ブラウザのwindow.performanceオブジェクトを参照していることに注意してください。

User Timing APIを使用する場合、カスタムメトリックと属性をカスタムコードトレースに追加することはできません。これらのカスタム要素をカスタムコードトレースに追加する場合は、 Performance MonitoringTraceAPIを使用します。

カスタムコードトレースにカスタムメトリックを追加する

Performance Monitoring Trace APIを使用して、カスタムメトリックをカスタムコードトレースに追加します。

次の点に注意してください。

  • カスタムメトリックの名前は、次の要件を満たしている必要があります。先頭または末尾の空白、先頭の下線( _ )文字、最大長は100文字です。
  • 各カスタムコードトレースは、最大32のメトリック(デフォルトのDurationメトリックを含む)を記録できます。

カスタムメトリックを追加するには、イベントが発生するたびに、次のようなコード行を追加します。たとえば、このカスタムメトリックは、アプリで発生するパフォーマンス関連のイベントをカウントします。

Web version 9

import { trace } from "firebase/performance";

async function getInventory(inventoryIds) {
  const t = trace(perf, "inventoryRetrieval");

  // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
  t.incrementMetric("numberOfIds", inventoryIds.length);

  // Measures the time it takes to request inventory based on the amount of inventory
  t.start();
  const inventoryData = await retrieveInventory(inventoryIds);
  t.stop();

  return inventoryData;
}

Web version 8

async function getInventory(inventoryIds) {
  const trace = perf.trace("inventoryRetrieval");

  // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
  trace.incrementMetric("numberOfIds", inventoryIds.length);

  // Measures the time it takes to request inventory based on the amount of inventory
  trace.start();
  const inventoryData = await retrieveInventory(inventoryIds);
  trace.stop();

  return inventoryData;
}

カスタムコードトレースのカスタム属性を作成する

Performance Monitoring Trace APIを使用して、カスタム属性をカスタムコードトレースに追加します。

カスタム属性を使用するには、属性を定義し、それを特定のカスタムコードトレースに関連付けるコードをアプリに追加します。カスタム属性は、トレースの開始時から停止時までの間にいつでも設定できます。

次の点に注意してください。

  • カスタム属性の名前は、次の要件を満たしている必要があります。先頭または末尾の空白、先頭の下線( _ )文字、最大長は32文字です。

  • 各カスタムコードトレースは、最大5つのカスタム属性を記録できます。

  • Googleに対して個人を個人的に識別する情報を含むカスタム属性を使用しないでください。

    このガイドラインの詳細

Web version 9

import { trace } from "firebase/performance";

const t = trace(perf, "test_trace");
t.putAttribute("experiment", "A");

// Update scenario
t.putAttribute("experiment", "B");

// Reading scenario
const experimentValue = t.getAttribute("experiment");

// Delete scenario
t.removeAttribute("experiment");

// Read attributes
const traceAttributes = t.getAttributes();

Web version 8

const trace = perf.trace("test_trace");
trace.putAttribute("experiment", "A");

// Update scenario
trace.putAttribute("experiment", "B");

// Reading scenario
const experimentValue = trace.getAttribute("experiment");

// Delete scenario
trace.removeAttribute("experiment");

// Read attributes
const traceAttributes = trace.getAttributes();

パフォーマンスデータの追跡、表示、およびフィルタリング

リアルタイムのパフォーマンスデータを表示するには、アプリがリアルタイムのデータ処理と互換性のあるPerformanceMonitoringSDKバージョンを使用していることを確認してください。リアルタイムのパフォーマンスデータの詳細をご覧ください

ダッシュボードで特定の指標を追跡する

主要な指標がどのように傾向を示しているかを知るには、パフォーマンスダッシュボードの上部にある指標ボードにそれらを追加します。週ごとの変更を確認するか、コードの最近の変更によってパフォーマンスが向上していることを確認することで、リグレッションをすばやく特定できます。

FirebasePerformanceMonitoringダッシュボードの指標ボードの画像

メトリックボードにメトリックを追加するには、次の手順に従います。

  1. Firebaseコンソールのパフォーマンスダッシュボードに移動します。
  2. 空のメトリックカードをクリックしてから、既存のメトリックを選択してボードに追加します。
  3. メトリックの置換や削除など、その他のオプションについては、入力されたメトリックカードのをクリックしてください。

メトリックボードには、収集されたメトリックデータが、グラフ形式と数値のパーセンテージ変化の両方で表示されます。

ダッシュボードの使用の詳細をご覧ください。

トレースとそのデータを表示する

トレースを表示するには、Firebaseコンソールの[パフォーマンス]ダッシュボードに移動し、トレーステーブルまで下にスクロールして、適切なサブタブをクリックします。この表には、各トレースの上位のメトリックがいくつか表示され、特定のメトリックの変化率でリストを並べ替えることもできます。

パフォーマンスモニタリングは、Firebaseコンソールにメトリックの変更を強調表示するトラブルシューティングページを提供し、アプリとユーザーに対するパフォーマンスの問題の影響にすばやく対処して最小限に抑えることを容易にします。たとえば、次のシナリオで、潜在的なパフォーマンスの問題について学習するときに、トラブルシューティングページを使用できます。

  • ダッシュボードで関連するメトリックを選択すると、大きなデルタに気づきます。
  • トレーステーブルで、最大のデルタを上部に表示するように並べ替えると、大幅なパーセンテージの変化が見られます。
  • パフォーマンスの問題を通知する電子メールアラートを受け取ります。

次の方法でトラブルシューティングページにアクセスできます。

  • メトリックダッシュボードで、[メトリックの詳細を表示]ボタンをクリックします。
  • 任意のメトリックカードで、 =>詳細の表示を選択します。トラブルシューティングページには、選択したメトリックに関する情報が表示されます。
  • トレーステーブルで、トレース名またはそのトレースに関連付けられている行のメトリック値をクリックします。
  • 電子メールアラートで、[今すぐ調査]をクリックします。

トレーステーブルでトレース名をクリックすると、対象のメトリックにドリルダウンできます。 [ のフィルター]ボタンをクリックして、データを属性でフィルターします。次に例を示します。

属性でフィルタリングされているFirebasePerformanceMonitoringデータの画像
  • ページのURLでフィルタリングして、サイトの特定のページのデータを表示します
  • 効果的な接続タイプでフィルタリングして、3g接続がアプリに与える影響を確認します
  • でフィルタリングして、データベースの場所が特定の地域に影響を与えていないことを確認します

トレースのデータの表示の詳細をご覧ください

次のステップ

  • 属性を使用してパフォーマンスデータを調べる方法の詳細をご覧ください。

  • Firebaseコンソールでパフォーマンスの問題を追跡する方法の詳細をご覧ください。

  • アプリのパフォーマンスを低下させるコード変更のアラートを設定します。たとえば、特定のカスタムコードトレースの期間が設定したしきい値を超えた場合に、チームの電子メールアラートを構成できます。