Nice Blazor server formatting for Sample Blazor App suddenly dissappears!

Question

I was having trouble with this AAD/B2C blazor sample (I was getting invalid_grant errors) on Saturday and Sunday, for no apparent reason (no changes that I made, not even a reboot), it suddenly worked and I got the nice display similar to the default blazor sever app (the increment and get weather report sample) where you have a nice menu with a blue background on the left panel... Hurray.. And I could successfully authenticate!

Monday afternoon (and again this morning) I can still authenticate but the nice formatting is suddenly gone! (again, no changes and a reboot did not help).

So when I sign in, I get the SUSI page I defined in the azure portal (where I can successfully authenticate) but then I get this crummy display:

It says "An unhandled exception as occurred. See devtools for details .... reload". Reloading has no affect. I cannot find any exception error or stack trace anywhere including the server log or the Edge dev tools after reproducing the problem.

Looks like someone deleted a .CSS or .js file or something...

Here is edge dev tools for console where I was hoping to see the exception:

Looks like all the files loaded successfully:

Looks like it is finding the source code:

So how do I debug this?

2022 Feb 08 Wed Afternoon Update:

Well I did not get round to punching a whole in my firewall to let me phone in, HOWEVER...

I originally developed this on my new Lenovo notebook with 32GB running Windows 11. I copied the visual studio solution directory to my 5 or 6 year old HP Envy with REALLY SLOW spinney disks and 16 GB of memory running Windows 10 and it displays properly:

Oh I love problems like this! :( Back to my original question: how do I debug this? Is there a problem with my code? It's identical to the copy on the lenovo! Why did not rebooting the lenovo fix the problem? Remember, it ran fine Sunday afternoon on the lenovo and I have not made any changes since Saturday (remember I was getting invalid grant on Saturday and that error magically went away)... Arrhg!

2022 Feb 08 Wed Evening Update:
OK, I went back to the new Lenovo/Win11 and fiddled with the launchsettings.json launchURL port for IIS Express to make it compatible with my AAD/B2C callback.

I discovered that I get the nice formatting again when launching with IIS Express on the Lenovo. But when I launch using from Visual Studio without IIS express (or use "dotnet watch run") on the Lenovo I get the brain damaged formatting... but only on the Lenovo... When I launch from the HP/Win10 without IISExpress it is fine (I get the nice formatting).

So just another clue! I'm still having the same problem because I want to be able to deploy to Azure/AppService without Windows/IIS/IISExpress.

2022 Feb 09 Thu Morning update:

OK, it was working with IIS on the lenovo and now it is not working (but that bad formatting is still working on the lenovo) but I got a new clue. We cannot connect to the websocket.

Answer 1

You are getting the error message from the _layout. as the navmenu component is missing, most likely it or the MainLayout is generating the error. you should implement server logging to determine the error.

remember blazor uses a virtual dom that is updated from the server, and javascript copies the virtual dom to the real dom. a failing component may leave the virtual dom tree in an unknown state.