Flutter性能监控插件ve_apm的使用

ve_apm 是一个用于 Flutter 应用性能和稳定性监控的工具。通过它，开发者可以实时了解应用的性能表现，并快速定位问题。

使用步骤

以下是 ve_apm 的基本使用步骤及完整示例代码。

1. 导入依赖

首先，在项目中添加 ve_apm 依赖。在 pubspec.yaml 文件中添加以下内容：

dependencies:
  ve_apm: ^版本号

然后执行 flutter pub get 安装依赖。

2. 初始化 ve_apm

在 main 函数中进行初始化。runAppWithoutTrace 和 startVeApmTrace 分别用于控制是否上报性能监控日志。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:ve_apm/ve_apm.dart';

import 'common/router.dart';
import 'pages/home_page.dart';

void main() {
  // 不上报性能监控日志
  runAppWithoutTrace((NavigatorObserver observer) {
    HttpOverrides.global = ApmHttpOverrides();
    enableVeApmLog(true);  // 控制台日志开关，默认为 true
    return MyApp(observer);
  }, bindingInitHandler: CustomFlutterBinding.ensureInitialized);

  // 开始上报性能监控日志
  startVeApmTrace();

  // 初始化 Native SDK（根据实际情况决定是否调用）
  final VeApmNativeConfig config = VeApmNativeConfig('233805', '4f16428f37ab45f088b6316dab561767');
  config.channel = 'flutter';
  config.enableConsoleLog = true;
  final VeApmNativeHelper nativeHelper = VeApmNativeHelper(config);
  nativeHelper.start();
  nativeHelper.setUserID('userID');
  // (仅 iOS) 如果需要调用此方法设置自定义 deviceID，请配置 VeApmNativeHelper.config.iosConfig.deviceIDSource 设置为 user
  // nativeHelper.setDeviceID('deviceID');
}

3. 自定义 Flutter Binding

为了更好地集成 ve_apm，可以通过扩展 ApmWidgetsFlutterBinding 来实现自定义逻辑。

mixin MixinFlutterBinding on ApmWidgetsFlutterBinding {
  [@override](/user/override)
  void initInstances() {
    super.initInstances();
    print('MixinFlutterBinding initInstances');
  }

  [@override](/user/override)
  void handleAppLifecycleStateChanged(AppLifecycleState state) {
    super.handleAppLifecycleStateChanged(state);
    print('MixinFlutterBinding handleAppLifecycleStateChanged');
  }
}

class CustomFlutterBinding extends ApmWidgetsFlutterBinding
    with MixinFlutterBinding {
  static WidgetsBinding? ensureInitialized() {
    // if (WidgetsBinding.instance == null) {
      CustomFlutterBinding();
    // }
    return WidgetsBinding.instance;
  }
}

4. 创建应用入口

最后，创建应用入口并配置路由和导航观察器。

class MyApp extends StatefulWidget {
  const MyApp([this._navigatorObserver]);

  final NavigatorObserver? _navigatorObserver;

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        useMaterial3: false
      ),
      home: HomePage(),
      navigatorObservers: [
        widget._navigatorObserver ?? ApmNavigatorObserver.instance
      ],
      routes: generateRoutes(), // 自定义路由生成函数
    );
  }
}