Flutter错误追踪与反馈插件instabug_flutter_modular的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter错误追踪与反馈插件instabug_flutter_modular的使用

安装

  1. 在你的 pubspec.yaml 文件中添加 instabug_flutter_modular
dependencies:
  instabug_flutter_modular:
  1. 运行以下命令以安装包。
flutter pub get

使用

  1. 将你的 AppParentModule 包裹在 InstabugModule 中:
void main() {
  //...

  runApp(
    ModularApp(
      module: InstabugModule(AppModule()),
      child: const MyApp(),
    ),
  );
}
  1. InstabugNavigatorObserver 添加到你的导航观察者列表中:
[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp.router(
    routeInformationParser: Modular.routeInformationParser,
    routerDelegate: Modular.routerDelegate
      ..setObservers([InstabugNavigatorObserver()]),

    // ...
  );
}

示例代码

示例文件:example/lib/main.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:flutter_modular_demo_app/modules.dart';
import 'package:instabug_flutter/instabug_flutter.dart';
import 'package:instabug_flutter_modular/instabug_flutter_modular.dart';

void main() {
  runZonedGuarded(
    () {
      WidgetsFlutterBinding.ensureInitialized();

      // 初始化 Instabug
      Instabug.init(
        token: '6b41bc30dd42aac50794ef3ec8f74a74',
        invocationEvents: [InvocationEvent.floatingButton],
        debugLogsLevel: LogLevel.verbose,
      );

      // 错误处理
      FlutterError.onError = (FlutterErrorDetails details) {
        Zone.current.handleUncaughtError(details.exception, details.stack!);
      };

      // 启动应用
      runApp(
        ModularApp(
          module: InstabugModule(AppModule()),
          child: const MyApp(),
        ),
      );
    },
    CrashReporting.reportCrash,
  );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: Modular.routeInformationParser,
      routerDelegate: Modular.routerDelegate
        ..setObservers([InstabugNavigatorObserver()]),

      title: 'Flutter Modular Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

更多关于Flutter错误追踪与反馈插件instabug_flutter_modular的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter错误追踪与反馈插件instabug_flutter_modular的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中集成和使用instabug_flutter_modular插件进行错误追踪与用户反馈的一个代码示例。这个插件允许你轻松地集成Instabug的功能,以便在应用中进行错误报告和用户反馈收集。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加instabug_flutter_modular的依赖:

dependencies:
  flutter:
    sdk: flutter
  instabug_flutter_modular: ^x.y.z  # 请替换为最新版本号

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

2. 配置Instabug

在你的应用入口文件(通常是main.dart)中,配置Instabug。你需要提供你的Instabug token(从Instabug仪表板获取)。

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

void main() {
  // 初始化Instabug
  Instabug.initialize(
    token: 'YOUR_INSTABUG_TOKEN',  // 替换为你的Instabug token
    enableFloatingButton: true,
    invocationEvent: 'shake',  // 或者使用 'swipe', 'button', 'none'
  );

  runApp(MyApp());
}

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Instabug Demo'),
      ),
      body: Center(
        child: Text('Shake your device to report a bug or leave feedback!'),
      ),
    );
  }
}

3. 使用Instabug功能

你可以在应用的任何位置调用Instabug的功能,比如手动触发反馈界面:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Instabug Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Shake your device to report a bug or leave feedback!'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 手动触发Instabug反馈界面
                Instabug.invoke();
              },
              child: Text('Invoke Instabug'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 捕获异常(可选)

你还可以使用Instabug来捕获未处理的异常:

import 'package:flutter/material.dart';
import 'package:instabug_flutter_modular/instabug_flutter_modular.dart';
import 'dart:async';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化Instabug
  Instabug.initialize(
    token: 'YOUR_INSTABUG_TOKEN',  // 替换为你的Instabug token
    enableFloatingButton: true,
    invocationEvent: 'shake',  // 或者使用 'swipe', 'button', 'none'
  );

  // 捕获未处理的异常
  FlutterError.onError = (FlutterErrorDetails details) {
    if (InAppReview.isInstabugInitialized()) {
      Instabug.reportFlutterError(details);
    }
    Zone.current.handleUncaughtError(details.exception, details.stack);
  };

  runZonedGuarded<Future<void>>(() async {
    runApp(MyApp());
  }, (Object error, StackTrace stack) async {
    if (InAppReview.isInstabugInitialized()) {
      Instabug.reportError(error, stack);
    }
    // 这里可以添加其他错误处理逻辑
    print(error);
  });
}

// ... (MyApp 和 MyHomePage 的代码与之前相同)

这段代码展示了如何初始化Instabug,如何手动触发反馈界面,以及如何捕获并报告未处理的异常。请确保你已经从Instabug仪表板获取了正确的token,并根据你的需求调整配置选项。

回到顶部