Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

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

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

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

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

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

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

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

對於自定義代碼跟踪,性能監控會自動記錄默認屬性(常見元數據,如國家/地區、瀏覽器、頁面 URL 等),以便您可以在 Firebase 控制台中過濾跟踪數據。您還可以添加和監控自定義屬性(例如,遊戲級別或用戶屬性)。

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

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

添加自定義代碼跟踪

使用性能監控跟踪 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();

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

除了性能監控跟踪 API 之外,您還可以使用瀏覽器的本機用戶計時 API添加自定義代碼跟踪。使用此 API 測量的跟踪持續時間由性能監控 SDK 自動獲取。如果您希望異步加載性能監控 SDK,則使用 User Timing API 特別有用。初始化 SDK 後,SDK 將記錄在其加載之前發生的測量。

要使用此功能,請使用 User Timing 標記包裝您要跟踪的代碼:

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 時,無法將自定義指標和屬性添加到自定義代碼跟踪中。如果要將這些自定義元素添加到自定義代碼跟踪,請使用性能監控跟踪 API

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

使用性能監控跟踪 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;
}

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

使用性能監控跟踪 API將自定義屬性添加到自定義代碼跟踪。

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

請注意以下事項:

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

    • 沒有前導或尾隨空格,沒有前導下劃線 ( _ ) 字符
    • 沒有空間
    • 最大長度為 32 個字符
    • 名稱的允許字符是AZaz_
  • 每個自定義代碼跟踪最多可以記錄 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();

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

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

跟踪儀表板中的特定指標

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

Firebase 性能監控儀表板中的指標板圖像

要將指標添加到您的指標板,請執行以下步驟:

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

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

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

查看痕跡及其數據

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

性能監控在 Firebase 控制台中提供了一個故障排除頁面,該頁面突出顯示了指標更改,從而可以輕鬆快速地解決並最大限度地減少性能問題對您的應用和用戶的影響。當您了解潛在的性能問題時,您可以使用故障排除頁面,例如,在以下情況下:

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

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

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

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

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

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

下一步

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

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

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