记一次问题排查----Caution: request is not finished yet!

问题现象

前端页面访问某个接口后,页面卡死。打开浏览器开发者工具,查看network,response为空。 image.png

问题分析

1. response为空,后端接口问题

登录测试服务器,查看日历log,接口响应时长和返回结果均正常打印,并未发现报错和其他异常情况。使用相同参数跑接口的单元测试,也没有问题,初步确定接口是正常的。于是让前端同事帮忙排查。

2. 前端拿到数据后的处理报错

前端同事看到reponse没有返回,坚持认为是后端问题,不是自己的问题。我也对自己的代码产生了怀疑,又从后端的角度去分析。

3. 进一步分析接口是否返回数据

将network里请求的URL复制出来,粘贴到浏览器地址栏,回车发现数据正常返回。

image.png 这个接口返回的数据很小,不会存在耗时过长的情况,还是去查看了一下接口的响应时间。

image.png 里面有一个Content Download,还有一个类似预警的信息:Caution: request is not finished yet!。以前没见过,赶紧google了一下。

image.png Content Download有值且出现Caution: request is not finished yet!,说明接口是返回了数据,前端耗时过长导致。

4. 前端代码耗时过长

由于前端本地连不了测试环境,本地起服务仅能以mock数据的方式进行调试。我将数据发给了前端同事,让她在本地debug一下。

最后发现是她在接收数据后渲染图表时写的一段逻辑对数据可能为负数的情况没有考虑到,导致代码出现了死循环,进而页面卡死。

总结

  • 出现问题,不能一味地仅看表面现象主观做出结论。作为开发人员,更应从代码的角度去客观分析和排查问题。考虑多种情况,有技巧地使用多种排查手段对问题进行分析。

  • 对于难以排查的问题,相关同事要及时沟通,多从自己的角度去对待问题。积极面对,共同探讨,或许就能更早地解决问题。

  • 勇于承担责任。总是逃避、推卸责任,这样会给人留下很不好的印象,也不利于团队协作。

Guess you like

Origin juejin.im/post/7032533934810497032