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

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

我们日常工作中虽然会遇到很多 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 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。

Tags 标签

前端javascriptvue.jshtml5challenge

扩展阅读

加个好友,技术交流

1628738909466805.jpg