功能推出的性能监控

一、概述

在此 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 添加到您的应用
  • 将自定义代码跟踪添加到您的代码以测量特定功能
  • 设置远程配置参数和条件值以控制/推出新功能
  • 了解如何使用性能监控仪表板在推出期间识别问题
  • 设置性能警报以在您的应用程序的性能超过您设置的阈值时通知您

学到更多