Flutter性能监控插件site24x7_flutter_plugin的使用

Flutter性能监控插件site24x7_flutter_plugin的使用

Site24x7 Flutter插件允许用户跟踪其Flutter移动应用程序的HTTP调用、崩溃、屏幕加载时间以及自定义数据。通过添加事务并将其与组件、个别用户及其会话分组，可以优化应用性能。

开始使用

请遵循以下步骤完成在您的Flutter应用中安装site24x7_flutter_plugin。

快速设置

1. 安装插件

flutter pub add site24x7_flutter_plugin

打开位于应用文件夹内的pubspec.yaml文件，您会注意到dependencies:下已添加了一行site24x7_flutter_plugin:，如下所示：

dependencies:
  site24x7_flutter_plugin: ^1.0.0

2. iOS安装步骤

1. 在项目目录下的ios/文件夹中添加pod。

   target 'Your_Project_Name' do
     
     pod 'Site24x7APM'
     
   end
   

2. 在同一目录下运行以下命令：

   pod install
   

在Flutter应用中使用

导入site24x7_flutter_plugin包如下：

import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

1. 启动代理

import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

Future<void> main() async {
  
  WidgetsFlutterBinding.ensureInitialized();

  // 分配Site24x7错误回调
  // 非异步异常
  FlutterError.onError = ApmMobileapmFlutterPlugin.instance.captureFlutterError; // site24x7自定义回调

  // 异步异常
  PlatformDispatcher.instance.onError = (error, stack) {
    ApmMobileapmFlutterPlugin.instance.captureException(error, stack, false, type: "uncaughtexception"); // site24x7自定义API
    return true;
  };

  // 启动代理
  await ApmMobileapmFlutterPlugin.instance.startMonitoring("appKey", uploadInterval); // site24x7自定义API

  ...
  runApp(MyHomePage(title: 'Flutter Demo Home Page'));
  ...

}

注意：确保在main()方法中调用WidgetsFlutterBinding.ensureInitialized();之前分配错误回调。

2. 屏幕跟踪

您可以使用以下机制来计算屏幕加载所需的时间。这些数据将推送到Site24x7服务器，并可用于会话跟踪和崩溃报告。

无状态小部件

import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

class FirstScreen extends StatelessWidget {

  FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Sample Widget'),
        ),
        body: Center(
            child: ElevatedButton(
              child: const Text('Go To Stateless Widget'),
              onPressed: () {
                var initialTimeStamp = DateTime.now();
                Navigator.push(
                    context, 
                    MaterialPageRoute(
                        builder: (context) => SampleStatelessWidget()
                        ),
                    ).then((value) {
                    var loadTime = DateTime.now().difference(initialTimeStamp).inMilliseconds;
                    ApmMobileapmFlutterPlugin.instance.addScreen("SampleStatelessWidget", loadTime.toDouble(), initialTimeStamp.millisecondsSinceEpoch); // site24x7自定义API
                });
              },
            ),
          ),
      );
    }
  }
}

有状态小部件

import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

class SampleWidget extends StatefulWidget {
  const SampleWidget({super.key});
  @override
  State<SampleWidget> createState() => _SampleWidgetState();
}

class _SampleWidgetState extends State<SampleWidget> {
  
  late var _initialTimeStamp, _finalTimeStamp;

  @override
  void initState() {
    super.initState();
    _initialTimeStamp = DateTime.now();
  }

  void site24x7AfterBuildCallback(BuildContext context) {
    var finalTimeStamp = DateTime.now();
  }

  @override
  Widget build(BuildContext context) {

    WidgetsBinding.instance!.addPostFrameCallback((_) => site24x7AfterBuildCallback(context));
  
    return Scaffold(
        appBar: AppBar(
          title: const Text('Sample Widget'),
        ),
        body: Center(
          child: const Text('Hello Sample Widget');
        ),
      );
  }

  @override
  void didUpdateWidget(Fetch oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 发送小部件加载时间，即初始和最终时间戳之间的差异应使用addScreen API发送到服务器
    var loadTime = _finalTimeStamp.difference(_initialTimeStamp).inMilliseconds;
    ApmMobileapmFlutterPlugin.instance.addScreen("Fetch", loadTime.toDouble(), _initialTimeStamp.millisecondsSinceEpoch); // site24x7自定义API
    // 将最终时间戳分配给初始时间戳
    _initialTimeStamp = DateTime.now();
  }

  @override
  void dispose() {
    super.dispose();
    // 发送小部件加载时间，即初始和最终时间戳之间的差异应使用addScreen API发送到服务器
    var loadTime = _finalTimeStamp.difference(_initialTimeStamp).inMilliseconds;
    ApmMobileapmFlutterPlugin.instance.addScreen("Fetch", loadTime.toDouble(), _initialTimeStamp.millisecondsSinceEpoch); // site24x7自定义API
  }
}

要自动捕获路由时的面包屑，可以使用Site24x7NavigatorObserver()，如下所示：

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      routes: {
        '/first': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
        '/fetch': (context) => FetchScreen()
      },
      navigatorObservers: [
        Site24x7NavigatorObserver() // site24x7自定义导航观察器
      ]
    );
  }

}

3. 网络监控

支持HTTP和Dio包。捕获使用上述包进行的API调用。

HTTP包

import 'package:http/http.dart' as http;
import 'package:site24x7_flutter_plugin/site24x7_flutter.dart';

...

// site24x7自定义组件
var client = Site24x7HttpClient();
                  (或)
var client = Site24x7HttpClient(client: http.Client());

var dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts?userId=1&_limit=5');
http.Response response = await client.get(dataURL);

...

Dio包

import 'package:dio/dio.dart';
import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

...

var dio = Dio();

dio.enableSite24x7(); // site24x7 dio扩展

var dataURL = 'https://jsonplaceholder.typicode.com/posts?userId=1_limit=5';
final response = await dio.get(dataURL);

...

// 注意：在进行API调用前，请确保已安装http和Dio包。并且在所有自定义配置完成后，在dio对象上调用.enableSite24x7()。

4. 错误监控

您可以在catch块中手动捕获发生的异常，使用以下API。

捕获非异步异常

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterError.onError = ApmMobileapmFlutterPlugin.instance.captureFlutterError; // site24x7自定义回调
  runApp(MyHomePage());
}

捕获异步异常

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  PlatformDispatcher.instance.onError = (error, stack){
    ApmMobileapmFlutterPlugin.instance.platformDispatcherErrorCallback(error, stack); // site24x7自定义API
  };
  runApp(MyHomePage());
}

捕获捕获的异常

try {

  // 可能生成异常的代码

} catch (exception, stack){
  ApmMobileapmFlutterPlugin.instance.captureException(exception, stack);
}

注意：在调用runApp()之前使用错误监控自定义API。

5. 事务和组件

您可以在一个事务内开始和停止一个唯一的组件。在一个事务中，您可以开始多个组件。

ApmMobileapmFlutterPlugin.instance.startTransaction("listing_blogs");

// 使用组件分组各种操作。
ApmMobileapmFlutterPlugin.instance.startComponent("listing_blogs", "http_request");
// 您的代码/逻辑
ApmMobileapmFlutterPlugin.instance.stopComponent("listing_blogs", "http_request");

ApmMobileapmFlutterPlugin.instance.startComponent("listing_blogs", "view_data_onto_screen");
// 您的代码/逻辑
ApmMobileapmFlutterPlugin.instance.stopComponent("listing_blogs", "view_data_onto_screen");

ApmMobileapmFlutterPlugin.instance.stopTransaction("listing_blogs");

6. 用户跟踪

您可以通过设置唯一用户标识符来跟踪特定用户。如果未指定唯一ID，Site24x7将生成随机GUID并将其作为用户ID分配。

ApmMobileapmFlutterPlugin.instance.setUserId("user@example.com");

7. 面包屑

您可以使用以下函数手动添加面包屑。

ApmMobileapmFlutterPlugin.instance.addBreadcrumb(event, message);
ex : ApmMobileapmFlutterPlugin.instance.addBreadcrumb("Info", "download completed");

8. 刷新

您可以使用以下API立即刷新数据到Site24x7服务器，而不是等待下一个上传间隔。

ApmMobileapmFlutterPlugin.instance.flush();

9. 应用程序崩溃

您可以强制应用程序崩溃并显示一条错误消息，说"这是Site24x7崩溃"

ApmMobileapmFlutterPlugin.instance.crashApplication();