关于前端:线上页面无限重载手把手教你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.确定问题后看是否能彻底根治，如果不能，是否有其余危险，拉相干负责人探讨。如果能根治，疾速设计根治计划，施行后测试上线公布