Flutter 页面中的异常处理ErrorWidget

朱雀 2022-12-25 15:47 98阅读 0赞

## Flutter中异常处理 ##

Dart是单进程机制，所以在这个进程中出现问题时仅仅会影响当前进程，在事件循环中，**当某个任务发生异常并没有被捕获时**，程序并不会退出，而直接导致的结果是**当前任务的后续代码就不会被执行了**，也就是说一个任务中的异常是不会影响其它任务执行的。

### Flutter 异常 ###

Flutter 异常指的是，Flutter 程序中 Dart 代码运行时意外发生的错误事件。我们可以通过与 Java 类似的 try-catch 机制来捕获它。但**与 Java 不同的是，Dart 程序不强制要求我们必须处理异常**。

这是因为，Dart 采用事件循环的机制来运行任务，所以各个任务的运行状态是互相独立的。也就是说，即便某个任务出现了异常我们没有捕获它，Dart 程序也不会退出，只会导致当前任务后续的代码不会被执行，用户仍可以继续使用其他功能。

Dart 异常，根据来源又可以细分为 App 异常和 Framework 异常。Flutter 为这两种异常提供了不同的捕获方式，接下来我们就一起看看吧。

### App 异常的捕获方式 ###

App 异常，就是应用代码的异常，通常由未处理应用层其他模块所抛出的异常引起。根据异常代码的执行时序，App 异常可以分为两类，即同步异常和异步异常：同步异常可以通过 try-catch 机制捕获，异步异常则需要采用 Future 提供的 catchError 语句捕获。

这两种异常的捕获方式，如下代码所示：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</code></pre> </td> 
   <td> <pre><code>// 使用 try-catch 捕获同步异常
try {
  throw StateError('This is a Dart exception.');
}
catch(e) {
  print(e);
}
 
// 使用 catchError 捕获异步异常
Future.delayed(Duration(seconds: 1))
    .then((e) =&gt; throw StateError('This is a Dart exception in Future.'))
    .catchError((e)=&gt;print(e));
    
// 注意，以下代码无法捕获异步异常
try {
  Future.delayed(Duration(seconds: 1))
      .then((e) =&gt; throw StateError('This is a Dart exception in Future.'))
}
catch(e) {
  print("This line will never be executed. ");
}
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

需要注意的是，这两种方式是不能混用的。可以看到，在上面的代码中，我们是无法使用 try-catch 去捕获一个异步调用所抛出的异常的。

同步的 try-catch 和异步的 catchError，为我们提供了直接捕获特定异常的能力，而如果我们想集中管理代码中的所有异常，Flutter 也提供了 Zone.runZoned 方法。

我们可以给代码执行对象指定一个 Zone，在 Dart 中，Zone 表示一个代码执行的环境范围，其概念类似沙盒，不同沙盒之间是互相隔离的。如果我们想要观察沙盒中代码执行出现的异常，沙盒提供了 onError 回调函数，拦截那些在代码执行对象中的未捕获异常。

在下面的代码中，我们将可能抛出异常的语句放置在了 Zone 里。可以看到，在没有使用 try-catch 和 catchError 的情况下，无论是同步异常还是异步异常，都可以通过 Zone 直接捕获到：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</code></pre> </td> 
   <td> <pre><code>runZoned(() {
  // 同步异常
  throw StateError('This is a Dart exception.');
}, onError: (dynamic e, StackTrace stack) {
  print('Sync error caught by zone');
});
 
runZoned(() {
  // 异步异常
  Future.delayed(Duration(seconds: 1))
      .then((e) =&gt; throw StateError('This is a Dart exception in Future.'));
}, onError: (dynamic e, StackTrace stack) {
  print('Async error aught by zone');
});
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

因此，如果我们想要集中捕获 Flutter 应用中的未处理异常，可以把 main 函数中的 runApp 语句也放置在 Zone 中。这样在检测到代码中运行异常时，我们就能根据获取到的异常上下文信息，进行统一处理了：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
</code></pre> </td> 
   <td> <pre><code>runZoned&lt;Future&lt;Null&gt;&gt;(() async {
  runApp(MyApp());
}, onError: (error, stackTrace) async {
 //Do sth for error
});
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

下面，我们再看看 Framework 异常应该如何捕获吧。

### Flutter 框架异常捕获 ###

Flutter 框架为我们在很多关键的方法进行了异常捕获。这里举一个例子，当我们布局发生越界或不和规范时，Flutter就会自动弹出一个错误界面，这是因为Flutter已经在执行build方法时添加了异常捕获，最终的源码如下：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
6
7
8
9
10
11
12
</code></pre> </td> 
   <td> <pre><code>@override
void performRebuild() {
 ...
  try {
    //执行build方法  
    built = build();
  } catch (e, stack) {
    // 有异常时则弹出错误提示  
    built = ErrorWidget.builder(_debugReportException('building $this', e, stack));
  } 
  ...
}
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

可以看到，在发生异常时，Flutter 默认的处理方式时弹一个 ErrorWidget ，但如果我们想自己捕获异常并上报到报警平台的话应该怎么做？我们进入 `_debugReportException()` 方法看看：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</code></pre> </td> 
   <td> <pre><code>FlutterErrorDetails _debugReportException(
  String context,
  dynamic 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;
}
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

我们发现，错误是通过 `FlutterError.reportError` 方法上报的，继续跟踪：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
</code></pre> </td> 
   <td> <pre><code>static void reportError(FlutterErrorDetails details) {
  ...
  if (onError != null)
    onError(details); //调用了onError回调
}
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

我们发现 `onError` 是 `FlutterError` 的一个静态属性，它有一个默认的处理方法  
`dumpErrorToConsole`，到这里就清晰了，如果我们想自己上报异常，只需要**提供一个自定义的错误处理回调**即可，如：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
6
</code></pre> </td> 
   <td> <pre><code>void main() {
  FlutterError.onError = (FlutterErrorDetails details) {
    reportError(details);
  };
 ...
}
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

在这里我们使用 Zone 提供的 handleUncaughtError 语句，将 Flutter 框架的异常统一转发到当前的 Zone 中，这样我们就可以统一使用 Zone 去处理应用内的所有异常了：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
6
7
8
9
10
</code></pre> </td> 
   <td> <pre><code>FlutterError.onError = (FlutterErrorDetails details) async {
  // 转发异常到 Zone 中
  Zone.current.handleUncaughtError(details.exception, details.stack);
};
 
runZoned&lt;Future&lt;Null&gt;&gt;(() async {
  runApp(MyApp());
}, onError: (error, stackTrace) async {
 //处理所有异常信息
});
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

同样的我们可以使用ErrorWidget.builder来自定义错误界面

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>1
2
3
4
5
6
7
8
9
10
11
12
13
</code></pre> </td> 
   <td> <pre><code>ErrorWidget.builder = (FlutterErrorDetails flutterErrorDetails) {
  return Scaffold(
      body: Center(
    child: Column(children: [
      Icon(
        Icons.error,
        color: Colors.red,
        size: 100,
      ),
      Text(flutterErrorDetails.exceptionAsString())
    ]),
  ));
};
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

一个局中显示的错误图片和错误文本

### 异常处理 ###

在错误界面我们可以根据Zone中的错误回调处理所有捕获的异常，当然，我们可以考虑把 错误文件存储到文件，上传到服务器或者上传到错误分析平台。

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>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
53
54
55
56
</code></pre> </td> 
   <td> <pre><code>import 'dart:async';

import 'package:flutter/material.dart';

main() {
  FlutterError.onError = (FlutterErrorDetails details) async {
    // 转发至 Zone 的错误回调
    Zone.current.handleUncaughtError(details.exception, details.stack);
  };

ErrorWidget.builder = (FlutterErrorDetails flutterErrorDetails) {
    return Scaffold(
        body: Container(
      padding: EdgeInsets.only(left: 20, right: 20),
      child: Column(children: [
        Icon(
          Icons.error,
          color: Colors.red,
          size: 100,
        ),
        Text(
          flutterErrorDetails.exceptionAsString(),
          style: TextStyle(color: Colors.blue, fontSize: 14),
          textAlign: TextAlign.start,
        )
      ]),
    ));
  };

runZoned&lt;Future&lt;Null&gt;&gt;(() async {
    runApp(new MaterialApp(
      home: HomePage(),
    ));
  }, onError: (error, stackTrace) async {
    print(error.toString());
  });
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ExceptionTitle"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("异常"),
          onPressed: () {
            throw new Exception("自定义异常");
          },
        ),
      ),
    );
  }
}
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

我们定义一个界面中间是一个按钮，点击按钮就会抛出一个自定义异常，在main方法中我们将FlutterError中的错误回调到Zone中，并把捕获到的异常信息打印到控制台。

![image-20200703173746128][]

点击异常按钮，观察控制台输出

![image-20200703173849117][]

同样的我们自定义了错误界面，当界面构建发生错误时就会显示我们自定义的错误界面

![image-20200703174632008][]

### 小结 ###

*  App 异常，我们可以将代码执行块放置到 Zone 中，通过 onError 回调进行统一处理
 *  Framework 异常，我们可以使用 FlutterError.onError 回调进行拦截
 *  通过将FlutterError.onError转发到Zone中可以统一进行异常处理
 *  ErrorWidget.builder可以自定义错误界面

[image-20200703173746128]: /images/20221120/f186c66f09d24003ba22979af57c3522.png
[image-20200703173849117]: /images/20221120/f3a347ff25594649ae339d9b8235582b.png
[image-20200703174632008]: /images/20221120/f4c2172d97e44e1bbd2d3ccedd40a59a.png