线上页面无限重载，手把手教你Debug

Peter谭老师 - 2021-08-02 03:58:16

---

故事的开始

在一个阳光明媚的早晨，我吃完早餐准时来上班，听着吴亦凡的freestyle，觉得今天应该是一个无风无浪的日子

可是，事情的发展总是会出乎我们的意料

出现线上问题

出现问题的视频大概是：

用户通过第三方OA系统跳转到我们的Saas系统，结果出现一直页面重新加载情况.

问题分析

1.此登录为授权登录，非单点登录，通过url的参数携带登录的参数传递给后端

2.授权登录一直是稳定的，去年做过企业微信打通，应该没问题

3.通过录制的视频查看用户出现的问题应该是前端页面不断重载，不像是后端的重定向

定位问题的边界

1.确认授权登录是正常的，登录态有写入

2.确定非后端重定向导致

3.那么定位到问题属于纯前端问题

问题复现

1.首先登录客户的第三方OA系统

2.然后跳转到我们的Saas系统，进行问题复现

从结果出发寻找问题

能造成线上页面不端刷新的，大概率是前端调用了reload函数,于是我通过performance面板，录制了一波得到了火焰图（调用栈的图）如下：

通过搜索reload后，发现有5个匹配的结果，通过查看，发现reload函数调用后，页面就立刻重载了，是每次页面重载最后调用的那个函数，应该是这个导致的

问题处理

由于我们是微前端模式，子应用全局搜索

window.reload

只有一个地方匹配的，是跟cookie处理有关

由于我们是一个比较复杂的Saas系统，出现问题的原因是进行了微前端改造，基座中已经对授权登录进行了处理，进入子应用时候，都已经有登录态了

而且我们自身对于授权登录和cookie等的处理机制，造成了这个冲突，于是就不断触发了子应用的reload

解决,加上下面判断即可（通过基座加载时候不用reload）：

if (!window.__POWERED_BY_QIANKUN__){
  window.reload()
}

最终，在中午一点前解决发布了，没有阻碍同事下午到客户那边的演示学习总结

处理线上问题时候，一般步骤：

1.复现问题

2.定位问题的边界，是前端or后端

3.找出问题出现的原因：技术问题？业务设计问题？还是人为代码漏洞等

4.确定问题后看是否能彻底根治，如果不能，是否有其他风险，拉相关负责人探讨。如果能根治，快速设计根治方案，实施后测试上线发布

Tags 标签

前端javascriptcsshtmlnode.js

扩展阅读