事故描述

事故现象： 企业微信端应用打开白屏，加载不出内容

事故排查

1、缓存机制：企业微信所在的微信 X5 浏览器采取的缓存机制，是将首次访问的页面内所有资源深度缓存到客户端本地，后续访问此页面时直接读取本地缓存的资源，微信浏览器也会对js，css 进行缓存，且清理缓存的时间取决于微信的动态判断。

2、查看事故时间前与事故过程中的发包情况，发现有将测试包上线到生产环境过的情况。结合第 1 点，推测是部分用户缓存了测试包，后续无法再更新资源文件，导致无法进入工作台企业微信端。

3、查看版本迭代，发现一处接口有可能出现不兼容旧生产包的参数值，结合第 1 点，推测部分用户缓存旧页面参数值后，无法完整渲染页面，后续无法再更新资源文件，导致无法进入工作台企业微信端。

4、使用抓包工具，验证发现部分机型确实出现第 2 点情况；还有些机型出现，html 资源加载成功，页面渲染失败，没有发送接口调用，开始排查对应问题。

解决步骤

1、首先排查缓存问题，对比资源文件名称，发现请求到的资源已经是最新版的资源。

2、采用正反对比法。对比抓包正常的情况与抓包异常的情况，发现异常的请求多出了一串 cookie，查阅资料后发现是阿里云黑名单所带有的 cookie。找运维核对阿里云黑名单情况，发现数据对不上：阿里云黑名单人数为0。

3、启动本地连接线上服务，验证是否防火墙问题，发现资源能够调用，可是页面依然是白屏，接口无法发送。

4、故障的特性表现为某些用户出现此种情况，且将链接在非微信端的本地安装的浏览器直接访问也会有相同的故障情况，故转而分析浏览器内核的兼容性问题；

5、排除接口问题、服务器问题后，初步判定是前端环境或代码问题。本地新建纯字符串页面（下文以 test 页面代表），通过延续4.3使用本地服务访问页面，发现可以成功访问 test 页面，证明是首页的语法问题或者引入插件不兼容问题。

5.1、验证是否是引入插件兼容问题：排查首页代码，发现引入插件并没有在首页直接使用，验证发现不是引入插件兼容问题。

5.2、验证首页语法问题：通过大范围注释的方法，发现注释全部 js 代码后，页面能够渲染。锁定问题是首页语法问题。逐渐缩小注释范围，最终锁定发现是 ES10 的新语法 xx?.a 无法被解析，遂全局修改，将 xx?.a 改成 xx && xx.a 发现项目可正常访问，至此解决语法兼容问题。查看故障手机系统版本，发现是 2019.03 的版本，无法使用 2020 年的 ES 新特性。

改进方案总结

1、探索新的产品方案，使用企业微信内嵌跳转页面形式、发布静态资源形式或者切割统计功能与通知功能版本，规避缓存故障概率与缓存成本。

2、产品版本迭代时需要尽量精简化，项目在企业微信端迭代最好是只做加法，不做减法；如果一定要做减法，需要与技术开发者协调，先设计过度迭代版本，后端接口尽量兼容旧版本，使旧版本不会抛异常，结合发布通知的形式，将本地资源替换成新版本可兼容资源，等所有客户缓存对应资源后，再上线正式版本。

3、企业微信端访问前端项目只有动态重定向页面，页面名称为时间戳；重定向页面内容才是真实项目内容。通过这种方式，企业微信端只会缓存重定向到时间戳页面的项目，不带有逻辑与接口资源，基本不会出现报错情况。