「前端 BUG 录」遇到BUG应该如何排查

我们日常工作中虽然会遇到很多 BUG，我们也熟练掌握使用搜索引擎解决开发中的问题。

但是当遇到线上 BUG 应该如何排查呢？

我将我过往遇到的一些异常整理了出来，并将我遇到的干扰项以及问题点都做了详细记录。

希望对你有所帮助

排查路径

1. 确定是否变更导致？

   1. 如果是变更导致需要及时回滚止损。
   2. 非变更导致可以排查一下异常版本，根据当前情况灵活判断是否恢复成某一个版本。

2. 确定复现路径。

   1. 这可以看用户是否有反馈？
   2. 是否有日志。fundebug、sentry、埋点等等
   3. 是否有特征之类的？比如说机型、ip地域、服务主机等等

3. 分析问题归属

   1. 先自查代码是否处理异常。比如说逻辑错误、兼容性错误
   2. 然后排查是否数据异常。可以通过 charles 伪造数据，也可以通过 chrome 断点控制台修改。

4. 测试环境验证问题

   1. 将上述的问题在测试环境复现出来。证明确实是因为这里有问题后就可以着手修复了。

5. 修复|移交

   1. 自己的问题自己修。兼容性babel、babel-polyfill 之类的。逻辑错误改逻辑。
   2. 合作方的问题，就反馈移交。

6. 测试环境验收

   1. 修完之后记得先验证一下，别因为着急修 bug 又出现新的 bug。

7. 预发&上线

   1. 分级发布
   2. 做好线上回归

实战案例

1. 【公司2】FMP 异常

   1. 缩小时间节点

      • 3天前开始劣化

   2. 上线单历史排查

      • 近期存在多次变更，但无明显关联，所以没有进行回滚。

   3. 日志查询、特征收集

      • 内部有一个自建的前端日志平台，收集了所有日志，前端按需查找分析

      • 通过（页面、FMP5s+）查询日志，人眼找特征。（这里应该有自动啊喂）

        • 时间为非工作时间（有可能是服务不稳定，网络波动）
        • 页面生存时间长（有可能是后台，或者下班锁屏等情况）
        • 联系特征用户，获取一手反馈（用户没吐槽没印象）
        • 页面资源加载不稳定（网络或后台+1）
        • 【真问题】UA 为 移动端 ios（mac 和 ios 这个关键特征其实被我忽略了。因为我们是内网项目，所以我第一波没有注意到这个特征。老板们用 mac 和 ios 有问题吗？没问题啊）
        • 网速不佳、网络不稳定（可不，用手机那网络能稳定到哪里）

   4. 路径确认，尝试复现

      • 用上面找到的特征，我都尝试了没有复现。

   5. 扩大搜索范围

      • 联系了 UA 对应的客户端负责人，明确反馈因为客户端内存泄漏，导致 webview 重启。（这不应该有通报吗，而且不应该只有我们在排查FMP异常的问题吧。）
   6. 移交、等待修复、总结汇报。
2. 【公司1】上传失败
3. 【公司3】用户访问慢

4. 【公司2】用户访问超长白屏

   1. 针对用户查询访问日志（用户名、时间）

   2. 特征收集

      1. 资源加载异常（三方资源）

   3. 尝试复现

      1. network block 资源。（非强关联资源，加载不到不会白屏）
      2. charles 阻塞资源。（白屏）

   4. 分析问题制定修复方案

      1. 资源体积不大，但是耗时长，切不稳定。问题责任方在 cdn，偶现资源异常问题，屡教不改。
      2. 非强依赖资源没有 async defer，导致页面白屏，影响用户体验。
      3. 综合考虑，defer 一下。
   5. 修复&测试环境验证（同复现步骤）
   6. 上线

日志平台&监控平台 功能点

1. 日志查询

   1. 支持多条件

      1. 用户
      2. 页面
      3. traceid （page、SPA、ajax）具体的命名规则可以自定义。
      4. 上报的信息，比如说 FMP、erorr、埋点、ajax、操作、还是自定义打点等等
      5. 其他通用信息，比如说 ip、地域、ua

   2. 自动分析&告警通知

      1. 1 分钟 10 次 500 触发告警
      2. 1 分钟 3 次 erorr data in not defined 触发告警

   3. 大盘、报表

      1. xxx 接口 fmp90 5s，pv 1w+

本质上来讲监控平台就是把常用的日志分析替你整合了。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。