监控功能发布期间的表现

监控功能发布期间的表现

关于此 Codelab

subject上次更新时间:10月 31, 2022
account_circleRaymond Lam, Yalun Qin 编写

1. 概览

在此 Codelab 中,您将学习如何在功能发布期间监控应用的性能。我们的示例应用将具有基本功能,并设置为根据 Firebase Remote Config 标志显示不同的背景图片。我们将介绍如何插桩跟踪以监控应用的性能、向应用发布配置变更、监控影响,以及如何提升性能。

学习内容

  • 如何将 Firebase Performance Monitoring 添加到移动应用以获取开箱即用的指标(例如应用启动时间和帧缓慢或卡顿)
  • 如何添加自定义轨迹以了解用户体验历程的关键代码路径
  • 如何使用 Performance Monitoring 信息中心了解指标并跟踪功能发布等重要变化
  • 如何设置效果提醒来监控关键指标
  • 如何发布 Firebase Remote Config 更改

前提条件

  • Android Studio 4.0 或更高版本
  • 搭载 API 级别 16 或更高级别的 Android 模拟器。
  • Java 8 或更高版本
  • Firebase Remote Config 有基本的了解

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 插件在 Firebase 项目中注册您的 Android 应用,并将必要的 Firebase 配置文件、插件和依赖项添加到您的 Android 项目中 - 所有这些都在 Android Studio 中完成

将您的应用与 Firebase 相关联

  1. 依次前往 Android Studio/Help > Check for updates,确保您使用的是最新版 Android Studio 和 Firebase Assistant。
  2. 依次选择 Tools > Firebase 以打开 Assistant 窗格。

c0e42ef063d21eab.png

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

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

51a549ebde2fe57a.png

  1. 点击连接
  2. 打开 Android Studio。在 Assistant 窗格中,您会看到一条确认您的应用已与 Firebase 关联的消息。

40c24c4a56a45990.png

将 Performance Monitoring 添加到您的应用

在 Android Studio 的 Assistant 窗格中,点击 Add Performance Monitoring to your app(将 Performance Monitoring 添加到您的应用)。

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

3046f3e1f5fea06f.png

最后,您应该会在 Android Studio 的 Assistant 窗格中看到一条成功消息,表示所有依赖项均已正确设置。

62e79fd18780e320.png

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

3. 运行应用

现在,您应该会在应用的模块(应用级)目录中看到 google-services.json 文件,并且您的应用现在应该可以编译了。在 Android Studio 中,依次点击 Run > Run ‘app',以在 Android 模拟器上构建和运行应用。

应用运行时,您应该会先看到如下所示的启动画面:

ffbd413a6983b205.png

然后,几秒钟后,系统会显示包含默认图片的主页:

d946cab0df319e50.png

底层发生了什么?

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

  1. onCreate() 中,我们会初始化 Firebase Remote Config 设置,并提取您稍后在此 Codelab 中将在 Remote Config 信息中心中设置的配置值。
  2. executeTasksBasedOnRC() 中,我们会读取 seasonal_image_url 标志的配置值。如果配置值提供了网址,我们会同步下载图片。
  3. 下载完成后,应用会导航到 MainActivity 并调用 finish() 以结束 SplashScreenActivity

MainActivity 中,如果通过 Remote Config 定义了 seasonal_image_url,系统会启用该功能,并将下载的图片显示为主页的背景。否则,系统会显示默认图片(如上所示)。

4. 设置 Remote Config

现在,您的应用已在运行,您可以设置新功能标志了。

  1. Firebase 控制台的左侧面板中,找到互动部分,然后点击 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. 打开创建您的首个参数表单,然后找到季节性图片投放的值字段。输入用于下载季节性图片的网址:https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. 将默认值保留为空字符串。这意味着,系统会显示代码库中的默认图片,而不是从网址下载的图片。
  3. 点击保存

99e6cd2ebcdced.png

您可以看到,新配置是作为草稿创建的。

  1. 点击发布更改,然后在顶部确认更改以更新您的应用。

39cd3e96d370c7ce.png

5. 添加了对数据加载时间的监控

您的应用会在显示 MainActivity 之前预加载一些数据,并显示启动画面以隐藏此过程。您不希望用户在此屏幕上等待太长时间,因此通常有必要监控启动画面的显示时长。

Firebase Performance Monitoring 提供了实现这一目标的方法。您可以对自定义代码跟踪记录进行插桩,以监控应用中特定代码的性能,例如数据加载时间和新功能的处理时间。

如需跟踪启动画面的显示时长,您需要向 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. 向轨迹添加自定义属性

对于自定义代码跟踪记录,Performance Monitoring 会自动记录默认属性(应用版本、国家/地区、设备等常见元数据),使您可以在 Firebase 控制台中过滤跟踪记录的数据。您还可以添加和监控自定义属性

您刚刚在应用中添加了两个自定义代码跟踪记录,用于监控启动画面时长和新功能的处理时间。可能会影响这些时长的因素包括显示的图片是默认图片还是必须从网址下载的图片。谁知道呢,您最终下载图片的网址可能会不同。

因此,我们将向这些自定义代码跟踪记录添加一个表示季节性图片网址的自定义属性。这样,您日后就可以按这些值过滤时长数据。

  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'. 您尚未启用 Remote Config 参数 seasonalImageUrl,因此属性值为 unset

Performance Monitoring SDK 会收集跟踪数据并将其发送到 Firebase。您可以在 Firebase 控制台的“性能”信息中心中查看这些数据,我们将在 Codelab 的下一步中详细介绍该信息中心。

7. 配置性能监控信息中心

配置信息中心以监控您的功能

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

在左侧面板中,找到发布和监控部分,然后点击效果

您应该会在指标板中看到效果信息中心,其中包含您的首个数据点!Performance Monitoring SDK 会从您的应用收集性能数据,并在收集后几分钟内显示这些数据。

f57e5450b70034c9.png

您可以在该指标板中跟踪应用的关键指标。默认视图包含应用启动时间跟踪记录的时长,但您也可以添加您最关心的指标。由于您要跟踪添加的新功能,因此可以自定义信息中心,以显示自定义代码轨迹 splash_screen_trace 的持续时间。

  1. 点击其中一个空白的选择指标框。
  2. 在对话框窗口中,选择跟踪记录类型为自定义跟踪记录,并选择跟踪记录名称 splash_screen_trace

1fb81f4dba3220e0.png

  1. 点击选择指标,您应该会看到 splash_screen_trace 时长已添加到信息中心!

您可以按照相同的步骤添加您关注的其他指标,以便快速了解这些指标在不同时间段(甚至在不同版本中)的效果变化。

1d465c021e58da3b.png

指标板是一款强大的工具,可用于跟踪用户体验的关键指标的效果。在本 Codelab 中,您只有一小部分数据,且时间范围较短,因此您将使用其他信息中心视图来了解功能发布的效果。

8. 发布您的功能

现在,您已设置好监控功能,可以发布您之前设置的 Firebase Remote Config 更改 (seasonal_image_url)) 了。

如需发布更改,您需要返回 Firebase 控制台中的 Remote Config 页面,提高定位条件的用户百分比。通常,您会面向一小部分用户发布新功能,只有在确信新功能没有问题后,才会扩大发布范围。不过,在此 Codelab 中,您是该应用的唯一用户,因此可以将百分比更改为 100%。

  1. 点击页面顶部的条件标签页。
  2. 点击您之前添加的 Seasonal image rollout 条件。
  3. 将百分位数更改为 100%。
  4. 点击 Save Condition
  5. 点击发布更改,然后确认更改。

70f993502b27e7a0.png

返回 Android Studio,在模拟器中重启应用,即可查看新功能。启动画面之后,您应该会看到新的空白状态主屏幕!

b0cc91b6e48fb842.png

9. 查看效果变化

现在,我们来使用 Firebase 控制台中的性能信息中心查看启动画面加载性能。在此 Codelab 的此步骤中,您将使用信息中心的不同部分查看效果数据。

  1. 在“信息中心”主标签页中,向下滚动到“轨迹”表,然后点击“自定义轨迹”标签页。在此表格中,您会看到之前添加的自定义代码轨迹,以及一些开箱即用轨迹
  2. 现在,您已启用新功能,请查找自定义代码轨迹 splash_seasonal_image_processing,该轨迹用于衡量下载和处理图片所需的时间。从轨迹的时长值可以看出,此下载和处理过程需要花费大量时间。

439adc3ec71805b7.png

  1. 由于您有 splash_seasonal_image_processing 的数据,因此可以将此轨迹的持续时间添加到信息中心标签页顶部的指标板中。

与之前一样,点击其中一个空白的选择指标框。在对话框窗口中,选择轨迹类型 Custom traces(自定义轨迹)和轨迹名称 splash_seasonal_image_processing。最后,点击选择指标将此指标添加到指标板。

7fb64d2340410576.png

  1. 如需进一步确认差异,您可以仔细查看 splash_screen_trace 的数据。点击指标板中的 splash_screen_trace 卡片,然后点击查看指标详情

b1c275c30679062a.png

  1. 在详情页面左下角,您会看到一个属性列表,其中包括您之前创建的自定义属性。点击自定义属性 seasonal_image_url_attribute,即可在右侧查看每个季节性图片网址的启动画面时长:

8fa1a69019bb045e.png

  1. 您的启动画面时长值可能与上图中的值略有不同,但与使用默认图片(表示为“unset”)相比,从网址下载图片时,启动画面时长应更长

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

  1. 点击页面顶部的效果,返回信息中心主标签页:640b696b79d90103.png
  2. 在页面底部的轨迹表中,点击网络请求标签页。在此表中,您会看到应用中的所有网络请求汇总为网址格式,包括 images.unsplash.com/** 网址格式。如果您将此响应时间的值与图片下载和处理所需的总时间(即 splash_seasonal_image_processing 轨迹的持续时间)进行比较,您会发现大部分时间都花在了下载图片上。

6f92ce0f23494507.png

效果数据

使用 Firebase Performance Monitoring,您发现启用新功能对最终用户有以下影响:

  1. SplashScreenActivity 上花费的时间增加了。
  2. splash_seasonal_image_processing 的时长非常长。
  3. 延迟是由于图片下载响应时间和图片所需的相应处理时间所致。

在下一步中,您将通过回滚该功能并确定如何改进该功能的实现来减少对性能的影响。

10. 回滚该功能

延长启动画面显示时间对用户而言并不理想。Remote Config 的一项主要优势是,您可以暂停和撤消发布,而无需向用户发布其他版本。这样,您就可以快速响应问题(例如您在上一步中发现的性能问题),并最大限度地减少不满意的用户数量。

为了快速缓解问题,您将发布百分比重置为 0,以便所有用户都再次看到默认图片:

  1. 返回 Firebase 控制台中的 Remote Config 页面
  2. 点击页面顶部的条件
  3. 点击您之前添加的 Seasonal image rollout 条件。
  4. 将百分位数更改为 0%。
  5. 点击 Save Condition
  6. 点击发布更改,然后确认更改。

18c4f1cbac955a04.png

在 Android Studio 中重启应用,您应该会看到原始的空状态主屏幕:

d946cab0df319e50.png

11. 解决性能问题

您在本 Codelab 的早些部分发现,下载启动画面图片会导致应用运行缓慢。仔细查看下载的图片后,您发现自己使用的是图片的原始分辨率,该分辨率超过 2MB!要快速解决性能问题,您可以将画质降低到更合适的分辨率,以缩短图片的下载时间。

再次发布 Remote Config 值

  1. 返回 Firebase 控制台中的 Remote Config 页面
  2. 点击 seasonal_image_url 参数的修改图标。
  3. 季节性图片投放的值更新为 https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640,然后点击保存

828dd1951a2ec4a4.png

  1. 点击页面顶部的条件标签页。
  2. 点击季节性图片发布,然后将百分比设回 100%。
  3. 点击 Save Condition

1974fa3bb789f36c.png

  1. 点击发布更改按钮。

12. 测试修复程序并设置提醒

在本地运行应用

将新配置值设置为使用其他下载图片网址后,请再次运行应用。这次,您应该会发现在启动画面上花费的时间比之前短。

b0cc91b6e48fb842.png

查看更改的效果

返回 Firebase 控制台中的性能信息中心,查看指标的显示情况。

  1. 这次,您将使用轨迹表导航到详情页面。在跟踪记录表格下方的自定义跟踪记录标签页中,点击自定义跟踪记录 splash_seasonal_image_processing,再次查看其时长指标的更详细视图。

2d7aaca03112c062.png

  1. 点击自定义属性 seasonal_image_url_attribute,再次查看自定义属性的细分数据。如果您将光标悬停在这些网址上,会看到一个值,该值与缩减后的图片的新网址 https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640(末尾带有 ?w=640)相匹配。与上一个图片相关联的持续时间值比上一个图片的值短得多,更符合用户的接受程度!

10e30c037a4237a2.png

  1. 现在,您已改进启动画面的性能,接下来可以设置提醒,以便在轨迹超出您设置的阈值时收到通知。打开效果信息中心,点击 splash_screen_trace 对应的三点状菜单图标,然后点击提醒设置

4bd0a2a1faa14479.png

  1. 点击切换开关以启用时长提醒。将阈值设置为略高于您看到的值,以便在 splash_screen_trace 超出阈值时,您会收到电子邮件。
  1. 点击保存以创建提醒。向下滚动到轨迹表,然后点击自定义轨迹标签页,即可看到您的提醒已启用!

2bb93639e2218d1.png

13. 恭喜!

恭喜!您已启用 Firebase Performance Monitoring SDK 并收集了轨迹,以衡量新功能的性能!您监控了新功能发布的关键效果指标,并在发现效果问题时快速做出响应。这一切都得益于能够使用 Remote Config 进行配置更改并实时监控性能问题。

所学内容

  • 将 Firebase Performance Monitoring SDK 添加到您的应用
  • 向代码添加自定义代码跟踪记录以衡量特定功能
  • 设置 Remote Config 参数和条件值以控制/发布新功能
  • 了解如何使用 Performance Monitoring 信息中心在发布期间发现问题
  • 设置性能提醒,以便在应用性能超出您设置的阈值时通知您

了解详情