README.md

白屏问题

1. 原因

   在充分人工测试+自动化测试上线的前提下。

   1. 代码执行报错原因：

      JS报错，会阻止当前<script>之后所有代码执行（其他<script>不会被阻止）。

      1. 运行时数据导致，如：没有对后台接口返回参数做空值兼容、用户输入边界值
      2. 浏览器兼容性报错，如：某些ES6语法在某些机型或浏览器不支持

   2. 文件资源（如：CDN资源）下载失败，可能是服务器问题、也可能是用户网络问题

   • 其他原因

     1. JS等待异步接口返回而暂停执行
     2. HTML结构错误（如：错误的标签闭合）
     3. 缓存机制问题（如：没有采用 文件的数字签名 非覆盖式更新资源，导致执行了不正确的版本）
     4. CSS问题导致白屏

2. 解决

   1. 完善监控系统，当有现网白屏问题产生时，上报 并 通过设置阈值告警的方式通知开发者

      更快的发现问题、解决问题，避免仅通过用户反馈才暴露问题。

   2. 现场验证和查找原因

      打开开发者工具（如：DevTool 或 客户端工具），查看 报错信息、资源下载列表。

   3. 先回滚代码至未出错页面版本，然后分析、解决白屏问题

      1. 完善上线前验证环节，包含不同地区校验CDN下载成功率

      2. 考虑优化错误处理机制

         1. try-catch包裹风险代码，尤其是接口处理、用户输入处理
         2. 全局错误处理机制，如：window的error事件
         3. React考虑用错误边界组件包裹最外层

3. 白屏上报

   1. JS上报，上报代码写入.html 或 使用稳定且不频繁发版的.js文件。
   2. 客户端上报，（类似客户端打开页面之前的loading展示功能），通过约定时间内回调客户端方法来告诉客户端页面加载完成，若没有回调则页面报错。