功能推出的性能監控

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

一、概述

在此 Codelab 中,您將了解如何在功能推出期間監控應用的性能。我們的示例應用程序將具有基本功能,並設置為根據 Firebase 遠程配置標誌顯示不同的背景圖像。我們將通過檢測跟踪來監控應用程序的性能,對應用程序進行配置更改,監控效果並了解如何提高性能。

你會學到什麼

  • 如何將 Firebase 性能監控添加到您的移動應用程序以獲取開箱即用的指標(例如應用程序啟動時間和緩慢或凍結的幀)
  • 如何添加自定義跟踪以了解用戶旅程的關鍵代碼路徑
  • 如何使用性能監控儀表板來了解您的指標並跟踪重要更改,例如功能的推出
  • 如何設置性能警報以監控您的關鍵指標
  • 如何推出 Firebase 遠程配置更改

先決條件

  • Android Studio 4.0 或更高版本
  • API 級別 16 或更高級別的 Android 模擬器。
  • Java 版本 8 或更高版本
  • Firebase 遠程配置的基本了解

2.設置示例項目

下載代碼

運行以下命令以克隆此 Codelab 的示例代碼。這將在您的機器上創建一個名為codelab-perf-rc-android的文件夾:

$ git clone https://github.com/FirebaseExtended/codelab-feature-rollout-performance.git

如果你的機器上沒有 Git,你也可以直接從 GitHub 下載代碼。

firebase-perf-rc-android-start文件夾下的項目導入 Android Studio。您可能會看到一些運行時異常,或者可能會看到有關丟失google-services.json文件的警告。我們將在下一節中更正這一點。

在此 Codelab 中,您將使用Firebase Assistant插件將您的 Android 應用註冊到 Firebase 項目,並將必要的 Firebase 配置文件、插件和依賴項添加到您的 Android 項目中——所有這些都來自 Android Studio

將您的應用連接到 Firebase

  1. 轉到Android Studio /幫助>檢查更新以確保您使用的是最新版本的 Android Studio 和 Firebase 助手。
  2. 選擇工具> Firebase以打開助手窗格。

c0e42ef063d21eab.png

  1. 選擇Performance Monitoring以添加到您的應用程序,然後單擊Get started with Performance Monitoring
  2. 單擊Connect to Firebase以將您的 Android 項目與 Firebase 連接(這將在您的瀏覽器中打開 Firebase 控制台)
  3. 在 Firebase 控制台中,點擊Add project ,然後輸入 Firebase 項目名稱(如果您已有 Firebase 項目,則可以選擇該現​​有項目) 。點擊繼續並接受條款以創建 Firebase 項目和新的 Firebase 應用。

接下來,您應該會看到一個對話框,將您的新 Firebase 應用程序連接到您的 Android Studio 項目。

51a549ebde2fe57a.png

  1. 單擊連接
  2. 打開安卓工作室。在助手窗格中,您將看到您的應用已連接到 Firebase 的確認信息。

40c24c4a56a45990.png

將性能監控添加到您的應用程序

在 Android Studio 的Assistant窗格中,單擊Add Performance Monitoring to your app

您應該會看到一個接受更改的對話框,之後 Android Studio 應該同步您的應用程序以確保已添加所有必要的依賴項。

3046f3e1f5fea06f.png

最後,您應該會在 Android Studio 的助手窗格中看到所有依賴項都已正確設置的成功消息。

62e79fd18780e320.png

作為附加步驟,請按照步驟“(可選)啟用調試日誌記錄”中的說明啟用調試日誌記錄。公共文檔中也提供了相同的說明。

3. 運行應用程序

您現在應該在應用程序的模塊(應用程序級)目錄中看到google-services.json文件,並且您的應用程序現在應該可以編譯了。在 Android Studio 中,單擊Run > Run 'app'以在您的 Android 模擬器上構建和運行應用程序。

當應用程序運行時,您應該首先看到如下所示的啟動畫面:

ffbd413a6983b205.png

然後,幾秒鐘後,帶有默認圖像的主頁將顯示:

d946cab0df319e50.png

引擎蓋下發生了什麼?

啟動畫面在SplashScreenActivity中實現,並執行以下操作:

  1. onCreate()中,我們初始化 Firebase 遠程配置設置並獲取您稍後將在此代碼實驗室的遠程配置儀表板中設置的配置值。
  2. executeTasksBasedOnRC()中,我們讀取了seasonal_image_url標誌的配置值。如果配置值提供了 URL,我們會同步下載圖像。
  3. 下載完成後,應用程序導航到MainActivity並調用finish()以結束SplashScreenActivity

MainActivity中,如果通過 Remote Config 定義了seasonal_image_url ,將啟用該功能,並將下載的圖像顯示為主頁的背景。否則,將顯示默認圖像(如上所示)。

4.設置遠程配置

現在您的應用程序正在運行,您可以設置新功能標誌。

  1. Firebase 控制台的左側面板中,找到Engage部分,然後單擊Remote Config
  2. 單擊創建配置按鈕以打開配置表單並添加seasonal_image_url作為參數鍵。
  3. 單擊添加描述,然後輸入此描述: Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. 單擊Add new -> Conditional value -> Create new condition
  5. 對於條件名稱,輸入Seasonal image rollout
  6. 對於Applies if...部分,選擇User in random percentile <= 0%(您希望禁用該功能,直到您準備好在後續步驟中推出。)
  7. 單擊創建條件。稍後您將使用此條件向您的用戶推出新功能。

7a07526eb9e81623.png

  1. 打開Create your first parameter 表單並找到Value for Seasonal image rollout字段。輸入將下載季節性圖像的 URL: https://images.unsplash.com/photo-1552691021-7043334e0b51 ://images.unsplash.com/photo-1552691021-7043334e0b51
  2. 將默認值保留為空字符串。這意味著將顯示代碼庫中的默認圖像,而不是從 URL 下載的圖像。
  3. 單擊保存

99e6cd2ebcdced.png

您可以看到新配置已創建為草稿。

  1. 單擊發布更改並確認頂部的更改以更新您的應用程序。

39cd3e96d370c7ce.png

5.增加數據加載時間監控

您的應用會在顯示MainActivity之前預加載一些數據並顯示啟動屏幕以隱藏此過程。您不希望您的用戶在此屏幕上等待太久,因此通常監控啟動屏幕的顯示時間是有益的。

Firebase 性能監控提供了一種方法來做到這一點。您可以使用自定義代碼跟踪來監控應用程序中特定代碼的性能——例如數據的加載時間和新功能的處理時間。

要跟踪啟動畫面的顯示時間,您將向SplashScreenActivity添加自定義代碼跟踪,這是實現啟動畫面的Activity

  1. 初始化、創建和啟動名為splash_screen_trace的自定義代碼跟踪:

SplashScreenActivity.java

// ...
import com.google.firebase.perf.FirebasePerformance;
import com.google.firebase.perf.metrics.Trace;
// ...

public class SplashScreenActivity extends AppCompatActivity {

    private static final String TAG = "SplashScreenActivity";
    private static final String SEASONAL_IMAGE_URL_RC_FLAG = "seasonal_image_url";

    // TODO: Initialize splash_screen_trace
    private final Trace splashScreenTrace = FirebasePerformance.startTrace("splash_screen_trace");
    
    // ...
}
  1. SplashScreenActivityonDestroy()方法中結束跟踪:

SplashScreenActivity.java

@Override
protected void onDestroy() {
    super.onDestroy();

    // TODO: Stop the splash_screen_trace here
    splashScreenTrace.stop();
}

由於您的新功能會下載並處理圖像,因此您將添加第二個自定義代碼跟踪,以跟踪您的功能添加到SplashScreenActivity的額外時間。

  1. 初始化、創建和啟動名為splash_seasonal_image_processing的自定義代碼跟踪:

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    if (!seasonalImageUrl.isEmpty()) {
        // TODO: Start the splash_seasonal_image_processing here
        final Trace seasonalImageProcessingTrace = FirebasePerformance
            .startTrace("splash_seasonal_image_processing");

        // ...
    }
}
  1. RequestListeneronLoadFailed()onResourceReady()方法中結束跟踪:

SplashScreenActivity.java

Glide.with(SplashScreenActivity.this.getApplicationContext())
    .asBitmap()
    .load(seasonalImageUrl)
    .signature(new ObjectKey(Utils.getCacheUUID()))
    .listener(new RequestListener<Bitmap>() {
        @Override
        public boolean onLoadFailed(
            @Nullable GlideException e,
            Object model, Target<Bitmap> target,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }

        @Override
        public boolean onResourceReady(Bitmap resource, Object model,
            Target<Bitmap> target, DataSource dataSource,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }
     })
     .preload();

現在您已經添加了自定義代碼跟踪來跟踪初始屏幕持續時間 ( splash_screen_trace)和新功能的處理時間 ( splash_seasonal_image_processing ),再次在 Android Studio 中運行該應用程序。您應該會看到一條日誌消息,其中包含Logging trace metric: splash_screen_trace ,後跟跟踪的持續時間。您不會看到splash_seasonal_image_processing的日誌消息,因為您尚未啟用新功能。

6.添加自定義屬性到trace

對於自定義代碼跟踪,性能監控會自動記錄默認屬性(常見元數據,如應用版本、國家/地區、設備等),以便您可以在Firebase 控制台中過濾跟踪數據。您還可以添加和監控自定義屬性

在您的應用中,您剛剛添加了兩個自定義代碼跟踪來監控初始屏幕持續時間和新功能的處理時間。可能影響這些持續時間的一個因素是顯示的圖像是默認圖像還是必須從 URL 下載圖像。誰知道呢——你最終可能有不同的 URL 來下載圖像。

因此,讓我們將表示季節性圖像 URL 的自定義屬性添加到這些自定義代碼跟踪中。這樣,您以後可以按這些值過濾持續時間數據。

  1. executeTasksBasedOnRC方法的開頭為splash_screen_trace添加自定義屬性 ( seasonal_image_url_attribute ):

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_screen_trace
    if (seasonalImageUrl.isEmpty()) {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", "unset");
    } else {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
    }

    // ...
}
  1. startTrace("splash_seasonal_image_processing")調用之後為splash_seasonal_image_processing添加相同的自定義屬性:

SplashScreenActivity.java

if (!seasonalImageUrl.isEmpty()) {
    // TODO: Start the splash_seasonal_image_processing here
    final Trace seasonalImageProcessingTrace = FirebasePerformance
        .startTrace("splash_seasonal_image_processing");

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_seasonal_image_processing
    seasonalImageProcessingTrace
        .putAttribute("seasonal_image_url_attribute", seasonalImageUrl);

    // ...
}

現在您已經為兩個自定義跟踪( splash_screen_tracesplash_seasonal_image_processing )添加了一個自定義屬性( seasonal_image_url_attribute ),再次在Android Studio 中運行該應用程序。您應該看到一條日誌消息,其中包含Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'.您尚未啟用遠程配置參數seasonalImageUrl ,這就是屬性值未unset的原因。

性能監控 SDK 將收集跟踪數據並將其發送到 Firebase。您可以在 Firebase 控制台的Performance Dashboard中查看數據,我們將在 codelab 的下一步中詳細說明。

7. 配置您的性能監控儀表板

配置儀表板以監控您的功能

Firebase 控制台中,選擇包含您的 Friendly Eats 應用的項目。

在左側面板中,找到Release & Monitor部分,然後單擊Performance

您應該在指標板上看到您的性能儀表板以及您的第一個數據點!性能監控 SDK 從您的應用程序收集性能數據並在收集後的幾分鐘內顯示出來。

f57e5450b70034c9.png

您可以在此指標板上跟踪應用的關鍵指標。默認視圖包括應用程序啟動時間跟踪的持續時間,但您可以添加您最關心的指標。由於您正在跟踪添加的新功能,因此您可以定制儀表板以顯示自定義代碼跟踪splash_screen_trace的持續時間。

  1. 單擊其中一個空白選擇指標框。
  2. 在對話框窗口中,選擇自定義跟踪的跟踪類型和跟踪名稱splash_screen_trace

1fb81f4dba3220e0.png

  1. 單擊Select metric ,您應該會看到splash_screen_trace的持續時間已添加到您的儀表板!

您可以使用這些相同的步驟來添加您關心的其他指標,以便您可以快速查看它們的性能如何隨時間變化,甚至在不同版本的情況下也是如此。

1d465c021e58da3b.png

指標板是跟踪用戶體驗的關鍵指標性能的強大工具。對於此 Codelab,您在狹窄的時間範圍內擁有一小組數據,因此您將使用其他儀表板視圖來幫助您了解功能推出的性能。

8. 推出你的功能

現在您已經設置了監控,您可以推出之前設置的 Firebase 遠程配置更改 ( seasonal_image_url)

要推出更改,您將返回 Firebase 控制台中的遠程配置頁面,以增加定位條件的用戶百分比。通常,您會向一小部分用戶推出新功能,並且只有在您確信它沒有問題時才增加它。但是,在此 Codelab 中,您是應用程序的唯一用戶,因此您可以將百分位數更改為 100%。

  1. 單擊頁面頂部的條件選項卡。
  2. 單擊您之前添加的Seasonal image rollout條件。
  3. 將百分位數更改為 100%。
  4. 單擊保存條件
  5. 單擊發布更改並確認更改。

70f993502b27e7a0.png

返回 Android Studio,在模擬器中重新啟動應用程序以查看新功能。在啟動畫面之後,您應該會看到新的空狀態主屏幕!

b0cc91b6e48fb842.png

9.檢查性能變化

現在讓我們使用 Firebase 控制台中的性能儀表板檢查啟動屏幕加載的性能。在代碼實驗室的這一步中,您將使用儀表板的不同部分來查看性能數據。

  1. 在主儀表板選項卡上,向下滾動到跟踪表,然後單擊自定義跟踪選項卡。在此表中,您將看到您之前添加的自定義代碼跟踪以及一些開箱即用的跟踪
  2. 現在您已經啟用了新功能,請查找自定義代碼跟踪splash_seasonal_image_processing ,它測量了下載和處理圖像所花費的時間。從跟踪的Duration值可以看出,此下載和處理需要大量時間。

439adc3ec71805b7.png

  1. 由於您有splash_seasonal_image_processing的數據,因此您可以將此跟踪的持續時間添加到儀表板選項卡頂部的指標板上。

與之前類似,單擊其中一個空的Select a metric框。在對話框窗口中,選擇跟踪類型Custom traces和跟踪名稱splash_seasonal_image_processing 。最後,單擊選擇指標將此指標添加到指標板。

7fb64d2340410576.png

  1. 要進一步確認差異,您可以仔細查看splash_screen_trace的數據。單擊指標板中的splash_screen_trace卡,然後單擊View metric details

b1c275c30679062a.png

  1. 在詳細信息頁面中,您將在左下方看到屬性列表,包括您之前創建的自定義屬性。單擊自定義屬性seasonal_image_url_attribute以查看右側每個季節性圖像URL 的初始屏幕持續時間:

8fa1a69019bb045e.png

  1. 您的初始屏幕持續時間值可能與上面的屏幕截圖中的值有些不同,但是從 URL 下載圖像而不是使用默認圖像(由“未設置”表示)時,您應該有更長的持續時間

在本 Codelab 中,持續時間較長的原因可能很簡單,但在實際應用中,可能並不那麼明顯。收集的時長數據將來自不同的設備,在各種網絡連接條件下運行應用程序,這些條件可能比您的預期更差。讓我們看看如果這是真實世界的情況,您將如何調查此問題。

  1. 單擊頁面頂部的Performance以返回Dashboard主選項卡: 640b696b79d90103.png
  2. 在頁面底部的跟踪表中,單擊網絡請求選項卡。在此表中,您將看到來自您應用的所有網絡請求都聚合到 URL 模式中,包括images.unsplash.com/** URL 模式。如果將此響應時間的值與圖像下載和處理所需的總時間(即splash_seasonal_image_processing跟踪的持續時間)進行比較,您可以看到大量時間用於下載圖像。

6f92ce0f23494507.png

績效調查結果

使用 Firebase 性能監控,您發現啟用新功能後對最終用戶的影響如下:

  1. 花在SplashScreenActivity上的時間增加了。
  2. splash_seasonal_image_processing的持續時間非常長。
  3. 延遲是由於圖像下載的響應時間和圖像所需的相應處理時間。

在下一步中,您將通過回滾功能並確定如何改進功能的實現來減輕對性能的影響。

10.回滾功能

在初始屏幕期間增加用戶的等待時間是不可取的。遠程配置的主要優勢之一是能夠暫停和逆轉您的部署,而無需向您的用戶發布另一個版本。這使您可以快速響應問題(例如您在上一步中發現的性能問題)並最大限度地減少不滿意的用戶數量。

作為一種快速緩解措施,您將推出百分位數重置為0 ,以便您的所有用戶將再次看到默認圖像:

  1. 返回 Firebase 控制台中的遠程配置頁面
  2. 單擊頁面頂部的條件
  3. 單擊您之前添加的Seasonal image rollout條件。
  4. 將百分位數更改為0%。
  5. 單擊保存條件
  6. 單擊發布更改並確認更改。

18c4f1cbac955a04.png

在 Android Studio 中重新啟動應用程序,您應該會看到原始的空狀態主屏幕:

d946cab0df319e50.png

11.修復性能問題

您之前在代碼實驗室中發現,為您的初始屏幕下載圖像會導致您的應用程序變慢。仔細查看下載的圖像,您會發現您使用的是圖像的原始分辨率,超過 2MB!解決性能問題的一種快速方法是將質量降低到更合適的分辨率,以減少下載圖像的時間。

再次推出遠程配置值

  1. 返回 Firebase 控制台中的遠程配置頁面
  2. 單擊seasonal_image_url參數的編輯圖標。
  3. Seasonal image rollout 的值更新為https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 ,然後單擊Save

828dd1951a2ec4a4.png

  1. 單擊頁面頂部的條件選項卡。
  2. 單擊Seasonal image rollout ,然後將百分位數設置回 100%。
  3. 單擊保存條件

1974fa3bb789f36c.png

  1. 單擊發布更改按鈕。

12. 測試修復並設置警報

在本地運行應用程序

將新配置值設置為使用不同的下載圖像 URL,再次運行應用程序。這一次,您應該注意到花在啟動畫面上的時間比以前短了。

b0cc91b6e48fb842.png

查看更改的性能

返回 Firebase 控制台中的性能信息中心,查看指標的外觀。

  1. 這次您將使用跟踪表導航到詳細信息頁面。在跟踪表的下方,在自定義跟踪選項卡中,單擊自定義跟踪splash_seasonal_image_processing以再次查看其持續時間指標的更詳細視圖。

2d7aaca03112c062.png

  1. 單擊自定義屬性seasonal_image_url_attribute再次查看自定義屬性的細分。如果將鼠標懸停在 URL 上,您將看到與縮小圖像的新 URL 匹配的值: https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 ://images.unsplash.com/photo-1552691021-7043334e0b51?w=640(帶有?w=640在最後)。與此圖像關聯的持續時間值比前一個圖像的值要短得多,並且更容易為您的用戶所接受!

10e30c037a4237a2.png

  1. 現在您已經改進了初始屏幕的性能,您可以設置警報以在跟踪超過您設置的閾值時通知您。打開Performance儀表板並單擊splash_screen_trace的溢出菜單(三個點)圖標,然後單擊Alert settings

4bd0a2a1faa14479.png

  1. 單擊切換以啟用持續時間警報。將閾值設置為略高於您看到的值,這樣如果您的splash_screen_trace超過閾值,您將收到一封電子郵件。
  1. 單擊保存以創建警報。向下滾動到跟踪表,然後單擊自定義跟踪選項卡以查看您的警報已啟用!

2bb93639e2218d1.png

13. 恭喜!

恭喜!您啟用了 Firebase 性能監控 SDK 並收集了跟踪來衡量新功能的性能!您監控了新功能推出的關鍵性能指標,並在發現性能問題時迅速做出反應。這一切都可以通過遠程配置進行配置更改並實時監控性能問題來實現。

我們涵蓋的內容

  • 將 Firebase 性能監控 SDK 添加到您的應用
  • 將自定義代碼跟踪添加到您的代碼以測量特定功能
  • 設置遠程配置參數和條件值以控制/推出新功能
  • 了解如何使用性能監控儀表板在推出期間識別問題
  • 設置性能警報以在您的應用程序的性能超過您設置的閾值時通知您

學到更多