I have a deployed server-side Blazor application in production that has served many Droid Chrome clients for the past few years. Everything appears to work fine, and I have my own Droid phone that I regularly test with to verify that it works.
However, certain clients will connect and generate the following error that gets emitted to my logs:
System.AggregateException: One or more errors occurred. (TypeError: Cannot read properties of null (reading 'insertBefore'))
---> System.InvalidOperationException: TypeError: Cannot read properties of null (reading 'insertBefore')
at async Task Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, int[] updatedComponents)
--- End of inner exception stack trace ---
The exception results in a broken circuit and renders the application useless to this user.
As it seems to work for most clients generally, I am rather perplexed on how to proceed to diagnose and troubleshoot this issue.
I did see this error reported on StackOverflow, but the errors seem to be consistently reproduced during development. That is not this scenario. Here, this appears to be certain clients encountering this issue, while others have zero problems.
I am so very happy to say that I have found the answer to this problem here:
https://github.com/dotnet/aspnetcore/issues/54842#issuecomment-2049686505
The problem occurs because of HTML manipulation, either through an extension, app installation, or an OS feature itself (translation service, in my case). The answer is to make sure there is a tag after the HeadOutlet of the page:
<HeadOutlet @rendermode="new InteractiveServerRenderMode(false)" />
<link href="BlazorApp4.styles.css" rel="stylesheet" />