Flutter 异常捕获_flutter 怎么捕获异步异常

Flutter 框架异常捕获

Flutter 框架为我们在很多关键的方法进行了异常捕获。
当我们布局发生越界或不合规范时，Flutter就会自动弹出一个错误界面，比如说这样子，

虽然代码出现了错误，但是并不会导致APP崩溃，Flutter会帮我们捕获异常。

在Flutter中Widget会创建对应的Element，StatefulWidget会创建StatefulElement，StatelessWidget会创建StatelessElement，无论StatefulElement还是StatelessElement都是ComponentElement，

  /// Calls the [StatelessWidget.build] method of the [StatelessWidget] object
  /// (for stateless widgets) or the [State.build] method of the [State] object
  /// (for stateful widgets) and then updates the widget tree.
  ///
  /// Called automatically during [mount] to generate the first build, and by
  /// [rebuild] when the element needs updating.
  @override
  @pragma('vm:notify-debugger-on-exception')
  void performRebuild() {
    Widget? built;
    try {
      ...
      //执行build方法
      built = build();
      ...
      debugWidgetBuilderValue(widget, built);
    } catch (e, stack) {
      _debugDoingBuild = false;
      built = ErrorWidget.builder(
        _reportException(
          ErrorDescription('building $this'),
          e,
          stack,
          informationCollector: () => <DiagnosticsNode>[
            if (kDebugMode)
              DiagnosticsDebugCreator(DebugCreator(this)),
          ],
        ),
      );
    } finally {
      // We delay marking the element as clean until after calling build() so
      // that attempts to markNeedsBuild() during build() will be ignored.
      super.performRebuild(); // clears the "dirty" flag
    }
    try {
      _child = updateChild(_child, built, slot);
      assert(_child != null);
    } catch (e, stack) {
      built = ErrorWidget.builder(
        _reportException(
          ErrorDescription('building $this'),
          e,
          stack,
          informationCollector: () => <DiagnosticsNode>[
            if (kDebugMode)
              DiagnosticsDebugCreator(DebugCreator(this)),
          ],
        ),
      );
      _child = updateChild(null, built, slot);
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

ComponentElement-performRebuild这个方法用来调用StatelessWidget或者State的build方法，并更新Widget树。
使用try-catch进行异常捕获，捕获到异常时，创建一个ErrorWidget弹出提示。
ErrorWidget.builder接受了一个_debugReportException方法返回的FlutterErrorDetails进行异常展示。

FlutterErrorDetails _reportException(
  DiagnosticsNode context,
  Object exception,
  StackTrace? stack, {
  InformationCollector? informationCollector,
}) {
  //构建异常详情对象
  final FlutterErrorDetails details = FlutterErrorDetails(
    exception: exception,
    stack: stack,
    library: 'widgets library',
    context: context,
    informationCollector: informationCollector,
  );
  //报告异常
  FlutterError.reportError(details);
  return details;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

通过FlutterError.reportError方法上报异常

  static void reportError(FlutterErrorDetails details) {
    onError?.call(details); //调用了onError回调
  }
1
2
3

onError是FlutterError的一个静态属性，它有一个默认的处理方法 dumpErrorToConsole。
如果我们想自己上报异常，只需要提供一个自定义的错误处理回调即可。

  FlutterError.onError = (FlutterErrorDetails details) {
    reportError(details);
  };
1
2
3

其他异常捕获

同步异常捕获

同步异常可以通过try/catch捕获

  // 使用 try-catch 捕获同步异常
  try {
    throw StateError("xxx");
  } catch (e, stack) {
    print(e);
  }
1
2
3
4
5
6

异步异常捕获

异步异常无法被try/catch捕获

try {
    Future.delayed(Duration(seconds: 1)).then((e) => Future.error("xxx"));
} catch (e) {
    print(e)
}
1
2
3
4
5

捕获异步异常使用Future 提供的 catchError 语句：

// 使用 catchError 捕获异步异常
Future.delayed(Duration(seconds: 1))
    .then((e) => Future.error("xxx"))
    .catchError((e)=>print(e));
1
2
3
4

有没有一种方式既可以监控同步又可以监控异步异常呢？

Zone & PlatformDispatcher

Zone表示一个代码执行的环境范围，不同的Zone代码上下文是不同的互不影响。类似一个代码执行沙箱，不同沙箱的之间是隔离的，沙箱可以捕获、拦截或修改一些代码行为，如Zone中可以捕获日志输出、Timer创建、微任务调度的行为，同时Zone也可以捕获所有未处理的异常。

  runZonedGuarded(() => runApp(MyApp()), (error, stack) {
    print(error);
  });
1
2
3

官方现在已经不推荐这个，更推荐使用PlatformDispatcher

  PlatformDispatcher.instance.onError = (error, stack) {
    print(error);
    return true;
  };
1
2
3
4

捕获异常并上报

void main() {
  var onError = FlutterError.onError; //先将 onerror 保存起来
  FlutterError.onError = (FlutterErrorDetails details) {
    onError?.call(details); //调用默认的onError处理
    reportError(details);
  };
  PlatformDispatcher.instance.onError = (error, stack) {
    reportError(error);
    return true;
  };
  runApp(const MyApp());
}
1
2
3
4
5
6
7
8
9
10
11
12

参考文档：
https://flutter.cn/docs/testing/errors