乐趣区

关于前端:线上页面无限重载手把手教你Debug

故事的开始

在一个阳光明媚的晚上,我吃完早餐准时来下班,听着吴亦凡的 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. 确定问题后看是否能彻底根治,如果不能,是否有其余危险,拉相干负责人探讨。如果能根治,疾速设计根治计划,施行后测试上线公布

退出移动版