Flutter SDK接入

本文主要介绍移动端应用接入 ve_apm, ve_alog 的详细步骤。您在使用时只需要根据下文进行接入、初始化，即可开启监控功能。

使用限制 #

目前Flutter SDK仅限中国大陆应用使用，不包括港澳台地区。

功能介绍 #

该SDK名称为ve_apm，用于Flutter的无侵入性能监控。
当前的主要功能有:

1. Dart异常（包括白屏检测）
2. 页面测速（FP、FCP、FMP）与慢页面分析
3. 流畅性和丢帧分析
4. 大盘数据
5. 网络监控
6. Channel监控
7. 日志回捞

全埋点接入 #

Flutter的性能监控服务的端侧SDK接入工作分为两部分：Native原生侧接入和Dart侧接入。

Native原生侧 #

ve_apm的上报能力依赖于原生SDK：ApmInsight。如果您的工程已经完成了ApmInsight原生SDK的接入，可以跳过该小节的内容，只需进行Dart侧的接入。如果您的工程只需要Flutter的监控能力，可以参考本章节内容完成对原生SDK的接入。

Android

flutter的性能数据依赖原生侧的 ‘com.volcengine:apm_insight’
flutter的异常数据依赖原生侧的 ‘com.volcengine:apm_insight_crash’
不依赖原生侧的性能（如CPU、内存、FPS、电量）和自动埋点相关（apm-plugin）, 如果不需要，可以不开启这部分能力。

应用性能监控-Android接入文档

iOS

Podfile

target 'Runner' do
    
  source 'https://github.com/volcengine/volcengine-specs.git'
    
  pod 'RangersAPM', '2.2.1', :subspecs => [
    'Flutter',
    'CN'
  ]
    
  pod 'RangersAppLog','>=6.0.1', :subspecs => [
    'Host/CN',
    'Core'
  ]
    
  pod 'OneKit', :source => 'https://github.com/volcengine/volcengine-specs.git'
    
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

由于iOS native侧依赖的二进制库为静态库，因此需要从Podfile中移除use_frameworks!。否则将无法正确拉取native组件。

接下来，在尽可能靠前的地方初始化RangersAPM，如：

AppDelegate.m

#import <RangersAppLog/BDAutoTrack.h>
#import <RangersAppLog/BDAutoTrackConfig.h>
#import <RangersAPM+Flutter.h>

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
    // appId 替换为您创建的应用对应的id
    NSString *appId = @"187277";
    // 用户的user_id，可以是用户登录账号id，也可以是业务方自己定义的user_id
    // 主要用途是将平台数据和用户关联起来，便于排查问题
    NSString *userId = @"98765";
    // app渠道信息，主要用来区分此app是从哪个渠道下载
    NSString *channel = @"App Store";
    
    //初始化RangersAppLog
    BDAutoTrackConfig *applogConfig = [BDAutoTrackConfig configWithAppID:appId launchOptions:launchOptions];
    applogConfig.channel = channel;
    [BDAutoTrack startTrackWithConfig:applogConfig];
    
    //初始化APMInsight
    RangersAPMConfig *apmConfig = [RangersAPMConfig configWithAppID:appId];
    apmConfig.channel = channel;
    apmConfig.deviceIDSource = RAPMDeviceIDSourceFromRAppLog;
    
    [RangersAPM startWithConfig:apmConfig];
    [RangersAPM setUserID: userId]; //可选项，可以不配置。
    
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

Dart侧 #

首先，假设您的app入口函数main方法原本是这样的：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'APM Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(
          title: 'APM Demo Home Page ${Platform.operatingSystem}'),
      routes: {
        "/test_build_error_page": (context) => BuildErrorPage(),
        "/cover_full_page": (context) => CoverFullPage(),
      },
    );
  }
}

操作步骤

ve_apm在Dart侧的接入，只需要以下4个步骤。

1. 在Flutter项目的pubspec.yaml文件中增加依赖：

dependencies:
  ve_apm: 2.5.1
  // 版本依据所使用的flutter引擎版本而有所不同，参看 https://pub.dev/packages/ve_apm/changelog

2. 给MyApp这个Widget增加一个NavigatorObserver变量，并设置进MaterialApp的navigatorObservers属性中，其他保持不变：

class MyApp extends StatelessWidget {
  NavigatorObserver _navigatorObserver;

  MyApp(this._navigatorObserver);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'APM Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(
          title: 'APM Demo Home Page ${Platform.operatingSystem}'),
      navigatorObservers: [_navigatorObserver],
      routes: {
        "/test_build_error_page": (context) => BuildErrorPage(),
        "/cover_full_page": (context) => CoverFullPage(),
      },
    );
  }
}

3. 修改app入口函数main方法，调用runTraceApp()方法来实现无侵入式监控：
   将原来的 runApp()的代码剪切到runTraceApp方法的builder参数里执行，并把builder的参数observer传递给MyApp：

import 'package:ve_apm/ve_apm.dart';

void main() {
  runTraceApp((observer) {
    HttpOverrides.global = ApmHttpOverrides(); //开启网络监控，如果不需要网络监控则不设置
    return MyApp(observer);
  });
}

业务如果需要设置自己的HttpOverride，可以通过ApmHttpOverrides的customHttpOverrides变量进行设置。比如：HttpOverrides.global = ApmHttpOverrides(customHttpOverrides: DebugHttpOverride());，其中DebugHttpOverride是业务自定义的HttpOverride。

注意事项

1. ve_apm只支持监控在app的路由表中注册过的页面，即在MaterialApp的home、initialRoute、routes注册的页面。这些页面通常通过Navigator.of(context).pushNamed(String routeName)的形式进行跳转。
2. 通过Navigator.of(context).push(Route route)方式跳转的页面会被ve_apm当做是unknown的页面，而不去监控页面信息。因此，Flutter提供的一系列showDialog、showGenernalDialog...一系列方法打开的Dialog都是不会被监控的，因为它们的跳转方式都是Navigator.of(context).push(Route route)。

日志回捞接入 #

Native原生侧 #

日志回捞是独立sdk：ve_alog，Native原生侧同样依赖于原生SDK：ApmInsight，相关接入可以见上文：Native原生侧。

dart侧 #

dart侧推荐通过ve_onekit服务接口使用日志功能。日志库内部已经实现了启动时服务注入的逻辑，业务可以无需关心。

import 'package:ve_onekit/services/services.dart' as OKService;

  final _alog = OKService.serviceManager.getService<VeAlog>()!;
  _alog.debug(tag: 'test', message: 'debug');
  _alog.info(tag: 'test', message: 'info');
  _alog.warn(tag: 'test', message: 'warn');
  _alog.error(tag: 'test', message: 'error');

平台监控配置 #

版本号开关 #

针对不同版本号的App存在监控开关：

采样率配置 #

采样率是对所有版本生效的。默认是全量上报，如果DAU（Daily Active Users，日活用户）过大，建议采样上报，例如20万DAU下可以采用70%的上报，统计学意义该采样结果逼近客观结果。该项为前端配置项, 用户再次启动APP时才生效, 请谨慎修改, 建议7天后再评估数据。

上报验证 #

Dart异常
触发Error，立马上报。平台上的数据展示可能会有5分钟的时延。

接入示例Demo #

请参考SDK example目录下的实现。

https://pub.dev/packages/ve_apm/changelog