一、现象
4月18号当晚，App内进行了华东地区的猛狮专场直播。有用户出现了灰屏现象，无法正常查看讲解中的活动。
image.png
二、产生原因
8.12.0版本里修改了Flutter基础组件库关于图片加载的那一部分,导致了这边的场景使用上异常。
image.png
以上这一部分修改，是因为在开发购物车版本时，发现购物车中有大量的图片加载，如果购物车商品特别多会导致内存激升。为了修复这个问题，设置了默认最大内存缓存和最大硬盘缓存来限制内存的增长。
但是修改时，并没有考虑到，用户会传一些非常规的入参的进来，例如设置了width属性为double.infinity。直播间讲解中弹窗就是因为使用到了这一场景，从而导致Flutter异常。因为double.infinity不能调用.toInt()方法
三、解决方案
后来第二天，紧急上线了一个版本8.13.1，修复了这个问题。判断用户的入参是否合法，如果不合法则默认处理。
if (image!.startsWith('http')) {
int? maxWidth;
int? maxHeight;
if (width != null && width != double.infinity) {
maxWidth = (width! * 2).toInt();
}
if (height != null && height != double.infinity) {
maxHeight = (height! * 2).toInt();
}
return CachedNetworkImage(
memCacheWidth: memCacheWidth ?? maxWidth,
memCacheHeight: memCacheHeight ?? maxHeight,
maxWidthDiskCache: maxWidthDiskCache ?? maxWidth,
maxHeightDiskCache: maxHeightDiskCache ?? maxHeight,
imageUrl: image!,
placeholder: (_, __) =>
LoadAssetImage(holderImg, height: height, width: width, fit: fit),
errorWidget: (_, __, dynamic error) =>
LoadAssetImage(holderImg, height: height, width: width, fit: fit),
width: width,
height: height,
fit: fit,
);
}
四、总结反思
- 后续修改Flutter组件库时，需要进行足够的单元测试，尽量把所有的可能场景都给覆盖到
- 业务代码中利用插件动态检查，Flutter组件库具体使用的地方，每次更新Flutter组件库时，在业务代码中都能动态检查使用的地方，然后逐一排查是否有不兼容的场景。
- 加强自测强度，每次修改Flutter组件库的时候，责任到人，加强自测，尽量避免一些问题到了线上才能暴露。
- Flutter组件库修改加强评审策略，一些大的改动点都需要提交PR
五、现有直播在使用的基础组件库
|
组件名称
|
所在业务场景
|
|
Gaps、Colours
|
直播页所有
|
|
LoadAssetImage、LoadImage
|
红包弹框、直播头像、直播活动、直播状态
|
|
showBottomModal
|
清晰度弹窗、小黄车
|
|
IOSStyleDialog
|
直播间公告
|
