Flutter通道监听插件ume_kit_channel_observer的使用

Flutter通道监听插件ume_kit_channel_observer的使用

用于记录platform channel最近的调用记录，并支持显示的提示可能由于native通信所导致的type error异常。

使用

下方使用方式，主要针对日常情况下，对项目中native通信过程所导致的类型转换错误的监控和调用记录的展示。

由于在中大型项目中，与native的通信复杂，且由于native端可能由不同人/项目组维护，所以在测试时并不能全路径覆盖，而且Flutter的异常并非阻断式，所以没有显示的提示情况下，很难及时发现。因此，通过增加悬浮窗及监听的方式（也可以扩展上报到日志服务器），在测试组测试时，显式地通知测试同学。

在main函数中添加如下方法：

void main() {
  UmeKitChannelObserver.customZone(const YourRootWwidget());
}

（非必须）将ChannelObserverWidget添加到任意位置，建议悬浮窗：

OverlayEntry entry = OverlayEntry(builder: (_) => const ChannelObserverWidget());
Overlay.of(context)?.insert(entry);

更多使用方式

Tip: 如果不使用UmeKitChannelObserver的customZone或runApp方法，那么，下方的功能将失效。即，需要你自行实现并混入ChannelObserverServicesBinding。具体可见代码实现方式。

导出最近调用记录

该模块核心功能主要是native channel的调用记录。 所以可以通过UmeKitChannelObserver.getBindingInstance().popChannelRecorders()拉取最近的调用记录，用作它用。

现有项目中直接混入 ChannelObserverServicesBinding

此外UmeKitChannelObserver的customZone和runApp两个方法并非必须使用，如果项目中有类似的自定义，也可以直接混入ChannelObserverServicesBinding或者仿照代码，做自定义更改。

处理 zone 内的 error
  1. zone的error处理方法
    • 可以覆盖此方法，然后自处理相关错误
    • PS. 如果覆盖zoneErrorHandler，将导致UmeKitChannelObserver._errorStreamController和ChannelObserverWidget的失效。
///zone的error处理方法
/// * 可以覆盖此方法，然后自处理相关错误
/// * PS. 如果覆盖[zoneErrorHandler],将导致[UmeKitChannelObserver._errorStreamController]
/// * 、[ChannelObserverWidget]的失效。
ZoneErrorHandler zoneErrorHandler = UmeKitChannelObserver._defaultErrorHandler;
  1. 对UmeKitChannelObserver.errorStream监听
class UmeKitChannelObserver {

  ///用于控制zone内error的上报
  /// * 基于[customZone] 和 [runApp]的实现。
  static final StreamController<ErrorPackage> _errorStreamController = StreamController.broadcast();

  ///zone error sink
  static StreamSink<ErrorPackage> get errorSink => _errorStreamController.sink;

  ///zone error stream
  /// * 可以监听[errorStream]获取错误信息。
  static Stream<ErrorPackage> get errorStream => _errorStreamController.stream;

  //...other code
}

完整示例Demo

为了更好地理解如何使用ume_kit_channel_observer插件，以下是一个完整的示例Demo。

示例代码

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

void main() {
  // 初始化插件
  UmeKitChannelObserver.customZone(const MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('UME Kit Channel Observer Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 模拟一个channel调用
              UmeKitChannelObserver.errorSink.add(ErrorPackage(
                message: 'Simulated type error',
                stackTrace: StackTrace.current,
              ));
            },
            child: Text('模拟错误'),
          ),
        ),
      ),
    );
  }
}

// 自定义一个简单的ChannelObserverWidget
class ChannelObserverWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<ErrorPackage>(
      stream: UmeKitChannelObserver.errorStream,
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return Container();
        }
        final error = snapshot.data!;
        return Column(
          children: [
            Text('Error Message: ${error.message}'),
            Text('Stack Trace: ${error.stackTrace}'),
          ],
        );
      },
    );
  }
}

运行步骤

  1. 创建一个新的Flutter项目。
  2. 在pubspec.yaml文件中添加ume_kit_channel_observer依赖：
    dependencies:
  flutter:
    sdk: flutter
  ume_kit_channel_observer: ^1.0.0 # 请替换为最新版本号

更多关于Flutter通道监听插件ume_kit_channel_observer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter通道监听插件ume_kit_channel_observer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


ume_kit_channel_observer 是一个用于 Flutter 的插件，它可以帮助开发者在调试过程中监听和查看 Flutter 的 MethodChannel 和 EventChannel 的通信情况。这个插件通常与 UMeng 的调试工具 UMEBug 一起使用，以便更方便地监控和调试 Flutter 与原生平台之间的通信。

使用步骤

  1. 添加依赖 在 pubspec.yaml 文件中添加 ume_kit_channel_observer 依赖：

    dependencies:
  flutter:
    sdk: flutter
  ume_kit_channel_observer: ^latest_version

    然后运行 flutter pub get 来安装依赖。

  2. 初始化插件 在你的 main.dart 文件中初始化 ume_kit_channel_observer 插件：

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

void main() {
  // 初始化插件
  UmeKitChannelObserver.init();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

  3. 使用 MethodChannel 或 EventChannel 在你的代码中使用 MethodChannel 或 EventChannel 进行通信，ume_kit_channel_observer 会自动监听这些通信。

    例如，使用 MethodChannel 调用原生方法：

    import 'package:flutter/services.dart';

class MyHomePage extends StatelessWidget {
  static const platform = MethodChannel('com.example.app/channel');

  Future<void> _callNativeMethod() async {
    try {
      final String result = await platform.invokeMethod('nativeMethod');
      print('Result from native: $result');
    } on PlatformException catch (e) {
      print('Failed to invoke native method: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _callNativeMethod,
          child: Text('Call Native Method'),
        ),
      ),
    );
  }
}
回到顶部