一次现网翻车经历与总结

0. 前言

仍是和平时同样，作完需求，测试经过，愉快地上线。运营侧在大推，推了好几天。忽然有一天，都来反馈说页面本身弹出dialog并且关不掉：

这就奇怪了，都跑了几天的项目没问题，怎么忽然翻车了？

背景：一个专门作活动的git项目，仅在微信和手Q环境运行。用的是preact，项目结构是该有的都有，pages下每个文件夹都是一个页面，也能支持第2级文件夹一个页面。每个活动页面就是一个文件夹，互不影响，mpa。咱们的ci系统很慢，部署大项目须要几分钟，而后加上各类环节最快要半小时走完流程，接下来很快将会用另外一个方案替代。我活动已经上线几天，是一个运营活动，推广那些学习课程的。同事他们另外一个活动后来上线，是一个年度总结活动。突发现网问题，时间很是很是紧张并且是2018最后一工做日前一天晚上，并且咱们两个活动必须在元旦前发出去（运营压时间的活动准时上线的重要性你们应该都懂）

项目文件夹

pages
-- act1文件夹
---- conponents
---- index.jsx
---- index.html
-- act2文件夹
---- act4文件夹（都同上）
---- act5文件夹
-- act3文件夹
复制代码

最后act1.html，act4.html，act5.html，act3.html都是不一样页面

1. 开始第一次排查

都上线几天，忽然出事，能够确定的是，不是业务的bug。剩下的缘由：现网资源被更改、npm包被更新。跑了一下主分支master代码，没问题。npm run dist模拟生产环境也没问题。

通过询问，原来同事刚刚发布，发完还没合并主分支。一看他的分支，果真是更新了。查了一下ci系统，也找到了记录。因而，切换他的分支跑起来项目代码，而后打断点，弹出方法的函数根本都没有进去，并且控制弹框弹出的state都不是true。

这种状况，首先让我怀疑人生一阵，代码明明没问题并且state也没有让他弹出来。因而再对比现网的和我以前发布的正常版本，来到同一个页面，发现新代码的主逻辑js多了10行代码！！一瞬间我立刻想到的是babel插件的问题。由于我正在用同事写的一个Babel插件，功能就是在react的jsx中写相似像vue那种命令。

现网弹框无解弹出关不掉 =》 所对应的state并无为true =》 代码多了10行 =》 babel插件有问题

2. 升级基础库版本之坑

问了一下，原来他为了fix那个插件在preact中的一些坑和更新了preact-compact。为何呢？由于他们的活动须要引入antd否则时间上有风险，引入antd在目前preact的版本并不能跑起来须要升级。升级完成后，antd大部分组件能够正常使用，但select组件是undefined没法使用，效果就是一个叫undefined的什么都没有的标签渲染在页面上，因此他在能跑大部分antd组件的基础上，再手写一个很完美的select。

可是，就是由于升级，致使这个插件有bug。时间紧急，也没有时间去管。定位到问题，立刻叫测试回滚，现网个人活动正常运行。接下来的计划是，我把全部的用了指令的地方改回常规方法，而后跟着他们一块儿发出去。对于版本，测试稳定后，把package.json的^号去掉，把版本稳定下来。刚恰好，他们那边被leader们盯得紧，一些体验问题也要改，因此我也能够坐个顺风车。我改完了，自测没问题，先撤了。他们改完了也自测经过，已经是差很少10点，部署上了预发布。

晚上的时候，看见企业微信上的他们顺利上预发布的消息，我也放心了，内心想着次日过去验证一波就上线。

必需要用antd =》不能用只能升级基础库 =》 致使babel插件问题出现（做者也投入需求没时间理）=》 个人活动和年度总结活动一块儿放同一个分支上线

3. 预发布资源丢失

当我在公司，代理配置上了预发布，发现资源404和502，一些主js丢失页面崩溃。并且有的手机有缓存复现不了，连电脑修改ua跑微信环境也发现大部分图片资源失败。一开始想到的就是咱们的ci系统有点坑，从新部署一次就能够。浪费半小时，结果仍是同样。这时候，去检查资源，通过老司机们的同心合力，肯定了缘由以及解决方案：

咱们的部署是增量部署，也就是相似于电脑复制粘贴，有冲突的覆盖无冲突的不变。我前几天上线，今天也改了新代码可是一些静态资源和一些页面彻底没有变化，cdn映射也不变，资源名字仍是资源+原哈希。问题的根源：这周周一的时候，机器上的文件被清了一次，如今才知情。因而手动把资源拷贝到服务器上，顺利跑起来预发布环境。此时，炸出了这边资源匹配规则不合理的问题，应该改进一下。

预发布资源404和502 =》 机器被清理过 =》 手动补回资源

4. 忽然发现遗漏点

预发布如期而至跑起来，预发布验证流程愉快走起，没问题后全量发布现网，发布留守时，拉了一堆人体验都没有问题。突然，一个产品反映，有一个课程不能购买，提示：“请先测试”。测试？什么鬼？测试的东西跑到现网去了？可是又不是必现的问题，某些课程存在这个问题。因而抓包拿到错误码，后台说不知道这是什么缘由，我也忽然很绝望，leader看见我这样，说：“来，跟我走，咱们一块儿去找他们，不要在这里发企业微信，这样你要搞到何时。” 咱们找到后台leader，说这个是好久好久以前的逻辑，须要考试才能买这种课（才知道原来课程还有普通的和难的，难的须要考试！这里的“请先测试”文案太抽象，实在容易让人疑惑，咱们开发和测试一看上去就以为是咱们业务流程中的功能测试）。可是，运营说发布的时候特意验证过，她能够买。综合两点，只有一个可能，运营好久以前就考过试了。

后来和产品对，最后结论是，产品测试开发都没有知道这个事情，好久以前的逻辑，并且刚恰好运营本身考过试，一直以来都以为这一切理所固然。此时，先后端产品测试都在，都带着各自的leader，反推一系列的问题找出缘由达成一致。方案： 下架尖子课程、修改文案、增长跳转、强行让购买，考虑到时间紧急，并且运营侧必须推尖子课程，最后采起了修改文案的方法，让用户下载app去考试，功能等下期需求完善。不得不佩服老员工解决问题能力和团队沟通能力，若是我本身估计搞到晚上了。

购买难的那种课程弹出“请先测试” =》 这种课程须要考试 =》 除了运营你们都不知道这种逻辑并且运营自测没问题 =》 确认运营曾经考过试，如今能买课 =》 形成一切理所固然的假象 =》 修改文案、下期完善

5. 兼容性

我这边验证没问题，由于以前遭遇过测试低端机比较晚，发布前很赶并且风险大。刚恰好，他们就遇到了，并且是，部门大老板用安卓机体验到一些很差的地方，他们那边继续修改。除了一些体验问题，而后最后定位到一个fastick的库的问题，是为了解决点透问题的，只是兼容性上出了一些问题。后来有一个操做，有一个同事发现来到一个页面的弹框怎么都关不掉。问题来了，几个同事跑的是不一样结果。这很明显是node_modules的问题，根本上仍是package.json的版本。通过对比，咱们package.json就取掉了^符号而已。

此时，咱们的package.json通过几个过程：我发布时是旧的react和preact =》 他们有一个环节须要antd升级了compact并删除了lock.json =》 个人活动发现babel插件问题，修改代码自测经过，一个正则把 package.json的全部^ 去掉保证版本稳定 =》 他们几我的不一样的node_modules

为何还有版本坑？因而咱们开始了rm -rf掉node_modules从新安装，后来你们都是同样的效果了。在咱们寻找解决方案的时候，忽然才想到，去掉package.json的全部^ 并不能解决问题，这不能阻止依赖中的依赖的版本，说锁版本最靠谱的仍是lock.json。又一番修改，肯定最终package-lock.json，终于上线了！

package.json屡次被修改 =》 自测稳定并锁住最终版本

6. 最后

事情并无结束，有一个同事把工具库里面的一个函数名字写错，现网再出bug，很快解决。后来工具库的做者说这个是废弃的方法，因而又一波讨论下次版本怎么废弃没用的函数。

此次事情引发了不少leader重视，你们都反思并总结，针对问题提出解决方案。

• 线上资源和预发布资源不一致 =》 脚本上的加强（当机器上的文件被清除，本来的增量部署就会有问题）
• 部署环境坑 =》 接下来会用新的构建和ci，git push或者打tag会自动部署
• 版本升级 =》 升级的时候须要全面测试、照顾历史代码、知会
• 老逻辑 =》 新需求须要问清楚、主动推动整个流程、特殊照顾新人

为何用preact？由于小，并且我也喜欢上一些宽松语法：style能够写字符串、不用在map元素中写key属性、无需担忧对被卸载的组件setstate的坑（另外一篇文章有讲到这个问题）。可是用了preact意味着不能用react新特性，反正目前是这样，之后应该能够支持。活动页面性能要求高，并且兼容性要作到极致，但preact在咱们项目暂时跑不了antd。用不用antd不是问题，可是用不了antd就是一个问题，迟早会踩坑的。

对于咱们这个项目，结构就是多页面，每个页面独立。可是每一次发布也意味着全部的活动页面也会被从新发一次。若是修改基础库，全部的活动都被影响。咱们的方案是：删掉以前的页面，发布的时候利用增量发布的特性直接发某个需求，可是旧页面须要找到旧分支才能修改，有点麻烦；或者是稳定版本库，长期不用动它；或者是先用着，等到要改的时候顺便改，旧页面先在分支中删掉。路过的大虾们，对于后续维护上若是有更好的方法能够提一下。

“我只是想安安静静写代码”，这是多美好的指望啊，但是事实上并不能，你要照顾整个团队。你们都是一个team，不管遇到什么都要一块儿面对，你们都要聚在一块儿，谁慢了谁快了都要照顾一下。导师也屡次和我说：永远别觉得你本身跑起来项目就完事了。此次说背锅，貌似谁也没有特别明显的背锅嫌疑。说你们都没错，也是有道理，谁都是作好了本身本分并且正常上线，面对任何难题都解决。说你们都错了，也是说得通，你们都是只看本身的一亩三分地，没照顾整个团队，没照顾整个项目。

最后一个工做日，虽然跌跌撞撞，可是得到了成长，给2018职业生涯画上句号