乐趣区

Flutter Exception降到万分之几的秘密

1. flutter exception
闲鱼技术团队于 2018 年上半年率先引入了 Flutter 技术实现客户端开发,到目前为止成功改造并上线了复杂的商品详情和发布业务。随着 flutter 比重越来越多,我们开始大力治理 flutter 的 exception, 起初很长一段时间内闲鱼内 flutter 的 exception 率一直在千分之几左右。经过我们的整理和解决,解决了 90% 以上的 flutter exception。
我们对 exception 进行了归类,大头主要分为两大类, 这两大类堆栈数量很多, 占到整体 90% 左右:
1. 第一大类的堆栈都指向了 setstate
#0 State.setState (package:flutter/src/widgets/framework.dart:1141)
#1 _DetailCommentWidgetState.replyInput.<anonymous closure>.<anonymous closure> (package:fwn_idlefish/biz/item_detail/fx_detail_comment.dart:479)
#2 FXMtopReq.sendReq.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/mtop_req.dart:32)
#3 NetService.requestWithModel.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/net_service.dart:58)
#4 _rootRunUnary (dart:async/zone.dart:1132)
#5 _CustomZone.runUnary (dart:async/zone.dart:1029)
#6 _FutureListener.handleValue (dart:async/future_impl.dart:129)

2. 第二大类堆栈都与 buildContext 直接或者间接相关
#0 Navigator.of (package:flutter/src/widgets/navigator.dart:1270)
#1 Navigator.pop (package:flutter/src/widgets/navigator.dart:1166)
#2 UploadProgressDialog.hide (package:fwn_idlefish/biz/publish/upload_progress_dialog.dart:35)
#3 PublishSubmitReducer.doPost.<anonymous closure> (package:fwn_idlefish/biz/publish/reducers/publish_submit_reducer.dart:418)
<asynchronous suspension>
#4 FXMtopReq.sendReq.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/mtop_req.dart:32)
#5 NetService.requestWithModel.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/net_service.dart:58)
#6 _rootRunUnary (dart:async/zone.dart:1132)
#7 _CustomZone.runUnary (dart:async/zone.dart:1029)

第一类明显与 element 和 sate 的生命周期有关。第二类与 buildContext 有关。
buildContext 是什么?
下面是一段 state 中获取 buildContext 的实现
Element get _currentElement => _registry[this];
BuildContext get currentContext => _currentElement;

很明显 buildContext 其实就是 element 实例。buildContext 是一个接口,element 是 buildContext 的具体实现。
所以上面的 exception 都指向了 flutter element 和 state 的生命周期
2.flutter 生命周期
1.state 生命周期

2. element 与 state 生命周期
element 是由 widget createElement 所创建。state 的生命周期状态由 element 调用触发。

最核心的是在 new elment 的时候 element 的 state 的双向绑定正式建立。在 umount 的时候 element 和 state 的双向绑定断开。
3. activity 生命周期与 state 关系
flutter 提供 WidgetsBindingObserver 给开发者来监听 AppLifecycleState。AppLifecycleState 有 4 中状态

1.resumed
界面可见,比如应用从后台到前台

2.inactive
页面退到后台或者弹出 dialog 等情况下
这种状态下接收不到很任何用户输入,但是还会有 drawframe 的回调

3.paused
应用挂起,比如退到后台。进入这种状态代表不在有任何 drawframe 的回调

4.suspending
ios 中没用,puased 之后进入的状态,进入这种状态代表不在有任何 drawframe 的回调

看下 android 生命周期和 appLifecycleState、state 关系
创建

2. 按 home 键退到后台

3. 从后台回到前台

4.back 键退出当前页面(route pop)

5.back 键退出应用

3. 常见的 exception 例子
1. 在工程开发中, 我们最容易忽略了 state 的 dispose 状态。
看一段例子:

这个例子可能会在某些情况下 excetion。在 state dispose 后,element 会和 state 断开相互引用,如果在这个时候开发者去拿 element 的位置信息或者调用 setstate 刷新布局时就会报异常。
最常见的是在一些 timer、animate、网络请求等异步逻辑后调用 setstate 导致的 excetion。安全的做法是在调用 setstate 前判断一下 state 是否是 mounted 状态。如下:

2.buildcontext 使用错误
看一段错误使用 buildcontext 例子

上面的错误在于在跨堆栈使用了 buildcontext。由于 outcontext 的生命周期与 buttomcontext 不一致,在弹出 bottomsheet 的时候 outcontext 可以已经处于 umount 或者 deactivite。上面例子正确的做法是使用 bottomcontext 获取 focusScopeNode。
我们在跨堆栈传递参数(如 bottomsheet、dialog、alert、processdialog 等)场景时特别要注意 buildcontext 的使用。
最后
不过瘾?如果你还想了解更多关于 flutter 开发更多有趣的实战经验,就来关注微信公众号 “ 闲鱼技术 ”。
参考
https://github.com/flutter/flutter
https://flutter.io/docs

本文作者:闲鱼技术 - 虚白阅读原文
本文为云栖社区原创内容,未经允许不得转载。

退出移动版