Flutter实时错误反馈与调试插件instabug_flutter的使用

Instabug for Flutter

Instabug是一个强大的Flutter插件，提供了丰富的功能来帮助开发者进行应用开发中的错误反馈与调试。通过这个插件，你可以轻松地收集和管理应用的Bug报告、崩溃报告、性能监控数据等。

Available Features

Feature	Status
Bug Reporting	✅
Crash Reporting	✅
App Performance Monitoring	✅
In-App Replies	✅
In-App Surveys	✅
Feature Requests	✅

✅ Stable
⚙️ Under active development

Integration

Installation

在你的pubspec.yaml文件中添加Instabug：

dependencies:
  instabug_flutter:

安装包：

flutter packages get

Initializing Instabug

在你的main函数中初始化SDK。这将启动SDK，并设置它在设备摇晃时显示。

import 'package:instabug_flutter/instabug_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  Instabug.init(
    token: 'APP_TOKEN',
    invocationEvents: [InvocationEvent.shake],
  );

  runApp(MyApp());
}

⚠️ 如果你正在从v11之前的版本更新SDK，请检查我们的migration guide。

Crash reporting

Instabug会自动捕获应用程序的每一次崩溃，并将相关细节发送到仪表板的崩溃页面。

⚠️ 崩溃只会报告在发布模式下，而不会在调试模式下报告。

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

      Instabug.init(
        token: 'APP_TOKEN',
        invocationEvents: [InvocationEvent.shake],
      );

      FlutterError.onError = (FlutterErrorDetails details) {
        Zone.current.handleUncaughtError(details.exception, details.stack!);
      };

      runApp(MyApp());
    },
    CrashReporting.reportCrash,
  );
}

Repro Steps

重现步骤（Repro Steps）会列出用户在报告Bug或崩溃前采取的所有操作，按他们访问的应用程序屏幕分组。

要启用此功能，你需要将InstabugNavigatorObserver添加到navigatorObservers中：

runApp(MaterialApp(
  navigatorObservers: [InstabugNavigatorObserver()],
));

Network Logging

你可以选择将所有的网络请求附加到发送到仪表板的报告中。当使用dart:io包中的HttpClient时，请参阅Instabug Dart IO Http Client仓库。

我们也支持http和dio包。有关如何为这些外部包启用网络日志记录的详细信息，请参阅Instabug Dart Http Adapter和Instabug Dio Interceptor仓库。

Microphone and Photo Library Usage Description (iOS Only)

Instabug需要访问麦克风和照片库，以便用户能够添加音频和视频附件。从iOS 10开始，如果应用程序没有为这两个权限提供使用说明，提交到App Store时会被拒绝。

为了防止你的应用程序被拒绝，你需要在应用程序的info.plist文件中添加以下两个键，并附上解释给用户的文本，说明为什么需要这些权限：

NSMicrophoneUsageDescription
NSPhotoLibraryUsageDescription

如果你的应用程序还没有访问麦克风或照片库，我们建议使用如下使用说明：

“<app name>需要访问麦克风以能够附加语音笔记。”
“<app name>需要访问你的照片库，以便你能够附加图片。”

只有当用户尝试在使用Instabug时附加语音笔记/照片时，才会出现访问麦克风/照片库的权限提示。

示例代码

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

import 'dart:async';
import 'dart:developer';
import 'dart:io';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:instabug_flutter/instabug_flutter.dart';
import 'package:instabug_http_client/instabug_http_client.dart';
import 'package:instabug_flutter_example/src/app_routes.dart';
import 'package:instabug_flutter_example/src/widget/nested_view.dart';

import 'src/native/instabug_flutter_example_method_channel.dart';
import 'src/widget/instabug_button.dart';
import 'src/widget/instabug_clipboard_input.dart';
import 'src/widget/instabug_text_field.dart';
import 'package:instabug_flutter/src/utils/screen_loading/screen_loading_manager.dart';

import 'src/widget/section_title.dart';

part 'src/screens/crashes_page.dart';
part 'src/screens/complex_page.dart';
part 'src/screens/apm_page.dart';
part 'src/screens/screen_capture_premature_extension_page.dart';
part 'src/screens/screen_loading_page.dart';
part 'src/screens/my_home_page.dart';
part 'src/components/fatal_crashes_content.dart';
part 'src/components/non_fatal_crashes_content.dart';
part 'src/components/network_content.dart';
part 'src/components/page.dart';
part 'src/components/traces_content.dart';
part 'src/components/flows_content.dart';

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

      Instabug.init(
        token: 'ed6f659591566da19b67857e1b9d40ab',
        invocationEvents: [InvocationEvent.floatingButton],
        debugLogsLevel: LogLevel.verbose,
      );

      FlutterError.onError = (FlutterErrorDetails details) {
        Zone.current.handleUncaughtError(details.exception, details.stack!);
      };

      runApp(const MyApp());
    },
    CrashReporting.reportCrash,
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      navigatorObservers: [
        InstabugNavigatorObserver(),
      ],
      routes: APM.wrapRoutes(appRoutes, exclude: [CrashesPage.screenName]),
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
    );
  }
}

这段代码展示了如何初始化Instabug，配置错误处理机制，并将InstabugNavigatorObserver添加到navigatorObservers中，以确保重现步骤功能正常工作。

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

itying888 1楼•2 天前

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

当然，下面是一个关于如何在Flutter项目中使用instabug_flutter插件来实现实时错误反馈与调试的示例代码。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加instabug_flutter的依赖：

dependencies:
  flutter:
    sdk: flutter
  instabug_flutter: ^10.0.0  # 请确保使用最新版本

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

2. 配置Instabug

在你的Flutter应用的入口文件（通常是main.dart）中，配置Instabug。你需要提供你的Instabug token，这个token可以在Instabug的仪表盘上找到。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 配置Instabug
  Instabug.initialize(
    token: 'YOUR_INSTABUG_TOKEN', // 替换为你的Instabug token
    enableFloatingButton: true, // 是否显示浮动按钮
    invocationEvent: InvocationEvent.shake, // 触发方式，这里设置为摇一摇
  );

  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 Flutter Example'),
      ),
      body: Center(
        child: Text('Shake your device to invoke Instabug!'),
      ),
    );
  }
}

3. 自定义Instabug功能（可选）

你可以根据需要自定义Instabug的功能，比如设置不同的触发事件、启用或禁用某些功能等。以下是一些自定义配置的示例：

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 自定义Instabug配置
  Instabug.initialize(
    token: 'YOUR_INSTABUG_TOKEN',
    enableFloatingButton: false, // 禁用浮动按钮
    invocationEvent: InvocationEvent.fabricButton, // 使用自定义按钮触发
    primaryColor: Colors.red, // 设置Instabug浮动按钮的主颜色
    floatingButtonEdge: FloatingButtonEdge.left, // 设置浮动按钮的位置在屏幕左侧
    floatingButtonOffsetY: 50, // 设置浮动按钮的Y轴偏移量
    invocationOptions: InvocationOptions(
      enableChat: true, // 启用聊天功能
      enableEmail: true, // 启用邮件功能
      enablePhone: true, // 启用电话功能
      enable附件收集: true, // 启用附件收集功能
      // 可以根据需要添加更多配置
    ),
  );

  runApp(MyApp());
}

4. 使用Instabug进行错误报告和调试

在你的应用中，当用户遇到问题时，他们可以通过摇一摇设备（或者根据你的配置，通过其他方式）来触发Instabug界面。在那里，他们可以报告问题、截图、录制视频等，这些信息会自动发送到你的Instabug仪表盘上。

5. 监听Instabug事件（可选）

你还可以监听Instabug的事件，以便在用户进行某些操作时执行自定义逻辑：

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  Instabug.initialize(
    token: 'YOUR_INSTABUG_TOKEN',
    // 其他配置...
  );

  // 监听Instabug事件
  Instabug.onReportSubmitted().listen((report) {
    print('Report submitted: $report');
    // 在这里执行自定义逻辑，比如显示一个提示给用户
  });

  runApp(MyApp());
}

注意：report对象包含了报告的详细信息，你可以根据需要进行处理。

以上就是在Flutter项目中使用instabug_flutter插件来实现实时错误反馈与调试的基本步骤和代码示例。希望这对你有所帮助！