You need to enable JavaScript to run this app.
最新活动
产品
解决方案
定价
合作与生态
支持与服务
开发者
了解我们
导航

Flutter SDK接入

更新时间:2022.09.26 10:18:39

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

使用限制

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

功能介绍

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

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

注意

  • ve_apm,ve_alog的上报依赖原生SDK,因此接入时还需要初始化原生SDK。

全埋点接入

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
  1. 给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(),
      },
    );
  }
}
  1. 修改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存在监控开关:
alt

采样率配置

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

上报验证

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

接入示例Demo

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

版本记录

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