功能推出的性能监控

1. 概述

在此 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 项目,并向您的 Android 项目添加必要的 Firebase 配置文件、插件和依赖项 -全部都在 Android Studio 中完成

将您的应用连接到 Firebase

  1. 转到Android Studio /帮助>检查更新,确保您使用的是最新版本的 Android Studio 和 Firebase Assistant。
  2. 选择“工具” > “Firebase”以打开“助手”窗格。

c0e42ef063d21eab.png

  1. 选择要添加到您的应用程序的性能监控,然后单击性能监控入门
  2. 单击“连接到 Firebase”以将您的 Android 项目与 Firebase 连接(这将在浏览器中打开 Firebase 控制台)
  3. 在 Firebase 控制台中,点击添加项目,然后输入 Firebase 项目名称(如果您已有 Firebase 项目,则可以选择该现有项目) 。单击继续并接受条款以创建 Firebase 项目和新的 Firebase 应用。

接下来您应该会看到一个对话框,用于将新的 Firebase 应用程序连接到您的 Android Studio 项目。

51a549ebde2fe57a.png

  1. 单击“连接”
  2. 打开 Android Studio。在“助理”窗格中,您将看到您的应用程序已连接到 Firebase 的确认信息。

40c24c4a56a45990.png

将性能监控添加到您的应用程序

在 Android Studio 的“助手”窗格中,单击“将性能监控添加到您的应用程序”

您应该会看到一个接受更改的对话框,之后 Android Studio 应该同步您的应用程序以确保已添加所有必要的依赖项。

3046f3e1f5fea06f.png

最后,您应该在 Android Studio 的“助手”窗格中看到成功消息,表明所有依赖项均已正确设置。

62e79fd18780e320.png

作为附加步骤,请按照“(可选)启用调试日志记录”步骤中的说明启用调试日志记录。公共文档中也提供了相同的说明。

3.运行应用程序

您现在应该在应用程序的模块(应用程序级)目录中看到google-services.json文件,并且您的应用程序现在应该可以编译。在 Android Studio 中,单击运行>运行“应用程序”以在 Android 模拟器上构建并运行应用程序。

当应用程序运行时,您应该首先看到如下所示的启动屏幕:

ffbd413a6983b205.png

然后,几秒钟后,将显示带有默认图像的主页:

d946cab0df319e50.png

幕后发生了什么?

启动画面在SplashScreenActivity中实现,并执行以下操作:

  1. onCreate()中,我们初始化 Firebase 远程配置设置并获取您稍后将在本 Codelab 的远程配置仪表板中设置的配置值。
  2. executeTasksBasedOnRC()中,我们读取seasonal_image_url标志的配置值。如果配置值提供了 URL,我们会同步下载图像。
  3. 下载完成后,应用程序将导航到MainActivity并调用finish()来结束SplashScreenActivity

MainActivity中,如果通过远程配置定义了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. 单击新增->条件值->创建新条件
  5. 对于条件名称,输入Seasonal image rollout
  6. 对于Applies if...部分,选择User in random percentile <= 0%(您希望将该功能保持禁用状态,直到准备好在后续步骤中推出为止。)
  7. 单击创建条件。稍后您将使用此条件向您的用户推出新功能。

7a07526eb9e81623.png

  1. 打开“创建您的第一个参数”表单并找到“季节性图像值”卷展栏字段。输入将下载季节性图像的 URL: https://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. 向跟踪添加自定义属性

对于自定义代码跟踪,性能监控会自动记录默认属性(常见元数据,如应用版本、国家/地区、设备等),以便您可以在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 控制台的性能仪表板中查看数据,我们将在 Codelab 的下一步中详细解释。

7. 配置您的性能监控仪表板

配置您的仪表板以监控您的功能

Firebase 控制台中,选择包含您的 Friendship 应用的项目。

在左侧面板中,找到“发布和监控”部分,然后单击“性能”

您应该会在指标板中看到您的绩效仪表板,其中包含您的第一个数据点!性能监控 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 控制台中的性能仪表板来检查启动屏幕加载的性能。在 Codelab 的这一步中,您将使用仪表板的不同部分来查看性能数据。

  1. 在主仪表板选项卡上,向下滚动到跟踪表,然后单击自定义跟踪选项卡。在此表中,您将看到之前添加的自定义代码跟踪以及一些现成的跟踪
  2. 现在您已经启用了新功能,请查找自定义代码跟踪splash_seasonal_image_processing ,它测量下载和处理图像所需的时间。从跟踪的持续时间值中,您可以看到此下载和处理需要大量时间。

439adc3ec71805b7.png

  1. 由于您有splash_seasonal_image_processing的数据,因此您可以将此跟踪的持续时间添加到“仪表板”选项卡顶部的指标板中。

与之前类似,单击空的“选择指标”框之一。在对话框窗口中,选择跟踪类型“自定义跟踪”和跟踪名称splash_seasonal_image_processing 。最后,单击选择指标将此指标添加到指标板。

7fb64d2340410576.png

  1. 为了进一步确认差异,您可以仔细查看splash_screen_trace的数据。单击指标板中的splash_screen_trace卡,然后单击查看指标详细信息

b1c275c30679062a.png

  1. 在详细信息页面中,您将在左下角看到属性列表,包括您之前创建的自定义属性。单击自定义属性seasonal_image_url_attribute可在右侧查看每个季节性图像URL的启动屏幕持续时间:

8fa1a69019bb045e.png

  1. 您的初始屏幕持续时间值可能与上面的屏幕截图中的值略有不同,但与使用默认图像(由“未设置”表示)相比,从 URL 下载图像时的持续时间应该更长

在此 Codelab 中,持续时间较长的原因可能很简单,但在实际应用中,可能并不那么明显。收集的持续时间数据将来自不同的设备,在各种网络连接条件下运行应用程序,这些条件可能比您的预期更糟糕。让我们看看如果这是真实情况,您将如何调查此问题。

  1. 单击页面顶部的“性能”返回到“仪表板”主选项卡: 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.修复性能问题

您之前在 Codelab 中发现,为启动画面下载图像会导致应用速度变慢。仔细查看下载的图像,您会发现您使用的是图像的原始分辨率,超过 2MB!解决性能问题的一种快速解决方法是将质量降低到更合适的分辨率,以便减少下载图像的时间。

再次推出远程配置值

  1. 返回 Firebase 控制台中的远程配置页面
  2. 单击seasonal_image_url参数的编辑图标。
  3. “季节性图像”卷展栏的值更新为https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 ,然后单击“保存”

828dd1951a2ec4a4.png

  1. 单击页面顶部的“条件”选项卡。
  2. 单击“季节性图像”卷展栏,然后将百分位数设置回 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 ?w=640(带有?w=640在最后)。与此图像关联的持续时间值比前一个图像的值要短得多,并且更容易被用户接受!

10e30c037a4237a2.png

  1. 现在您已经改进了初始屏幕的性能,您可以设置警报,以便在跟踪超过您设置的阈值时通知您。打开性能仪表板,单击splash_screen_trace的溢出菜单(三点)图标,然后单击警报设置

4bd0a2a1faa14479.png

  1. 单击切换开关以启用持续时间警报。将阈值设置为略高于您看到的值,这样如果您的splash_screen_trace超过阈值,您将收到一封电子邮件。
  1. 单击“保存”以创建您的警报。向下滚动到跟踪表,然后单击“自定义跟踪”选项卡即可看到您的警报已启用!

2bb93639e2218d1.png

13. 恭喜!

恭喜!您启用了 Firebase 性能监控 SDK 并收集了跟踪来衡量新功能的性能!您监控新功能推出的关键性能指标,并在发现性能问题时迅速做出反应。这一切都可以通过远程配置进行配置更改并实时监控性能问题来实现。

我们涵盖的内容

  • 将 Firebase 性能监控 SDK 添加到您的应用
  • 将自定义代码跟踪添加到您的代码中以测量特定功能
  • 设置远程配置参数和条件值以控制/推出新功能
  • 了解如何使用性能监控仪表板来识别部署期间的问题
  • 设置性能警报,以便在应用程序的性能超过您设置的阈值时通知您

了解更多