Flutter错误追踪插件source_map_stack_trace的使用

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

Flutter错误追踪插件 source_map_stack_trace 的使用

source_map_stack_trace 是一个用于将由 dart2js 编译生成的 JavaScript 代码的堆栈跟踪转换为可读的 Dart 原生堆栈跟踪的包。它通过使用 source map 文件来实现这一点，从而使得调试更加容易。

示例代码

下面是一个简单的示例，展示了如何使用 source_map_stack_trace 包：

import 'package:source_map_stack_trace/source_map_stack_trace.dart';

void main() {
  // 假设这是由 dart2js 生成的 StackTrace
  var jsTrace = StackTrace.current;
  
  // 获取 source map 映射
  // 这里需要你提供正确的 sourceMap 路径或内容
  var sourceMap = /* 获取你的 source map */;
  
  // 将 jsTrace 转换为 Dart 原生的堆栈跟踪
  var dartTrace = mapStackTrace(jsTrace, sourceMap);
  
  print(dartTrace);
}

输入与输出对比

输入（JavaScript 堆栈跟踪）

expect_async_test.dart.browser_test.dart.js 2636:15   dart.wrapException
expect_async_test.dart.browser_test.dart.js 14661:15  main__closure16.call$0
expect_async_test.dart.browser_test.dart.js 18237:26  Declarer_test__closure.call$1
expect_async_test.dart.browser_test.dart.js 17905:23  StackZoneSpecification_registerUnaryCallback__closure.call$0
expect_async_test.dart.browser_test.dart.js 17876:16  StackZoneSpecification._stack_zone_specification$_run$2
expect_async_test.dart.browser_test.dart.js 17899:26  StackZoneSpecification_registerUnaryCallback_closure.call$1
expect_async_test.dart.browser_test.dart.js 6115:16   _rootRunUnary
expect_async_test.dart.browser_test.dart.js 8576:39   _CustomZone.runUnary$2
expect_async_test.dart.browser_test.dart.js 7135:57   _Future__propagateToListeners_handleValueCallback.call$0
expect_async_test.dart.browser_test.dart.js 7031:147  dart._Future.static._Future__propagateToListeners

输出（Dart 原生堆栈跟踪）

dart:_internal/compiler/js_lib/js_helper.dart 1210:1          wrapException
test/frontend/expect_async_test.dart 24:5                     main.<fn>.<fn>
package:test/src/backend/declarer.dart 45:48                  Declarer.test.<fn>.<fn>
package:stack_trace/src/stack_zone_specification.dart 134:30  StackZoneSpecification.registerUnaryCallback.<fn>.<fn>
package:stack_trace/src/stack_zone_specification.dart 210:7   StackZoneSpecification._run
package:stack_trace/src/stack_zone_specification.dart 135:5   StackZoneSpecification.registerUnaryCallback.<fn>
dart:async/zone.dart 904:14                                   _rootRunUnary
dart:async/zone.dart 806:3                                    _CustomZone.runUnary
dart:async/future_impl.dart 486:13                            _Future._propagateToListeners.handleValueCallback
dart:async/future_impl.dart 567:32                            _Future._propagateToListeners

如何获取 Source Map

为了正确地使用这个包，你需要确保你的项目在编译时生成了 source map 文件，并且你知道这些文件的位置或内容。通常情况下，如果你使用的是 Web 应用程序，你可以通过构建工具（如 webdev build）生成这些文件。

希望这个示例能帮助你更好地理解如何在 Flutter 或 Dart Web 应用中使用 source_map_stack_trace 来提高错误追踪和调试效率。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用source_map_stack_trace插件来进行错误追踪的一个示例。这个插件可以帮助你将Dart的堆栈跟踪信息映射回源代码，从而更容易地进行调试和错误追踪。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  source_map_stack_trace: ^2.1.0  # 确保使用最新版本

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

步骤 2: 配置构建脚本

为了生成源映射文件（.dart_tool/flutter_build/xxxx/kernel_blob.bin.dill.map），你需要在构建过程中启用源映射。Flutter默认会生成这些文件，但确保你的构建命令没有禁用它们。

步骤 3: 捕获和处理异常

接下来，在你的应用中捕获异常并使用source_map_stack_trace来处理堆栈跟踪。以下是一个简单的示例：

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

void main() {
  // 初始化sourceMapStackTrace
  runZonedGuarded(() {
    runApp(MyApp());
  }, (error, stackTrace) {
    // 在这里处理未捕获的异常
    handleUncaughtError(error, stackTrace);
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              throw Exception('这是一个测试异常');
            },
            child: Text('Throw Exception'),
          ),
        ),
      ),
    );
  }
}

void handleUncaughtError(Object error, StackTrace stackTrace) {
  // 尝试解析堆栈跟踪
  final parsedStackTrace = parseStackTrace(stackTrace);
  
  // 打印解析后的堆栈跟踪信息
  print('Error: $error');
  print('Parsed Stack Trace:');
  for (var frame in parsedStackTrace.frames) {
    print('  ${frame.member} (${frame.uri}:${frame.line}:${frame.column})');
  }

  // 这里可以添加更多的错误处理逻辑，比如发送到错误追踪服务
}

步骤 4: 确保源映射文件可用

在开发环境中，源映射文件通常会自动生成。但是，在生产环境中，你可能需要手动生成和上传这些文件到你的错误追踪服务。这通常涉及到构建你的应用并提取.dart_tool/flutter_build/.../kernel_blob.bin.dill.map文件。

注意事项

  • 确保在发布应用时，不要将源映射文件包含在应用包中，因为它们可能包含敏感信息。
  • 使用第三方错误追踪服务（如Sentry）时，你可能需要按照该服务的文档配置源映射文件的上传。

这个示例展示了如何在Flutter应用中使用source_map_stack_trace插件来捕获和处理异常，并将堆栈跟踪信息映射回源代码。根据你的具体需求，你可能需要调整错误处理逻辑和源映射文件的管理方式。

回到顶部