一个简单的弱网搞死了组内前端

前言

最近上线了一个 React Native 外访项目，用户为公司外访员，外访员根据公司业务去实地考察，收集记录一些资料，考察记录资料的过程全部用公司配的专用手机，里面安装了当前外访项目APP。目前项目试运行阶段，还没有正式交付。APP项目上线后，在用户真实使用中遇到一些各种各样的问题，有些问题处理时也比较棘手（如弱网情况），这次主要复盘APP在实际场景中的弱网（或网络不稳定）相关的问题。

项目需求方提出的原始APP需求（只列弱网影响的部分）

1. APP 功能需支持无网的情况下的也能正常操作
2. 离线模式数据自动同步。(包含图片、录音，客户端操作，调用后端业务接口，实现客户端离线操作的数据同步到服务端)
3. 5分钟自动上传APP定位。(监管需求)

APP在试运行期间弱网情况下遇到的问题

前提：开发测试人员在网络在正常情况和无网情况APP功能正常，但是在试运行阶段，国内部分地区用户（如四川）实际会有大量网络信号弱的地方，如地下车库，或老城区等位置操作APP时会有功能异常，表现为：

• 拍照录音相关功能，图片/录音等文件上传失败
• APP中定时上传、同步任务请求，弱网情况下接口超时，页面操作流程走一波后弹出一堆"网络异常"
• 部分页面数据在操作后无法正常显示，如某数据状态变更后，返回列表，列表为空
• 页面切换跳转，数据为空，或页面空白
• 离线数据操作，有网后数据同步，弱网情况下，服务端数据和APP数据同步混乱
• 部分核心业务流程走不通。直观表现为数据状态验证不通过
• 拍照保存照片操作会出现"加载中"提示一直存在的情况
• 不同用户反馈的功能异常情况也不一致

问题分析

项目试运行模式是先由北京区用户试运行三天，北京区试运行通过后，再慢慢放开国内其他地区用户。北京区用户正式试用的三天中，白天工作时间北京的研发中心开发测试人员轮流跟访，有疑问现场指导，APP在北京区用户试运行期间，没有发现弱网相关问题，有功能进行优化微调，试用国内其他地区后，有个别用户反馈过功能出现异常情况，直到四川地区用户开始试用后，一周内反馈了大量APP功能异常的问题，通过和四川地区用户沟通，发现是四川地区部分地方网络信号弱导致的。

在功能开发人员内网测试OK通过情况下，测试人员使用 Charles 抓包工具，设置弱网参数，单独测试发现APP核心流程正常操作受影响，从技术实现层分析如下

• APP中的图片，录音等文件在弱网情况下上传接口超时，导致服务端数据对不上，APP上部分数据状态校验不通过
• 弱网情况下部分页面数据在操作后无法正常显示，数据为空，或页面空白。弱网情况下APP渲染引擎执行，JS引擎在执行的等待请求响应，JS控制显示数据的代码还未执行，长时间（部分页面超过60s）等待后数据可以正常显示
• 在Charles工具中手动设置离线、有网、弱网，在三种网络情况切换下，APP功能流程走不通，数据混乱导致流程无法进行
• APP后台定时请求同步数据过程，代码会轮询调用离线情况下的用户操作接口，以同步数据到服务端，弱网接口响应慢大量请求超时，离线操作页面操作流程走一波后出现一堆"网络异常"提示弹出, "网络异常"由前端的请求拦截器中控制弹出
• 离线数据操作，有网后数据同步，APP 中使用 mmkv 存储操作数据，有网后根据操作步骤，按顺序调用后端对应的操作接口，后端接口实现有一部分走的队列，一部分用的缓存，一部分直接读取的数据库， 弱网情况下，本地操作结果和服务端返回数据不一致，导致用户无法继续进行流程操作
• 不同型号的手机对于定位功能的支持不一致，在工作空间中运行有的手机定位拿不到
  • 手机是公司采购，从手机厂商那里直接批量定制的，因为项目需要对用户做合规监督
  • 定制的手机价格是1000多的廉价Android机，硬件配置一般
  • 使用的手机厂商提供的工作空间(寻踪管家)
  • 手机上只能运行工作空间里面放开的APP，其他功能都被禁用了，权限控制直接从系统级设置

整体总结为三个方面的原因

• 离线同步机制方案缺陷。当前离线同步机制，前端离线操作，本地存储数据，监测有网后定时器轮询发送每次操作记录，操作记录同步是调用对应的后端接口，前端传参包含用户操作调用的接口，以及接口对应的参数，根据整个操作记录，存储在一个数组里，定时器定时检测离线数组是否有数据，前端在有网轮询同步过程，调用了后端接口，此时用户在APP上操作，或刷新会直接取到后端返回的还未同步的数据，这是会出现数据混乱，前端做了一些处理，但无法彻底解决数据同步时混乱的情况。
• 弱网情况下JS请求阻塞了JS代码的执行，渲染引擎执行，但是对应的JS引擎代码没执行，导致用户认为APP功能异常了。Chrome，Firefox 浏览器里面JS请求发送和JS执行分别用的不同的线程，这是浏览器对JS引擎的优化，APP上没有优化
• 不同型号的手机，不同 Android 系统版本，对于手机原生功能调用支持不一样

解决

• 关于离线同步方案，前端方案在项目开始前是推荐使用 SQLite，离线情况下APP操作产生的数据直接入库，有网后直接同步数据，这样前后端工作量相对少点，方案实施起来也相对靠谱。但是此方案技术经理(后端开发经理)和后端人员不同意此方式，后端认为这样操作太麻烦，同步操作数据应该放前端存储，由前端控制，后端只提供一个同步接口，剩下的由前端处理。开发时遇到了该方案缺陷导致的问题，处理时变成了前端单方面解决，都上线用起来了，也不能更换调整方案了，这部分的业务功能代码相关逻辑太多，时间上也不允许， 前端开发人员硬填坑填了好长一段时间坑。通过添加 loading, 数据锁，流程走完后5分钟后再更新数据等方式，损耗了一些用户体验，前端组断断续续改了一个多月，可算是把这个功能彻底修复完了。
• 关于代码阻塞，通定时请求计算请求响应时间，设置阈值，如果响应时间长，则停止定时器等请求任务，几分钟后再次触发定时器，调整代码实现方式，操作等待，按钮禁用，添加友好提示等解决
  • 弱网，实际场景中很难定义，网速达到多少算弱网？还是用户操作层面受网络影响了算弱网？
• 手机不同型号兼容性，工作空间(寻踪管家)中的兼容问题等，把所有型号的手机刷机测试，先测试APP直接安装在系统上是否正常，再测试刷机后，有工作空间后安装APP功能是否都正常，优化调整直到APP能在所有机型上正常运行。
  • 不同地区的工作空间策略不一致，导致国内不同地区的用户使用APP时出现一些莫名其妙的问题(北京开发中心都无法复现)，因为工作空间引发的异常问题在对应地区IT人员重刷工作空间后解决

公司日常开发现状

• 线上项目日常功能维护修改，前后端人员1比1，进度差距一般还好

• 大量新功能开发中，1比1情况下前端开发进度明显落后于后端开发，如果业务线前后端都做新项目，公司有部门出现过前端后端 3:7 的情况，前端任务大量延期，后端进度快前端一个多月，项目经理负责人依然放任这个情况持续了好一段时间，变成了无脑压缩开发时间，高频加班，一个月加班小时数80h+ (这个任务进度管理很神奇)

• 如果涉及技术方案调整，功能修改等工作内容，前端能改的一般都是前端改，虽然有相关技术负责人和架构组，项目从架构搭建进入开发阶段后就不参与了 (作为前端开发开发人员，没有话语权，日常工作最心塞的事情之一)

• 测试，UI是单独的部门不按业务线划分，属于公共资源，有需要调配形式

复盘思考

1. 技术方案设计前期考虑不周，离线同步相关功能在开发阶段出现问题的时候，分析解决了一段时间后发现现有方案有缺陷，但是由于时间因素，也无法调整项目的整个技术实现方案，变成了离线同步出现的问题主要单方面由前端解决，这样解决不彻底，前端开发人员工作压力大还头大
2. 功能开发测试阶段，没有完整还原真实场景，如四川等地区出现的网络信号不好情况
3. 功能开发上线后，部分开发人员配合意愿低，只要自己的那部分没问题，代码就不改，最终就变成了APP上出现的问题基本都是前端的问题
4. 不同手机型号功能兼容，工作空间兼容处理，前期评估中开发人员不知道实际手机型号情况以及APP还是运行在工作空间中
5. 由于一些问题前后端分别都能解决的都放到了前端人员来解决，没有很好划分岗位职责，导致前端代码的业务复杂度越来越高，代码逻辑也越来越复杂，涉及到逻辑的部分改动也越来越难，开发过程前后端合作过程情绪波动大，吵架撕逼，由于这个项目属于公司不同业务线组成的人员，项目负责人并不能很好处理这种人员问题，领导也只是开会提一下大家要和谐，并没有实质行动
6. 团队前端开发成员第一次用 ReactNative 开发APP，有些问题解决起来速度相对较慢，但是评估时依然按照熟悉技术栈去评估工期，导致前端工期总是往后延期，高频加班赶进度
7. 在有限的开发时间内，按期上线，前端的功能样式调整，操作优化等也时间未算在任务排期中
8. 开发方面时间紧，任务重，前端开发人员在前期的代码逻辑没能好好梳理，后期问题排查，难度加大
9. APP开发中JS引擎阻塞代码中的console.log输出也受到影响，正常调试分析困难增大
10. 项目开发阶段，技术人员高频高强度加班，工作效率低下，也没了生活，回家就是睡个觉，幸福指数降低
11. 这次的项目对内负责人是前端，也负责主力功能开发，前端开发人员配合相对积极，对于一些暴露的问题能很好的通过技术全局去思考，并积极向上反馈找领导配合解决一些业务问题
12. 时间紧任务重的情况，前端使用新技术栈，对自身学习、实践能力是个很好的磨练

如何变的更好

• 对于工作上的事情，都是为了生活而打工，不顺心是常见的事情，平常心对待，让自己活的轻松快乐一点
• 一起熬过夜，肩并肩加班，收获了加班战友
• 日常精力分配，保持自己有一定的时间可以自由支配用来经营自己的生活，学习，提升等
  • 电子厂流水线的人都很努力，每天工作十几个小时家常便饭，但是他们的工资就那么点
  • 资产过亿的人每天聚一起喝喝茶，聊聊天，打打高尔夫，动动嘴钱就来了
  • 放下手机合上电脑，多出去走走，和同学朋友见一见，进入现实世界
  • 努力破圈，通过整合社会资源赚钱，虽然这很难，不试试怎么知道呢

突然，想问个问题

为什么总是前端在高频加班?

我能有什么办法，管理层及非前端开发选手认为前端的工作简单，修改功能也是前端简单前端改，后端涉及业务和逻辑，不能轻易动，产品UI设计认为前端什么都能实现，不用后端参与，前端开发可以基于UI库随便改，网上随便看到的功能前端也能快速实现，总体认为前端工作简单，薪资也不用多给，有问题前端改也都是很快就能搞定的

image