Flutter性能监控插件hasura_firebase_performance的使用

在Flutter应用开发中，性能监控是一个非常重要的环节。本文将介绍如何使用hasura_firebase_performance插件来监控HTTP请求的性能指标，并将其发送到Firebase进行分析。

关于 hasura_firebase_performance

hasura_firebase_performance 是一个基于 hasura_connect 的拦截器实现，用于将Hasura GraphQL查询的性能指标数据发送到Firebase。通过该插件，开发者可以轻松地监控应用的网络性能，从而优化用户体验。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 hasura_connect 和 hasura_firebase_performance 依赖：

dependencies:
  hasura_connect: ^3.0.0   # 替换为最新版本号
  hasura_firebase_performance: ^1.0.0   # 替换为最新版本号

然后运行以下命令以安装依赖：

flutter pub get

或者，如果你使用的是 slidy 工具，可以直接运行：

slidy install hasura_connect, hasura_firebase_performance

2. 初始化插件

在项目中初始化 hasura_connect 并添加 HasuraPerformanceInterceptor 拦截器。以下是一个简单的示例：

// 导入必要的库
import 'package:hasura_connect/hasura_connect.dart';
import 'package:hasura_firebase_performance/hasura_firebase_performance.dart';

void main() {
  // 初始化 HasuraConnect 并添加性能拦截器
  final hasuraConnect = HasuraConnect(
    "https://your-hasura-endpoint/v1/graphql", // 替换为你的Hasura服务地址
    interceptors: [HasuraPerformanceInterceptor()],
  );

  // 测试查询
  hasuraConnect
      .query(r"""
      query GetUsers {
        users {
          id
          name
        }
      }
      """)
      .then((value) => print(value))
      .catchError((error) => print(error));
}

3. 配置 Firebase

为了确保性能数据能够成功发送到Firebase，你需要完成以下配置步骤：

a) 在Firebase控制台创建项目

1. 登录 Firebase 控制台。
2. 创建一个新的项目，并启用性能监控功能。

b) 在Flutter项目中集成Firebase

在 android/app/build.gradle 文件中添加以下依赖：

implementation platform('com.google.firebase:firebase-bom:32.3.1') // 替换为最新版本
implementation 'com.google.firebase:firebase-perf'

然后在 MainActivity.kt 或 MainActivity.java 中初始化Firebase：

import com.google.firebase.FirebaseApp
import io.flutter.embedding.android.FlutterActivity

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        FirebaseApp.initializeApp(this)
    }
}

4. 查看性能数据

在Firebase控制台中，导航到性能监控部分，即可查看已捕获的性能指标。这些指标包括但不限于：

• HTTP请求的延迟时间
• 网络请求的成功率
• 数据传输大小

完整示例代码

以下是一个完整的示例代码，展示了如何使用 hasura_firebase_performance 插件来监控Hasura查询的性能：

import 'package:flutter/material.dart';
import 'package:hasura_connect/hasura_connect.dart';
import 'package:hasura_firebase_performance/hasura_firebase_performance.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _response = "Loading...";

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化 HasuraConnect 并添加性能拦截器
    final hasuraConnect = HasuraConnect(
      "https://your-hasura-endpoint/v1/graphql",
      interceptors: [HasuraPerformanceInterceptor()],
    );

    // 执行查询
    hasuraConnect
        .query(r"""
        query GetUsers {
          users {
            id
            name
          }
        }
        """)
        .then((value) {
      setState(() {
        _response = value.toString();
      });
    }).catchError((error) {
      setState(() {
        _response = error.toString();
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Hasura Firebase Performance")),
      body: Center(
        child: Text(_response),
      ),
    );
  }
}