一次应用后台开发的奇怪bug记录

一次应用后台开发的奇怪bug记录

作为一个前端菜鸟，在进行全栈开发的时候总会遇到许许多多的奇怪bug，特此记录一下

1、前端页面卡死

在页面组件A.vue整体开发完成并在本地测试完成之后，并无任何问题出现，便进行docker部署，但很奇怪的是，部署完成之后很快A.vue测出了一个bug：

一进入A页面便会出现页面卡死的情况（反复确定了本地运行没有问题，但是部署之后便出现了问题）

有几种预想的原因：

1. 后端接收请求无响应，而前端接收响应数据的组件timeout值过大（/现在才意识到停可笑的想法）
2. 前端有死循环导致服务器崩了__（√）__

之后便是进行问题定位的工作

• 首先是排除后端问题：

在触发页面卡死的事件时，根据控制台的信息，确定后端可以返回完整的数据，所以排除原因一

• 定位到前端死循环

把A.vue全部注释便没再出现问题，接着便是一点点打开注释定位死循环的位置，问题解决

那为什么本地运行的时候没有出现问题呢？

本地代码复现死循环，console.log(“test”)；

在页面打开的一瞬间，控制台打印了100次log内容

所以猜测是dev的模式做了限制，只会跑100次就停止，而build模式则无限制，因此导致页面死掉

---

2、Vue3 两个子集导致的bug

问题介绍

其他每个文件都没问题，当打开B.vue页面后，再打开其他页面，整个页面空白

问题定位

因为这个bug是在B.vue添加了一个dialog之后出现的

所以第一步我先把新加的代码注释了，再运行爆一样的错误，这样就很奇怪了，明明是新增代码的问题，怎么注释掉还是报错

难以置信之后又__把所注释掉的代码删掉__，还是报错

到目前位置新增的就只有第一行注释<!--用户详情-->了，尝试着将其删掉，诶，就不报错了

有可能是vue把注释本身也当成一个自己的一个子集，每次加载第一个子集

（但是我用的是vue3，vue3是可以有多个子集的）

（这个bug我至今也很疑惑，希望能有大佬可以为我解释一下）

3、OSS本地上传快，云服务上传超时

要注意组件的响应timeout，和nginx的timeout