Flutter性能监控插件qt_apm_sdk的使用

Flutter性能监控插件qt_apm_sdk的使用

QuickTracking Flutter APM SDK 能够全面监控Flutter端线上稳定性和性能的运行情况，洞悉设备运行体感。目前 SDK 提供了监控 Dart 异常、页面性能、页面帧率等能力。

集成文档

APM Flutter SDK 集成文档链接：
https://help.aliyun.com/document_detail/2788809.html

完整示例代码

以下是一个完整的示例代码，展示了如何集成和使用 qt_apm_sdk 插件。

// example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:qt_common_sdk/qt_common_sdk.dart';
import 'package:qt_apm_sdk/qt_apm_sdk.dart';

import './pages/exception.dart';
import './pages/lazy_load_page.dart';
import './pages/list.dart';
import './pages/white_screen.dart';

// 定义路由表
Map<String, WidgetBuilder> routes = {
  "/": (context) => HomePage(),
  "/exception": (context) => ExceptionPage(),
  "/white_screen": (context) => WhiteScreenPage(),
  "/list": (context) => ListPage(),
  "/lazy_load": (context) => ScrollLazyLoadPage(),
};

void main() {
  // 初始化 QuickTrackingFlutterApmSdk
  final QuickTrackingFlutterApmSdk qtApmSdk = QuickTrackingFlutterApmSdk(
    name: '', // 应用或模块名称
    bver: '', // 应用或模块版本+构建号
    flutterVersion: '3.29.0', // Flutter SDK 版本
    engineVersion: 'f73bfc4522', // Flutter 引擎版本
    enableLog: true, // 是否开启SDK日志打印 （默认关闭）
    enableTrackingPageFps: true, // 开启监测页面帧率（默认关闭）
    enableTrackingPagePerf: true, // 开启监测页面性能（默认关闭）
    errorFilter: { 
      "mode": "ignore",
      // "rules": [RegExp('RangeError')],
      "rules": [],
    },
    trackDomain: "", // 收数域名，如果通过统计SDK配置收数域名，此处可不配置
    initFlutterBinding: MyApmWidgetsFlutterBinding.ensureInitialized,
    // onError: (exception, stack) {},
  );

  // 初始化 SDK
  qtApmSdk.init(appRunner: (observer) async {
    // 确保去掉原有的 WidgetsFlutterBinding.ensureInitialized()，以免出现重复初始化绑定的异常
    // SDK 内部已通过 initFlutterBinding 入参带入继承的 WidgetsFlutterBinding 实现初始化操作
    // 依赖 ensureInitialized() 初始化的代码可在此调用
    // 需要异步获取设置应用名称和版本号可在此回调中操作
    qtApmSdk.name = 'app_demo'; // 设置应用名称
    qtApmSdk.bver = '2.5.0'; // 设置应用版本
    return MyApp(observer); // 返回根 Widget
  });
}

// 自定义 WidgetsFlutterBinding 继承类
class MyApmWidgetsFlutterBinding extends ApmWidgetsFlutterBinding {
  @override
  void handleAppLifecycleStateChanged(AppLifecycleState state) {
    // 添加自己的实现逻辑
    // print('AppLifecycleState changed to $state');
    super.handleAppLifecycleStateChanged(state);
  }

  static WidgetsBinding? ensureInitialized() {
    MyApmWidgetsFlutterBinding();
    return WidgetsBinding.instance;
  }
}

// 根 Widget
class MyApp extends StatelessWidget {
  MyApp([this._navigatorObserver]);

  NavigatorObserver? _navigatorObserver;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      routes: routes,
      initialRoute: "/",
      navigatorObservers: <NavigatorObserver>[
        _navigatorObserver ?? ApmNavigatorObserver.singleInstance
      ],
    );
  }
}

// 主页
class HomePage extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

// 自定义路由过渡效果
class CustomTransitionPage extends PageRouteBuilder {
  final Widget widget;

  CustomTransitionPage({required this.widget})
      : super(
          pageBuilder: (BuildContext context, Animation<double> animation,
              Animation<double> secondaryAnimation) {
            return widget;
          },
          transitionsBuilder: (BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
              Widget child) {
            Animation<Offset> customAnimation = Tween<Offset>(
              begin: Offset(3.0, 0.0),
              end: Offset.zero,
            ).animate(animation);

            return SlideTransition(
              position: customAnimation,
              child: child,
            );
          },
        );
}

// 主页状态管理
class _MyAppState extends State {
  @override
  void initState() {
    super.initState();
    // 初始化通用 SDK 设置
    QTCommonSdk.setCustomDomain("主收数域名", "副收数域名");
    QTCommonSdk.setLogEnabled(true);
    QTCommonSdk.initCommon("android应用appkey", "iOS应用标识", "发布渠道");

    // 模拟异常捕获
    runCustomException();
  }

  void runCustomException() {
    try {
      // 模拟数组越界错误
      List<String> numList = ['1', '2'];
      print(numList[5]);
    } catch (e) {
      // 上报自定义异常
      ExceptionTrace.captureException(
          exception: Exception(e), extra: {"user": '123'});
    }
  }

  void _showDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("AlertDialog Title"),
          content: Text("AlertDialog Body"),
          actions: <Widget>[
            TextButton(
              child: Text("CANCEL"),
              onPressed: () => Navigator.of(context).pop(),
            ),
            TextButton(
              child: Text("OK"),
              onPressed: () => Navigator.of(context).pop(),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextButton(
                  child: Text('dart error page'),
                  onPressed: () async {
                    Navigator.pushNamed(context, '/exception');
                  }),
              TextButton(
                  child: Text('dart error new page'),
                  onPressed: () async {
                    Navigator.of(context).push(MaterialPageRoute(
                        builder: (context) => ExceptionPage()));
                  }),
              TextButton(
                  child: Text('Page Transition'),
                  onPressed: () async {
                    Navigator.of(context)
                        .push(CustomTransitionPage(widget: ExceptionPage()));
                  }),
              TextButton(
                  child: Text('dart error release page'),
                  onPressed: () async {
                    Navigator.of(context).pushReplacementNamed('/exception');
                  }),
              TextButton(
                child: Text("Show Dialog"),
                onPressed: _showDialog,
              ),
              TextButton(
                  child: Text("dart white screen exception"),
                  onPressed: () async {
                    Navigator.of(context).pushReplacementNamed('/white_screen');
                  }),
              TextButton(
                  child: Text("lazy loading text list"),
                  onPressed: () async {
                    Navigator.pushNamed(context, '/list');
                  }),
              TextButton(
                  child: Text("lazy loading picture list"),
                  onPressed: () async {
                    Navigator.pushNamed(context, '/lazy_load');
                  }),
              TextButton(
                  child: Text("捕获主动上报 exception"),
                  onPressed: () {
                    runCustomException();
                  }),
            ]),
      ),
    );
  }
}

功能说明

1. Dart 异常监控
   使用 ExceptionTrace.captureException 方法捕获并上报自定义异常。例如：

   ExceptionTrace.captureException(
       exception: Exception(e), extra: {"user": '123'});