Flutter中如何从FlutterErrorDetails获取错误所在类/页面名？

你可以通过以下几种方式获取错误发生的页面或类信息：

1. 解析FlutterErrorDetails中的堆栈跟踪信息 #

FlutterErrorDetails包含完整的堆栈跟踪（stackTrace），你可以解析这个信息提取错误发生的类名、文件名和行号。

示例修改： #

在CustomError的build方法中添加解析逻辑：

@override
Widget build(BuildContext context) {
  // 解析堆栈跟踪，提取第一个有效帧的类和文件信息
  String errorLocation = "Unknown location";
  if (widget.errorDetails.stackTrace != null) {
    final traceLines = widget.errorDetails.stackTrace.toString().split('\n');
    // 过滤系统框架栈帧，找到业务代码的帧
    final userTraceLine = traceLines.firstWhere(
      (line) => line.contains('.dart') && !line.contains('flutter framework'),
      orElse: () => traceLines.isNotEmpty ? traceLines[0] : "",
    );
    if (userTraceLine.isNotEmpty) {
      errorLocation = userTraceLine.trim();
    }
  }

  return Center(
    child: Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              "Something is not right here...",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              "Error location: $errorLocation",
              style: const TextStyle(color: Colors.white70),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
      color: Colors.red,
      margin: EdgeInsets.zero,
    ),
  );
}

如果需要更精准的解析，可使用stack_trace包（需在pubspec.yaml中添加依赖）：

import 'package:stack_trace/stack_trace.dart';

// 在build方法中解析
if (widget.errorDetails.stackTrace != null) {
  final trace = Trace.from(widget.errorDetails.stackTrace!);
  final frame = trace.frames.firstWhere(
    (f) => f.isUserFrame,
    orElse: () => trace.frames.first,
  );
  errorLocation = "${frame.library}:${frame.line}";
}

2. 通过上下文获取当前路由页面信息 #

在CustomError的build方法中，利用context获取当前活跃的路由信息：

@override
Widget build(BuildContext context) {
  String currentPage = "Unknown page";
  final route = ModalRoute.of(context);
  if (route != null) {
    // 获取路由名称（如果设置了name）
    if (route.settings.name != null) {
      currentPage = route.settings.name!;
    }
    // 或者直接获取页面widget的类型名
    else {
      currentPage = route.settings.runtimeType.toString();
    }
  }

  return Center(
    child: Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              "Something is not right here...",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              "Current page: $currentPage",
              style: const TextStyle(color: Colors.white70),
            ),
          ],
        ),
      ),
      color: Colors.red,
      margin: EdgeInsets.zero,
    ),
  );
}

3. 全局路由监听记录当前页面 #

通过自定义NavigatorObserver监听页面跳转，实时记录当前活跃页面：

步骤1：创建全局页面记录类 #

class CurrentPageTracker extends NavigatorObserver {
  static String? currentPageName;

  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    currentPageName = route.settings.name ?? route.runtimeType.toString();
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    currentPageName = previousRoute?.settings.name ?? previousRoute?.runtimeType.toString();
  }
}

步骤2：在MaterialApp中添加Observer #

MaterialApp(
  navigatorObservers: [CurrentPageTracker()],
  // ...其他配置
)

步骤3：在CustomError中使用记录的页面信息 #

@override
Widget build(BuildContext context) {
  final currentPage = CurrentPageTracker.currentPageName ?? "Unknown page";

  return Center(
    child: Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              "Something is not right here...",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              "Error occurred on: $currentPage",
              style: const TextStyle(color: Colors.white70),
            ),
          ],
        ),
      ),
      color: Colors.red,
      margin: EdgeInsets.zero,
    ),
  );
}

这些方法可单独或结合使用，帮你精准定位错误发生位置。

内容的提问来源于stack exchange，提问作者alshueili