SAP Spartacus在某些屏幕尺寸下无法正常工作的原因分析

有个使用SAP Spartacus的客户遇到一个问题：

We are getting one issue in our Spartacus application (currently we are on 2.1 version).
When we are trying to load checkout-login page with 100% zoom in the browser, it is loading not-found page instead of checkout-login page and when the same page is refreshed with 90% zoom in the browser, we can see the correct checkout-login page with proper data.

这个问题乍一看有点奇怪，当浏览器缩放比率为90%时，checkout-login 页面可以正常工作，但是当缩放率调至100%时，反而不能正常工作了，会显示not-found页面。

We checked the cms-page.guard.ts file in that it is going to canActivateNotFoundPage method instead of canActivatePage from canActivate Method.

原因分析

we found an error in "CustomOccCmsPageNormalizer" at:

问题是下面这段客户自开发代码引起的：

accountNavigationChildren = accountNavigationChildren.concat(
  supportComponentData.navigationNode
);

It seems like "supportComponentData" is undefined in some case. This variable contains the "MySupportComponent" component from the response. Since "supportComponentData" is undefined an error is thrown which causes the "checkout-login" page rendering to fail. Spartacus then falls back to getting the "not found" page.

To explain further, in the "CmsPageGuard", Spartacus calls "CmsService.getPage" which will try to load the checkout page.

Since there is an error in the page normalizer, the "CmsService" will return "false" to the "CmsPageGuard" meaning the page wasn't rendered. The "CmsPageGuard" then goes ahead and requests the "not found" page.

Because of an "if statement" wrapping the failing logic, the problem is only visible for screen sizes between 768 and 1399 (inclusively).

这个问题只有在屏幕尺寸位于区间768~1399区域内才能重现。

Additionally, we were not able to witness this same problem on the d1 server which might mean that the p1 server is missing the "MySupportComponent".