Blazor Fluent UI Web components - FluentIcons are causing the error: "Received an unexpected EOF or 0 bytes from the transport stream."

Question

*UPDATE: On Azure I was able to temporarily open up the app service inbound traffic to the public and the error stops and the icon display. So I guess the question for below now is - what needs to be allowed through some very locked down networking rules for these icons to display. Could it be that some resources are missing from nuget package and the application is trying to get them over the network?

Also after tracking in app insights I see that the app service is returning 403s when it tries to access the fluent icon

I'm using BlazorFluentUi Web components and after deploying to Azure the Fluent Icon components no longer display (they do locally) and also seem to cause this error (full trace below):

Error: System.Net.Http.HttpRequestException: The SSL connection could not be established, see inner exception.

I am confused as to why this could be happening.

1. Would anybody have any idea why the icons do not show?
2. When I remove all FluentIcon `and FluentSearch components the error below no longer occurs.

I have the nuget packages installed and have the standard set up in place

program.cs

LibraryConfiguration config = new(ConfigurationGenerator.GetIconConfiguration(), ConfigurationGenerator.GetEmojiConfiguration());
builder.Services.AddFluentUIComponents(config);

project config

    <PublishFluentIconAssets>true</PublishFluentIconAssets>
    <FluentIconSizes>16,24,48</FluentIconSizes>
    <FluentIconVariants>Filled,Regular</FluentIconVariants>
    <PublishFluentEmojiAssets>false</PublishFluentEmojiAssets>

as well as specifying the styles in _Host

<link href="_content/Microsoft.Fast.Components.FluentUI/css/variables.css" rel="stylesheet" />

_imports

@using Microsoft.Fast.Components.FluentUI

As previously mentioned, icons display fine locally and don't cause any errors there.

Full stack trace

Error: System.Net.Http.HttpRequestException: The SSL connection could not be established, see inner exception.
---> System.IO.IOException:  Received an unexpected EOF or 0 bytes from the transport stream.
   at System.Net.Security.SslStream.ReceiveBlobAsync[TIOAdapter](CancellationToken cancellationToken)
   at System.Net.Security.SslStream.ForceAuthenticationAsync[TIOAdapter](Boolean receiveFirst, Byte[] reAuthenticationData, CancellationToken cancellationToken)
   at System.Net.Http.ConnectHelper.EstablishSslConnectionAsync(SslClientAuthenticationOptions sslOptions, HttpRequestMessage request, Boolean async, Stream stream, CancellationToken cancellationToken)
   --- End of inner exception stack trace ---
   at System.Net.Http.ConnectHelper.EstablishSslConnectionAsync(SslClientAuthenticationOptions sslOptions, HttpRequestMessage request, Boolean async, Stream stream, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.AddHttp11ConnectionAsync(QueueItem queueItem)
   at System.Threading.Tasks.TaskCompletionSourceWithCancellation`1.WaitWithCancellationAsync(CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.HttpConnectionWaiter`1.WaitForConnectionAsync(Boolean async, CancellationToken requestCancellationToken)
   at System.Net.Http.HttpConnectionPool.SendWithVersionDetectionAndRetryAsync(HttpRequestMessage request, Boolean async, Boolean doRequestAuth, CancellationToken cancellationToken)
   at System.Net.Http.DiagnosticsHandler.SendAsyncCore(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at Microsoft.Extensions.Http.Logging.LoggingHttpMessageHandler.<SendAsync>g__Core|5_0(HttpRequestMessage request, CancellationToken cancellationToken)
   at Microsoft.Extensions.Http.Logging.LoggingScopeHttpMessageHandler.<SendAsync>g__Core|5_0(HttpRequestMessage request, CancellationToken cancellationToken)
   at System.Net.Http.HttpClient.<SendAsync>g__Core|83_0(HttpRequestMessage request, HttpCompletionOption completionOption, CancellationTokenSource cts, Boolean disposeCts, CancellationTokenSource pendingRequestsCts, CancellationToken originalCancellationToken)
   at Microsoft.Fast.Components.FluentUI.HttpBasedStaticAssetService.GetAsync(String assetUrl, Boolean useCache) in /_/src/Microsoft.Fast.Components.FluentUI/Infrastructure/HttpBasedStaticAssetService.cs:line 50
   at Microsoft.Fast.Components.FluentUI.FluentIcon.GetIconContentAsync() in /_/src/Microsoft.Fast.Components.FluentUI/Components/Icon/FluentIcon.cs:line 226
   at Microsoft.Fast.Components.FluentUI.FluentIcon.OnAfterRenderAsync(Boolean firstRender) in /_/src/Microsoft.Fast.Components.FluentUI/Components/Icon/FluentIcon.cs:line 162
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

I built the project locally and it works ok. I have tried removing the FluentUI controls to see if the errors stopped and they did.

I have also looked at the code on Github but cannot glean any extra information from there.

I also don't have admin access to the deployed azure instance so I'm unsure if the firewall there could be blocking something. I'm not using a CDN, I believe the icons are part of the nuget, so I'm also unsure if the issue is not simply tied to the azure set up

If anyone can advise in any capacity I'd be very grateful

Answer 1

The short answer is to upgrade the NuGet package to version 3. The gentlemen developing the nuGet package mentioned this issue will be fixed with the new release and is already fixed in the release candiate