Fix History API loop

[lslezak]

Problem

• When registering the product from CLI the web UI was broken in Firefox
  
• See After registering the bases system from CLI the web UI shows a blank screen #2274
• It was fixed by a workaround: Fixed broken Web UI after registering the product from CLI #2281
• But we should find the real fix and remove that ugly workaround

Debugging

To debug the issue I have reverted the #2281 fix and added a small snippet which tracks using the History API into the web/src/index.tsx file:

let counter = 1;
const original = window.history.pushState;
window.history.pushState = function (data, unused, url) {
  console.log("pushState: ", counter, data, url);
  counter += 1;
  original.apply(this, [data, unused, url]);
};

That revealed that the History API was switching quickly between the product selection page and the probing progress page:

The Firefox browser has a limit of 200 History API calls within 10 seconds. After that an error is reported and an exception is raised. That exception causes a crash in the React router resulting in empty screen.

The problematic code was in the main application router:

if (selectedProduct === undefined && location.pathname !== PRODUCT.root) {
  return <Navigate to={PRODUCT.root} />;
}

if (phase === InstallationPhase.Config && isBusy && location.pathname !== PRODUCT.progress) {
  return <Navigate to={PRODUCT.progress} />;
}

The problem happened when the selected product was not updated yet (selectedProduct === undefined) but probing was already in progress (isBusy === true). In that case these conditions caused switching between the two paths as fast as possible. On my machine it was switching about 1000 times per second as displayed in the log above.

A similar problem was present in the product selection page.

Solution

• Handle this case explicitly, if that happens display the loading page until the selected product is updated.

Testing

• Tested manually, registration from CLI works fine even without that delay workaround
• There are just few calls to the History API
  

[dgdavid]

That's indeed a better fix than previous. Thanks for taking the time to investigate it and for the information added into the PR description. Much appreciated. Nice work 👍

[dgdavid]

BTW, this reminds me that we would like to improve both, the entire thing about the backend status (installation phase and isBusy stuff) and the App.tsx internal router... when time permits.

[dgdavid]

Weird to have the registration key set but the product not selected yet.

[lslezak]

That's because the product has been asynchronously selected from CLI in background. When using UI only this cannot happen.

[dgdavid]

Thanks for the explanation. Make sense.

[dgdavid]

BTW, this reminds me that we would like to improve both, the entire thing about the backend status (installation phase and isBusy stuff) and the App.tsx internal router... when time permits.

Using @imobachgs words

yes; the whole progress/status machinery needs some rework