Flutter错误处理插件ziton_error的使用

Flutter 错误处理插件 ziton_error 的使用

Ziton Error

A Flutter 包用于错误监控和报告。在调试级别时监听常见的 Flutter 错误，并在发生错误时将错误详情、堆栈跟踪、平台和屏幕信息推送到 ziton 项目仪表板。 在生产模式下，使用 reportError 函数报告错误，用户可以指定自定义错误消息和描述、平台和屏幕信息，以及错误消息推送至 ziton 仪表板。

特性

• 带有上下文的错误信息
• 平台和屏幕信息
• 带有导致错误行的错误文件信息
• 项目面板用于协作
• 分配和共享错误
• 在生产模式下报告错误

开始使用

0. 创建项目

在 Ziton 仪表板中创建一个 Flutter 项目并复制该项目的 dsn。

1. 依赖它

在项目的 pubspec.yaml 文件中添加包名称和版本号：

dependencies:
  ziton_error: 0.0.3

2. 安装它

从命令行安装包：

使用 pub：

$ pub get

使用 flutter：

$ flutter pub get

3. 导入它

在包含 runApp 函数的 Dart 文件中导入包：

import 'package:ziton_error/ziton_error.dart';

调试级别下的使用

导入 ziton_error 包并在主函数中监听错误：

// 调用 FlutterError 函数
void main() {
  FlutterError.onError = (FlutterErrorDetails errorDetails) {
    // 报告错误到 ziton
    ZitonError(
        "https://OokNpSGVsSrzqesUiHBTXHnzFDtGMVoViJdgtXcFNCUmYwhQhwXiouYWbTFy.ziton.live",
        errorDetails);
  };
  runApp(const MyApp());
}

生产级别下的使用

导入 ziton_error 包并在捕获块中使用 reportError 函数：

try {
  // 可能会出错的操作
} catch (error) {
  // 使用参数 dsn、名称、文件名和描述调用 reportError 函数
  ReportError(
    "https://OokNpSGVsSrzqesUiHBTXHnzFDtGMVoViJdgtXcFNCUmYwhQhwXiouYWbTFy.ziton.live",
    "error function does not exist",
    "main.dart",
    "错误运行此代码。此代码会产生必须报告给 ziton live 的错误。",
  );
}

仪表板错误视图

• ✅ 错误列表按发生次数排序并基于时间进行排序
• ✅ 单个错误带有元数据和详细的堆栈跟踪视图

创建项目并生成 dsn

• ✅ 访问 ziton.live 首页
• ✅ 登录到 ziton.live
• ✅ 点击新建项目
• ✅ 添加项目名称和描述
• ✅ 选择堆栈（例如 Flutter/Django）
• ✅ 复制您的 dsn 并将其添加到项目中

项目信息

• ✅ 选择项目卡片右上角的红色标记
• ✅ 查看项目 dsn
• ✅ 删除项目
• ✅ 添加协作者

可以在以下屏幕中完成这些操作：

额外信息

访问 Ziton Home 获取更多信息。

示例代码

example/lib/main.dart

import 'package:ziton_error/ziton_error.dart';
import 'package:flutter/material.dart';
import 'package:zitonapp/Error/inparent.dart';
import 'package:zitonapp/Error/inputdeco.dart';
import 'package:zitonapp/Error/overflow.dart';
import 'package:zitonapp/Error/setstate.dart';
import 'package:zitonapp/Error/viewport.dart';

void main() {
  FlutterError.onError = (FlutterErrorDetails errorDetails) {
    ZitonError(
        "https://OokNpSGVsSrzqesUiHBTXHnzFDtGMVoViJdgtXcFNCUmYwhQhwXiouYWbTFy.ziton.live",
        errorDetails);
  };
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ziton App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<dynamic> errorName = [
    "RenderFlex overflowed",
    "InputDecorator cannot have unbounded width",
    "Incorrect use of ParentData widget",
    "setState called during build",
    "Vertical viewport was given unbounded height",
  ];
  List<Widget> errorRoute = [
    const Overflow(),
    const InputDeco(),
    const InParent(),
    const SetSta(),
    const ViewPort(),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: EdgeInsets.only(
            left: screenWidth * .08,
            right: screenWidth * .08,
            top: screenHeight * .1),
        child: SizedBox(
          height: screenHeight,
          width: screenWidth,
          child: Column(
            children: [
              const Text(
                "Error List",
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.black),
              ),
              SizedBox(
                height: screenHeight * .8,
                child: ListView.builder(
                  physics: const BouncingScrollPhysics(),
                  itemCount: errorName.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                      padding: EdgeInsets.only(bottom: screenHeight * .06),
                      child: Container(
                        height: screenHeight * .06,
                        width: screenWidth * .6,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(18),
                            color: Colors.white),
                        child: ElevatedButton(
                          onPressed: () {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => errorRoute[index]));
                          },
                          style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.black),
                            shadowColor:
                                MaterialStateProperty.all(Colors.white),
                            elevation: MaterialStateProperty.all(0),
                            overlayColor: MaterialStateProperty.all(
                                Colors.grey.withOpacity(.2)),
                          ),
                          child: Text(
                            errorName[index],
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              overflow: TextOverflow.clip,
                              fontSize: 15,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}