-1

We have an Angular website. Here are some of the users reporting they are seeing white screen/blank screen on chrome and Edge browser after recent production deployment. We backtrack all changes and we did not find anything that would cause such a behavior.

We are not able to reproduce this issue at our end. Is there any way through which we can reproduce this issue? We are suspecting it is related to browser cache which is not refreshing after deployment that causing this issue but to conclude it we have to reproduce this issue at our end.

Please help me out. is there any way through which I can repro issue.

Thanks in advance.

--Edits

Please find the above images where js and CSS files are loading but it is not displaying any contents. There are two errors that we can ignore because on Edge same site loading with those errors.

Please see network tab

Ismael Padilla
  • 5,246
  • 4
  • 23
  • 35
sujayadkar
  • 63
  • 1
  • 13
  • Can be unssuported JS statement causing bootstrap script to fail - app wont load. Clients should see clear indication of in in the web console, ask them for feedback. Maybe missing polyfills. – Antoniossss Aug 16 '21 at 07:03
  • Can you ask the users to open F12 screen and report what they see (any errors)? – Felix Aug 16 '21 at 07:04
  • Some users refresh the page then the site loading fine. We can't ask users to open F12 they are real users and they don't much about development.Our call center team also not well versed with this.so it's not possible. – sujayadkar Aug 16 '21 at 07:18
  • @Antoniossss : but it should fail for all right? it is working fine on our machines.As per my understanding polyfills are used for IE only for chrome it should work out of the box.Correct me if I am worng – sujayadkar Aug 16 '21 at 07:18
  • No not for all. Different things are supported by different browsers. It can work eg in chrome but will not in firefox or IE. Thats why you have polyfills and other cross browser support magic which is not rly enabled by default. – Antoniossss Aug 16 '21 at 07:30
  • Besides that it is a blind shot - gather proper feedback from users having problems with your app (browser version, console output, maybe even reproduction steps – Antoniossss Aug 16 '21 at 07:31
  • @Antoniossss We have a browser version and I checked by reverting builds but still this issue is not able to repro.We will ask Call Center Team to provide console output – sujayadkar Aug 16 '21 at 08:35
  • @Antoniossss I think hashing is not working as expected here. I am facing the same issue https://stackoverflow.com/questions/62288814/cache-busting-is-not-working-sometimes-after-production-build-in-angular-7 – sujayadkar Aug 16 '21 at 12:21
  • So the scripts are not loaded - will be visible in the console. – Antoniossss Aug 16 '21 at 12:24
  • @Antoniossss : Scripts are loading but no page is visible on google chrome. On Edge, it is working fine. – sujayadkar Aug 16 '21 at 14:46
  • @Antoniossss Please find the above screenshot where js are loaded in the browser but the site is not loaded also after doing several page refresh and hard deleting cache also won't help here. Luckily We are able to repro this issue on one developer machine.Is there any way through which we can get rid of this behavior? – sujayadkar Aug 16 '21 at 14:58
  • I dont see scripts beeing loaded (network tab) as you claim, only some of them already loaded (scripts). I do see 403 errors on the other hand. Get rid of 403 and you will probably be fine. – Antoniossss Aug 16 '21 at 18:48
  • @Antoniossss : 403 error we can ignore it is related to McAfee antivirus it will load image. But other contents such as calling to API all those would drive from Angular applications js files right? Those things are not working here. But on another browser of the same machine, it is working fine. – sujayadkar Aug 17 '21 at 05:32
  • So it is https://members.knowledgepanel.com/login right?? I dont see GetResourceContents call on you screen. You have to debug it. – Antoniossss Aug 17 '21 at 06:09
  • I have main-es2015.0753b28ada7f18d98c78.js:1 Call stopWatching() before set config values so there are probably some issues in the code - its the end of blind guessing capabilities for me, init code is needed. (I still thik its a polyfils issue) – Antoniossss Aug 17 '21 at 06:10
  • In my case I have chunks loded from 1 to 9, while you have only 1 chunk. Maybe failing route guard, idk – Antoniossss Aug 17 '21 at 06:12
  • But I am fetching different main.js, so probably different version is served to me. – Antoniossss Aug 17 '21 at 06:14
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/236073/discussion-between-antoniossss-and-sujayadkar). – Antoniossss Aug 17 '21 at 07:35
  • @Antoniossss : This issue was related to routing. Thanks for your support. Can you edit the comment containing the site URL? – sujayadkar Aug 19 '21 at 19:20
  • @sujayadkar Sorry for commenting on an old post. We are also experiencing the same issues you have stated. What routing issue did you have in the end if you dont mind me asking? – Leviathan Jan 21 '22 at 13:58
  • @MarkSmith, Sorry for the delayed response. In routing one of the dev mistakenly returned a false flag while performing authentication therefore routing was not working and the above page was displayed. – sujayadkar Feb 03 '22 at 14:41

2 Answers2

0

When Console errors are there then high chances of getting blank screen is possible. As already discussed in comments, Browser compatibility may be the reason why application is properly loading at your end.

Also, from the 3rd image we can see website is not secure and this may correlate with the errors we see in console i.e., trustedsite-tm-main[config][403]

Try to get rid of all 403 errors and this should work fine.

Siva Makani
  • 196
  • 2
  • 17
0

About 403 error, you can check IIS log to get the substatus code. Then refer to this docs to fix this error.

403.1 - Execute access forbidden. 403.2 - Read access forbidden. 403.3 - Write access forbidden. 403.4 - SSL required. 403.5 - SSL 128 required. 403.6 - IP address rejected. 403.7 - Client certificate required. 403.8 - Site access denied. 403.9 - Forbidden: Too many clients are trying to connect to the web server. 403.10 - Forbidden: web server is configured to deny Execute access. 403.11 - Forbidden: Password has been changed. 403.12 - Mapper denied access. 403.13 - Client certificate revoked. 403.14 - Directory listing denied. 403.15 - Forbidden: Client access licenses have exceeded limits on the web server. 403.16 - Client certificate is untrusted or invalid. 403.17 - Client certificate has expired or is not yet valid. 403.18 - Cannot execute requested URL in the current application pool. 403.19 - Cannot execute CGI applications for the client in this application pool. 403.20 - Forbidden: Passport logon failed. 403.21 - Forbidden: Source access denied. 403.22 - Forbidden: Infinite depth is denied. 403.501 - Forbidden: Too many requests from the same client IP; Dynamic IP Restriction Concurrent request rate limit reached. 403.502 - Forbidden: Too many requests from the same client IP; Dynamic IP Restriction Maximum request rate limit reached. 403.503 - Forbidden: the IP address is included in the Deny list of IP Restriction 403.504 - Forbidden: the host name is included in the Deny list of IP Restriction

Bruce Zhang
  • 2,880
  • 1
  • 5
  • 11
  • Please read my earlier comments. It is not related to app loading. Thanks for your answer but it did not help me. – sujayadkar Aug 17 '21 at 07:46