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生命周期


TB1.MOKurPpK1RjSZFFXXa5PpXa-1394-1314.pn

2. element 与state生命周期

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


TB1GRqZtVzqK1RjSZFoXXbfcXXa-876-740.png

最核心的是在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关系

  1. 创建

TB1cWHcuxjaK1RjSZFAXXbdLFXa-424-78.png

2.按home键退到后台

TB1XG1Yur2pK1RjSZFsXXaNlXXa-420-79.png

3.从后台回到前台

TB14ayVuzTpK1RjSZKPXXa3UpXa-418-84.png

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

TB1Rky1uwHqK1RjSZJnXXbNLpXa-424-74.png

5.back键退出应用

TB1CSyYuCzqK1RjSZFjXXblCFXa-429-107.png

3.常见的exception例子

1.在工程开发中,我们最容易忽略了state的dispose状态。

看一段例子:

TB1EICFurPpK1RjSZFFXXa5PpXa-910-164.png

这个例子可能会在某些情况下excetion。
在state dispose后,element会和state断开相互引用,如果在这个时候开发者去拿element的位置信息或者调用setstate 刷新布局时就会报异常。

最常见的是在一些timer、animate、网络请求等异步逻辑后调用setstate导致的excetion。安全的做法是在调用setstate前判断一下state是否是mounted状态。如下:

TB1tjuGupYqK1RjSZLeXXbXppXa-860-226.png

2.buildcontext使用错误

看一段错误使用buildcontext例子

TB1mt5hvSzqK1RjSZFpXXakSXXa-569-220.png

上面的错误在于在跨堆栈使用了buildcontext。由于outcontext的生命周期与buttomcontext不一致,在弹出bottomsheet的时候outcontext可以已经处于umount或者deactivite。上面例子正确的做法是使用bottomcontext获取focusScopeNode。

我们在跨堆栈传递参数(如bottomsheet、dialog、alert、processdialog等)场景时特别要注意buildcontext的使用。

最后

不过瘾?如果你还想了解更多关于flutter开发更多有趣的实战经验,就来关注微信公众号 "闲鱼技术"。

参考

https://github.com/flutter/flutter

https://flutter.io/docs

相关文章
|
5天前
|
机器学习/深度学习 Java Android开发
记录一个Flutter运行的异常FAILURE: Build failed with an exception. What went wrong: A problem occurred config
记录一个Flutter运行的异常FAILURE: Build failed with an exception. What went wrong: A problem occurred config
55 0
Flutter异常Another exception was thrown: A RenderFlex overflowed by 5.0 pixels on the bottom解决方案
Flutter异常Another exception was thrown: A RenderFlex overflowed by 5.0 pixels on the bottom解决方案
408 0
Flutter异常Another exception was thrown: A RenderFlex overflowed by 5.0 pixels on the bottom解决方案
|
5天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
3天前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
5天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
3天前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
3天前
|
XML Dart Java
Flutter插件开发之APK自动安装,字节跳动Android岗面试题
Flutter插件开发之APK自动安装,字节跳动Android岗面试题
|
4天前
|
Java Android开发 设计模式
flutter音视频开发,Android开发需要学什么
flutter音视频开发,Android开发需要学什么
|
5天前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
|
5天前
|
存储 缓存 监控
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
【4月更文挑战第30天】本文探讨了Flutter中优化列表滚动性能的策略。建议使用`ListView.builder`以节省内存,避免一次性渲染所有列表项。为防止列表项重建,可使用`UniqueKey`或`ObjectKey`。缓存已渲染项、减少不必要的重绘和异步加载大数据集也是关键。此外,选择轻量级组件,如`StatelessWidget`,并利用Flutter DevTools监控性能以识别和解决瓶颈。持续测试和调整以提升用户体验。
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化