Flutter错误追踪插件sentry_dio的使用

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

Flutter错误追踪插件sentry_dio的使用


Sentry集成用于dio

package build pub likes popularity pub points
sentry_dio build pub package likes popularity pub points

这是针对Dio包的集成,以便在Flutter应用中实现对HTTP请求的错误追踪和性能监控。

使用方法

  1. 注册Sentry.io账号并获取DSN:访问Sentry.io,注册账号后创建一个项目以获取DSN(Data Source Name)。
  2. 安装依赖:按照pub.dev上的说明添加sentry_dio到您的pubspec.yaml文件中。
  3. 初始化Sentry SDK:使用从Sentry.io获得的DSN来初始化Sentry SDK。
  4. 配置Dio:调用dio.addSentry()。这一步必须是Dio设置的最后一步,否则你的Dio配置可能会覆盖Sentry配置。
import 'package:sentry/sentry.dart';
import 'package:sentry_dio/sentry_dio.dart';

Future<void> main() async {
  await Sentry.init(
    (options) {
      options.dsn = 'https://example@sentry.io/example'; // 替换为你的DSN
    },
    appRunner: initDio, // 初始化你的App
  );
}

void initDio() {
  final dio = Dio();
  /// 这 *必须* 是Dio设置的最后一步,否则你的Dio配置可能会覆盖Sentry配置。
  dio.addSentry(...);
}

根据你的配置,这将添加性能跟踪和HTTP面包屑。此外,来自无效HTTP状态码或解析异常的异常也会被自动捕获。

示例代码

下面是一个完整的示例,演示了如何使用sentry_dio进行错误追踪:

import 'package:dio/dio.dart';
import 'package:sentry/sentry.dart';
import 'package:sentry_dio/sentry_dio.dart';

Future<void> main() async {
  // 注意:请将下面的DSN替换为你自己的DSN,以便在Sentry中查看事件。你可以在sentry.io获取一个DSN
  const dsn =
      'https://e85b375ffb9f43cf8bdf9787768149e0@o447951.ingest.sentry.io/5428562';

  await Sentry.init(
    (options) {
      options.dsn = dsn;
      options.tracesSampleRate = 1.0; // 需要用于Dio `captureFailedRequests`特性
      options.debug = true;
      options.sendDefaultPii = true;

      options.maxRequestBodySize = MaxRequestBodySize.small;
      options.maxResponseBodySize = MaxResponseBodySize.small;
    },
    appRunner: runApp, // 初始化你的App
  );
}

Future<void> runApp() async {
  final dio = Dio();
  dio.addSentry();

  final transaction = Sentry.startTransaction(
    'dio-web-request',
    'request',
    bindToScope: true,
  );

  try {
    final response = await dio.get<Map<String, Object?>>('https://www.google.com/idontexist');

    print(response.toString());

    transaction.status = SpanStatus.fromHttpStatusCode(response.statusCode ?? -1);
  } catch (exception) {
    transaction.throwable = exception;
    transaction.status = const SpanStatus.internalError();
  } finally {
    await transaction.finish();
  }

  await Sentry.close();
}

此示例展示了如何通过sentry_dio插件来处理HTTP请求,并将异常和性能数据发送给Sentry进行监控和分析。确保你已经正确替换了DSN,并根据需要调整其他选项。

资源

希望这些信息能帮助你在Flutter项目中成功集成和使用sentry_dio


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

1 回复

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


在Flutter项目中,使用sentry_dio插件可以帮助你追踪通过dio库发起的HTTP请求中的错误。以下是一个如何在Flutter项目中配置和使用sentry_dio的详细代码案例。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加sentrydio以及sentry_dio的依赖:

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0  # 请确保使用与sentry_dio兼容的版本
  sentry_flutter: ^6.0.0  # 请检查最新版本
  sentry_dio: ^0.6.0  # 请检查最新版本,确保与dio和sentry_flutter兼容

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

2. 配置Sentry

在你的Flutter项目的入口文件(通常是main.dart)中,初始化Sentry:

import 'package:flutter/material.dart';
import 'package:sentry_flutter/sentry_flutter.dart';
import 'package:dio/dio.dart';
import 'package:sentry_dio/sentry_dio.dart';

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

  // 初始化Sentry
  await Sentry.init((options) {
    options.dsn = 'https://your-sentry-dsn@sentry.io/your-project-id';
    options.environment = 'production'; // 或者 'development'
    // 其他可选配置
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sentry with Dio Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

3. 配置Dio并使用Sentry拦截器

在你的网络请求模块中,配置dio并使用sentry_dio提供的拦截器:

import 'package:dio/dio.dart';
import 'package:sentry_dio/sentry_dio.dart';

class NetworkService {
  final Dio dio;

  NetworkService() {
    dio = Dio(BaseOptions(
      baseUrl: 'https://api.example.com',
      // 其他dio配置
    ));

    // 添加Sentry拦截器
    dio.interceptors.add(SentryDioInterceptor(dio));
  }

  Future<Response> fetchData() async {
    try {
      Response response = await dio.get('/data');
      return response;
    } catch (error) {
      // 这里可以处理错误,但Sentry会自动捕获
      throw error;
    }
  }
}

4. 使用NetworkService

在你的UI组件中使用NetworkService来发起网络请求:

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String data = '';
  bool loading = false;

  final NetworkService networkService = NetworkService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: loading
          ? Center(child: CircularProgressIndicator())
          : Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    data,
                    style: TextStyle(fontSize: 24),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: fetchData,
                    child: Text('Fetch Data'),
                  ),
                ],
              ),
            ),
    );
  }

  Future<void> fetchData() async {
    setState(() {
      loading = true;
    });

    try {
      Response response = await networkService.fetchData();
      setState(() {
        data = response.data.toString();
        loading = false;
      });
    } catch (error) {
      // 处理错误,例如显示Snackbar
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Failed to fetch data: ${error.message}'),
        ),
      );
      setState(() {
        loading = false;
      });
      // Sentry已经捕获了这个错误,不需要在这里额外处理
    }
  }
}

以上代码展示了如何在Flutter项目中配置和使用sentry_dio来追踪通过dio库发起的HTTP请求中的错误。请确保你已经在Sentry上创建了项目并获取了正确的DSN。

回到顶部