个人技术分享

大前端故障总结

故障

# 大前端故障总结

  • 针对业务场景中的前端故障进行分析和总结，防微杜渐，已经隐去了业务敏感信息。
  • 总结
    • 能回滚的时候，及时回滚，减少资损。后端设计接口的时候，需要做好版本兼容。尤其是涉及到APP、小程序的发版，具有一定的不同版本共存的时间。
    • 复制的代码需要做好评估，理解代码的功能，慎重使用。
    • 上线前，做好代码 diff和Code Review，勿因善小而不为。

# 华为手机无法获取验证码

# 影响

  • 1人

# 描述

  • 用户登录的时候，无法获取验证码。

# 原因

  • 发布海心医生华为应用市场时，打包过程中版本号修改错误，把A5.5.2写成了5.5.2，医生端发送验证码接口对请求header中的appversion做了格式验证，如果不是A或者I开头的就进行拦截，导致发送验证码接口请求失败。

# 解决

  • 后期引入自动升级版本号，避免手写的误差。
  • 后端接口修改，兼容不带字母的版本号格式。

# 小程序社区tab无法点击

# 影响

  • pv: 7000+
  • uv: 500+

# 描述

  • 患者端小程序首页，内容瀑布流中的内容无法点击。

# 原因

  • 本地开发的时候，为了让小程序编译快一点， 把 app.config.js 里面的部分路径给注释了，发布生产的时候，忘记恢复代码，导致生产环境，部分路径无法跳转。

# 解决

  • 直接在小程序后台操作回滚上个版本，然后再紧急发布一个版本修复问题。

# 教训

  • 尽量不要改需求之外的代码，如果有，需要在需求评估中罗列，比如修改配置文件，公共组件等。
  • 每次代码commit的时候，做好diff，养成习惯。
  • 每次合并分支的时候，做好diff
  • 代码上线前，做好Code Review和 diff

# iOS 手机输入框无法输入问题

# 现象

  • iOS 手机下，H5活动页面，输入框无法输入。

# 原因

  • 为了支持微信环境下长按识别图片的能力，复用了其他项目中的公共样式，该样式在iOS设备下不兼容，导致输入框无法聚焦，从而无法输入内容。
  • 本地测试的时候，活动页没有使用到input标签，所以测试的时候没有复现。但对其他的页面造成了影响。
  • 复制的时候，黏贴的css代码如下：
* {
	-webkit-touch-callout: none;
	/*系统默认菜单被禁用*/
	-webkit-user-select: none;
	/*webkit浏览器*/
	-khtml-user-select: none;
	/*早期浏览器*/
	-moz-user-select: none;
	/*火狐*/
	-ms-user-select: none;
	/*IE10*/
	user-select: none;
}

# 教训

  • 未充分自测
  • 未对复制的代码做好评估，而直接使用
  • 使用了全局的样式

# 小程序生产环境调用了预发接口

# 影响

  • 时长：10小时

# 现象

  • C端患者小程序，在某个需求上线后，后端监控到大量的预发接口调用日志。

# 原因

  • 小程序的提审，跟部署后台是隔离的，存在一定的时间差。部署后台中，小程序只构建了tag后，没有点击开始发布，完成构建流程，就在微信后台提交了审核版本，导致提交的其实是预发环境的体验版（预发环境的代码）。

# 改进

  • 需要严格按照部署流程来操作，并在部署后台进行交互修改，来提示操作人员。
  • 通过流程来约束。
  • 通过完全自动化的方式来执行部署和提审。

# 患教计划功能无法正常使用

# 影响

  • 个案无法创建患教计划

# 原因

  • 在项目开发的时候因为项目跑不起来， 并把项目文件里面的 node_modules 、package-lock.json 删除， 并重新进行 npm install 。
  • 因为项目里面package.json 的依赖，某个二方包使用的是 ^0.2.19 版本， 但是正是因为 ^的原因，导致会安装依赖的时候进行小版本的更新 变成 "version": "0.2.35", 升级的版本功能较多，且没有在本个版本中进行测试。
  • 其中，就引入了埋点功能，且埋点SDK，是通过CDN方式引入的，而本项目中没有引入，就导致了埋点SDK报错了。

# 改进

  • 开发二方包的时候，没有严格执行npm版本的升级规则，对于breaking change，需要大版本，否则会导致兼容问题。
  • package-lock文件的删除过于随意，需要慎重，最好是进行diff。而不是直接删除。
  • 对于二方包的引入，需要锁定版本。

# antd 版本升级问题

# 描述

  • 技改的时候，对antd版本进行升级，但评估不够全面，导致一些页面的使用问题。

# 原因

  • antd的官方平台有绝大部分对于影响点有所说明， 但是由于我们个案管理平台是在pad上面使用的， 所以在一些情况下面存在样式和使用的问题。但也遗漏了部分升级说明，比如Textarea的使用，在 4.x 中，有不兼容的情况。
  • 日期选择框， 时间选择框 升级到 4 版本后会点击会导致弹出虚拟键盘， 而在版本 3 中则不会， 影响到用户的使用情况
    • 解决：需要在 DatePicker、 RangePicker 对应加上 inputReadOnly 属性， 禁止掉虚拟键盘
  • Textarea 使用ref.current.state 使用报错，因为在state上一层多了一个包裹对象，导致输入框输入报错,无法赋值。
    • 解决：
this.curRef.current.state.value = nextProps.defaultValue // Error
this.curRef.current.resizableTextArea.state.value = nextProps.defaultValue //success
  • 组件dom层级不一致
    • 解决：需要修改其类名名称， 类名的层级结构， 修改css样式 和 默认的css 样式

# 改进

  1. 技改系分影响系分，以及对于影响点的全面评估，
  2. 影响点一级用例全量测试
  3. 监控ErrorBoundary 捕获异常并上报
  4. 测试整理用例并培训
  5. 修改问题影响点需要同步到相关开发测试同学

# 小程序订单页面不可访问

# 影响

  • 订单页面不可用时长：2小时

# 原因

  • 订单页面域名迁移，新域名没有在小程序后台配置。
  • 测试的时候，打开了调试模式，所以没有发现该问题。

# 改进

  • 小程序验收的时候，在预发环境，需要关闭调试模式。
  • 发布checklist中，增加域名的白名单验证。

# 小程序线上环境访问API非生产环境

# 影响

  • 生产环境访问其他环境的API时长：40分钟。

# 原因

  • 架构组对小程序进行技改，且未跟当天有发布的外包同学同步。导致发布的时候，使用的是其他环境的代码。
  • 且直接在master分支提交的代码，没有走正常的部署流程。

# 解决

  • 小程序代码回滚

# 改进

  • 建立小程序发布群，及时同步当天的发布信息和版本
  • 严格执行小程序的部署流程，禁用master分支的push提交权限。
  • 规范测试流程，线下、测试、预发、线上，都需要进行API环境、功能的回归测试。