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

转载自 SegmentFault

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

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

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

希望对你有所帮助

排查路径

确定是否变更导致？ 如果是变更导致需要及时回滚止损。

• 非变更导致可以排查一下异常版本，根据当前情况灵活判断是否恢复成某一个版本。

确定复现路径。 这可以看用户是否有反馈？

• 是否有日志。fundebug、sentry、埋点等等
• 是否有特征之类的？比如说机型、ip地域、服务主机等等

分析问题归属 先自查代码是否处理异常。比如说逻辑错误、兼容性错误

• 然后排查是否数据异常。可以通过 charles 伪造数据，也可以通过 chrome 断点控制台修改。

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

修复|移交 自己的问题自己修。兼容性babel、babel-polyfill 之类的。逻辑错误改逻辑。

• 合作方的问题，就反馈移交。

测试环境验收 修完之后记得先验证一下，别因为着急修 bug 又出现新的 bug。

预发&上线 分级发布

• 做好线上回归

实战案例

【公司2】FMP 异常

缩小时间节点 3天前开始劣化

上线单历史排查 近期存在多次变更，但无明显关联，所以没有进行回滚。

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

通过（页面、FMP5s+）查询日志，人眼找特征。（这里应该有自动啊喂） 时间为非工作时间（有可能是服务不稳定，网络波动）

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

路径确认，尝试复现 用上面找到的特征，我都尝试了没有复现。

扩大搜索范围 联系了 UA 对应的客户端负责人，明确反馈因为客户端内存泄漏，导致 webview 重启。（这不应该有通报吗，而且不应该只有我们在排查FMP异常的问题吧。）

• 移交、等待修复、总结汇报。
• 【公司1】上传失败
• 【公司3】用户访问慢

【公司2】用户访问超长白屏 针对用户查询访问日志（用户名、时间）

特征收集 资源加载异常（三方资源）

尝试复现 network block 资源。（非强关联资源，加载不到不会白屏）

• charles 阻塞资源。（白屏）

分析问题制定修复方案 资源体积不大，但是耗时长，切不稳定。问题责任方在 cdn，偶现资源异常问题，屡教不改。

• 非强依赖资源没有 async defer，导致页面白屏，影响用户体验。
• 综合考虑，defer 一下。
• 修复&测试环境验证（同复现步骤）
• 上线

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

日志查询

支持多条件 用户

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

自动分析&告警通知 1 分钟 10 次 500 触发告警

• 1 分钟 3 次 erorr data in not defined 触发告警

大盘、报表 xxx 接口 fmp90 5s，pv 1w+

本质上来讲监控平台就是把常用的日志分析替你整合了。 本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

原文：SegmentFault