Unlimited reloading of online pages, teach you how to debug

The beginning of the story

On a sunny morning, I came to work on time after breakfast. Listening to Wu Yifan’s freestyle, I felt that today should be a day without wind and waves.

However, the development of things will always exceed our expectations

---

Online problem

The video in question is probably:

The user jumped to our Saas system through the third-party OA system, and the result was that the page was reloaded all the time.

problem analysis

1. This login is an authorized login, not a single sign-on, and the parameters of the login are passed to the backend through the parameters of the url.

2. Authorized login has always been stable. Last year, I did the enterprise WeChat connection, it should be no problem

3. Viewing the user's problem through the recorded video should be the constant reloading of the front-end page, unlike the redirection of the back-end

Locate the boundary of the problem

1. Confirm that the authorized login is normal, and the login status is written

2. Determine the non-backend redirection caused

3. Then the problem is positioned as a pure front-end problem

Problem recurrence

1. First log in to the customer's third-party OA system

2. Then jump to our Saas system to reproduce the problem

Find the problem from the result

performance cause of online page refreshing is that the front end calls the reload function, so I recorded a wave of flame graphs (call stack graphs) as follows through the 0610ca5bb14d7f panel:

After searching reload , there are 5 matching results. After checking, it is found reload function is called, the page is immediately reloaded. It is the last function called every time the page is reloaded. This should be caused by this.

Problem handling

Since we are in the micro front-end mode, sub-applications are searched globally

window.reload

There is only one match, which is related to cookie processing

Since we are a relatively complex Saas system, the reason for the problem is that we have carried out a micro-front-end transformation. The authorized login has been processed in the base. When entering the sub-application, there is already a login state.

And our own processing mechanism for authorized login and cookies, etc., caused this conflict, so we constantly triggered the reload of the sub-application

To solve it, add the following judgments (reload is not required when loading through the base):

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

In the end, it was resolved and released before one noon, and it did not hinder colleagues from coming to the customer’s presentation in the afternoon.

summarize

When dealing with online problems, the general steps:

1. Reproduce the problem

2. The boundary of the positioning problem is the front end or the back end

3. Find out the cause of the problem: technical problem? Business design issues? Or is it man-made code vulnerabilities, etc.

4. After determining the problem, see if it can be completely cured, if not, if there are other risks, ask the relevant person in charge to discuss. If it can be cured, quickly design a radical cure plan, and launch the test after implementation