為特定應用代碼添加自定義監控

性能監控收集跟踪以幫助您監控應用程序的性能。跟踪是應用程序中兩個時間點之間捕獲的性能數據的報告。

您可以創建自己的跟踪以監控與應用中特定代碼關聯的性能數據。使用自定義代碼跟踪，您可以測量您的應用程序完成特定任務或一組任務所需的時間，例如加載一組圖像或查詢數據庫。

自定義代碼跟踪的默認指標是其“持續時間”（跟踪的起點和停止點之間的時間），但您也可以添加自定義指標。

在您的代碼中，您使用 Performance Monitoring SDK 提供的 API 定義自定義代碼跟踪的開始和結束。自定義代碼跟踪可以在創建後隨時啟動，並且它們是線程安全的。

由於為這些跟踪收集的默認指標是“持續時間”，因此有時將它們稱為“持續時間跟踪”。

您可以在跟踪表的自定義跟踪子選項卡中查看來自這些跟踪的數據，該子選項卡位於性能儀表板的底部（稍後將在本頁了解有關使用控制台的更多信息）。

默認屬性、自定義屬性和自定義指標

您可以進一步配置自定義代碼跟踪以記錄跟踪範圍內發生的與性能相關的事件的自定義指標。例如，您可以為緩存命中和未命中次數或 UI 在一段明顯的時間段內變得無響應的次數創建自定義指標。

自定義屬性和自定義指標與跟踪的默認屬性和默認指標一起顯示在 Firebase 控制台中。

添加自定義代碼跟踪

使用性能監控跟踪 API添加自定義代碼跟踪以監控特定應用程序代碼。

請注意以下事項：

• 一個應用程序可以有多個自定義代碼跟踪。
• 可以同時運行多個自定義代碼跟踪。
• 自定義代碼跟踪的名稱必須滿足以下要求：沒有前導或尾隨空格，沒有前導下劃線 ( _ ) 字符，最大長度為 100 個字符。
• 自定義代碼跟踪支持添加自定義指標和自定義屬性。

要啟動和停止自定義代碼跟踪，請使用類似於以下的代碼行包裝要跟踪的代碼：

import { trace } from "firebase/performance";

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

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

t.stop();
perf_add_custom_trace.js

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

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

trace.stop();
index.js

使用 User Timing API 添加自定義代碼跟踪

除了 Performance Monitoring Trace API 之外，您還可以使用瀏覽器的本機User Timing API添加自定義代碼跟踪。 Performance Monitoring SDK 會自動獲取使用此 API 測量的跟踪持續時間。如果您更喜歡異步加載 Performance Monitoring SDK，使用 User Timing API 特別有用。 SDK 初始化後，SDK 將記錄加載之前發生的測量。

要使用此功能，請將要跟踪的代碼用用戶計時標記包裝起來：

const performance = window.performance;

performance.mark("measurementStart");

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

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

const performance = window.performance;

performance.mark("measurementStart");

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

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

請注意，上面示例中的performance指的是瀏覽器的window.performance對象。

使用 User Timing API 時，無法將自定義指標和屬性添加到自定義代碼跟踪中。如果您想將這些自定義元素添加到自定義代碼跟踪中，請使用性能監控跟踪 API 。

將自定義指標添加到自定義代碼跟踪

使用 Performance Monitoring Trace API將自定義指標添加到自定義代碼跟踪中。

請注意以下事項：

• 自定義指標的名稱必須滿足以下要求：沒有前導或尾隨空格，沒有前導下劃線 ( _ ) 字符，最大長度為 100 個字符。
• 每個自定義代碼跟踪最多可以記錄 32 個指標（包括默認的Duration指標）。

要添加自定義指標，請在每次事件發生時添加一行類似於以下內容的代碼。例如，此自定義指標計算您的應用中發生的與性能相關的事件。

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;
}
perf_add_custom_metrics.js

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;
}
index.js

為自定義代碼跟踪創建自定義屬性

使用Performance Monitoring Trace API將自定義屬性添加到自定義代碼跟踪。

要使用自定義屬性，請將代碼添加到定義屬性並將其與特定自定義代碼跟踪相關聯的應用程序。您可以在跟踪開始和跟踪停止之間的任何時間設置自定義屬性。

請注意以下事項：

• 自定義屬性的名稱必須滿足以下要求：

  • 沒有前導或尾隨空格，沒有前導下劃線 ( _ ) 字符
  • 沒有空間
  • 最大長度為 32 個字符
  • 允許的名稱字符為AZ 、 az和_ 。

• 每個自定義代碼跟踪最多可以記錄 5 個自定義屬性。

• 請確保自定義屬性不包含任何可向 Google 識別個人身份的信息。

  了解有關此指南的更多信息

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();
perf_add_custom_attributes.js

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();
index.js

跟踪、查看和過濾性能數據

要查看實時性能數據，請確保您的應用使用與實時數據處理兼容的性能監控 SDK 版本。了解有關實時性能數據的更多信息。

跟踪儀表板中的特定指標

要了解您的關鍵指標的趨勢，請將它們添加到績效儀表板頂部的指標板。您可以通過查看每週的更改或驗證代碼中最近的更改是否正在提高性能來快速識別回歸。

要將指標添加到指標板，請執行以下步驟：

1. 轉到 Firebase 控制台中的性能儀表板。
2. 單擊一個空的指標卡，然後選擇一個現有指標以添加到您的看板。
3. 單擊填充的指標卡上的more_vert以獲得更多選項，例如替換或刪除指標。

指標板以圖形形式和數字百分比變化顯示隨時間收集的指標數據。

了解有關使用儀表板的更多信息。

查看痕跡及其數據

要查看您的跟踪記錄，請轉到 Firebase 控制台中的性能儀表板，向下滾動到跟踪記錄表，然後單擊相應的子選項卡。該表顯示了每個跟踪的一些主要指標，您甚至可以按特定指標的百分比變化對列表進行排序。

Performance Monitoring 在 Firebase 控制台中提供了一個故障排除頁面，其中突出顯示了指標變化，使您可以輕鬆快速地解決性能問題並將其對您的應用和用戶的影響降至最低。當您了解潛在的性能問題時，例如在以下情況下，您可以使用故障排除頁面：

• 您在儀表板上選擇相關指標，您會注意到一個大的增量。
• 在跟踪表中，您排序以在頂部顯示最大的增量，並且您會看到顯著的百分比變化。
• 您會收到一封電子郵件警報，通知您存在性能問題。

您可以通過以下方式訪問故障排除頁面：

• 在指標儀表板上，單擊查看指標詳細信息按鈕。
• 在任何指標卡上，選擇more_vert => View details 。故障排除頁面顯示有關您選擇的指標的信息。
• 在跟踪表中，單擊跟踪名稱或與該跟踪關聯的行中的任何指標值。
• 在電子郵件警報中，單擊立即調查。

當您單擊跟踪表中的跟踪名稱時，您可以深入了解感興趣的指標。單擊Filter add按鈕以按屬性過濾數據，例如：

• 按頁面 URL過濾以查看您網站特定頁面的數據
• 按有效連接類型過濾以了解 3g 連接如何影響您的應用
• 按國家/地區過濾以確保您的數據庫位置不影響特定區域

了解有關查看跟踪數據的更多信息。

下一步

• 了解有關使用屬性檢查性能數據的更多信息。

• 詳細了解如何在 Firebase 控制台中跟踪性能問題。

• 為降低應用程序性能的代碼更改設置警報。例如，如果特定自定義代碼跟踪的持續時間超過您設置的閾值，您可以為您的團隊配置電子郵件警報。