search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.84k stars 373 forks source link

Icons don't display on Azure #598

Closed vincemcc79 closed 1 year ago

vincemcc79 commented 1 year ago

🐛 Bug Report

FluentIcons don't display on Blazor server app deployed to azure unless public access enabled

💻 Repro or Code Sample

Deploy a default template blazor app with a fluent icon somewhere on the index page and deploy to azure. It will appear. Now restrict inbound traffic to just your IP address. Open up a new browser and check the address ,- the icon will have disapeared

🤔 Expected Behavior

The icons display locally, but unfortunately after deploying to Azure they no longer display unless all inbound traffic is set to allowed, I'd expect them to display regardless as they are being accessed from the _content folder?

😯 Current Behavior

I am developing a Blazor Server app that is deployed on Azure uses Microsoft.Fast.Components.FluentUI for icons. They work fine locally but after deploying to azure, the icons don't display and also cause errors of the type

`Error: System.Net.Http.HttpRequestException: The SSL connection could not be established, see inner exception. (see fig3 for full stack trace) Strangely, if I change the inbound traffic access to public, [Networking-> inbound access ->Access restriction -> public], then these errors go away and the icons display (see fig 1) but this obviously isn’t a solution.

I set up live logging on app insights and weirdly the icons are returning 403s when the app service tries to access them - then the error above happens. I can access this url/display the image in the browser so strange the app service doesn't authorize this. (see fig2) These icons are in the content folder so it’s strange they're unauthorised. My question for you all; Has anyone an idea of what could be getting blocked and causing the icons not to show as it looks like that something that is blocked when we are using the private endpoint is causing the 403s and I’d like to figure out what.

I’d sincerely appreciate any help anyone could provide on this matter

Fig 1 open up inbound traffic to public

image

Fig 2 – 403 errors from application insights

image

Outgoing command
GET /_content/Microsoft.Fast.Components.FluentUI/icons/Phone/48_r.svg
Result code: 403
AspNetCoreEnvironment: Production
_MS.ProcessedByMetricExtractors:(Name:'Dependencies', Ver:'1.1')
url:https:/mysitehere.azurewebsites.net/_content/Microsoft.Fast.Components.FluentUI/icons/Phone/48_r.svg

Fig 3 Complete Error

``blazor.server.js:1 [2023-08-01T15:34:41.396Z] 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)

💁 Possible Solution

Perhaps if I could find out what is being blocked I could allow it?

🔦 Context

🌍 Your Environment

dvoituron commented 1 year ago

In the next version (3.0) of the librarie, we have created a new package FluentUI Icons NuGet package contains all these icons. This will certainly solve this problem.

See: https://preview.fluentui-blazor.net/Icon

vincemcc79 commented 1 year ago

Hi Denis,

Many thanks for the quick response. I really appreciate it!

The icon is there - I can see it in the content folder and also on the browser when inbound traffic is set to public. The issue is more that it doesn't display without this inbound traffic access set to public. Would you know why this is happening in this case? When is the new version due out - if it fixes the issue I've detailed then I can make an argument with my employer to still use fluentui-blazor?

Thanks again

vnbaaij commented 1 year ago

In the 2.x version of the library we are using a separate HttpContext service to download the icons. I'm pretty sure that is where the issue comes from. As Denis said, version 3 changes that. We are at RC1 now and expect to have final release before end of August. Please test your scenario with the RC release and let us know if it works. If not, we can make sure to address the issue before we do the final release Maybe you can get V2 to work by setting the base address on the httpbasedstaticassetsservice? See https://github.com/microsoft/fluentui-blazor/blob/main/src/Microsoft.Fast.Components.FluentUI/Infrastructure/StaticAssetServiceConfiguration.cs#L3

vincemcc79 commented 1 year ago

Hi Vincent,

I pulled down the RC 3 release but unfortunately I get an error if I include a fluentIcon on a page or component. (local debug from vs2022 - other fluent ui controls display ok)

@using Microsoft.Fast.Components.FluentUI
....
<FluentIcon Icon="@(Icons.Regular.Size24.Save)" />

FileNotFoundException: Could not load file or assembly 'Microsoft.Fast.Components.FluentUI, Version=3.1.23185.1, Culture=neutral, PublicKeyToken=null'.

The old config setup has changed I see that the LibraryConfiguration no longer has a constructor that takes the icon arguments anymore. Is there anything else I need to do to to get Icons working in RC 3.01?

Once again, thank you for the responses

dvoituron commented 1 year ago

That's a known issue which will be fixed quickly.

See https://github.com/microsoft/fluentui-blazor/issues/573

vincemcc79 commented 1 year ago

I had a quick test and it looks good with the candidate version - 3.0.0-preview.5. I'll hopefully be able to do a proper test tomorrow and let you know how it went

Thanks again for the support, I really appreciate it

dvoituron commented 1 year ago

Yes, the new FluentIcon component has 2 attributes for displaying a specific icon:

So, in your case, you can create an instance of new Icons.Regular.Size48.Alert() and use this icon in your project, using the FluentIcon Value="" attribute.

vincemcc79 commented 1 year ago

Thank you Denis,

I actually deleted the question just after I posted it as it didn't feel like to correct place to post this. Thanks very much for the response, that makes perfect sense.

sambathrajv commented 1 year ago

In the 2.x version of the library we are using a separate HttpContext service to download the icons. I'm pretty sure that is where the issue comes from. As Denis said, version 3 changes that. We are at RC1 now and expect to have final release before end of August. Please test your scenario with the RC release and let us know if it works. If not, we can make sure to address the issue before we do the final release Maybe you can get V2 to work by setting the base address on the httpbasedstaticassetsservice? See https://github.com/microsoft/fluentui-blazor/blob/main/src/Microsoft.Fast.Components.FluentUI/Infrastructure/StaticAssetServiceConfiguration.cs#L3

Hi, Due to the timeline constraints, we cannot use the RC. How can we fix the issue using the StaticAssetServiceConfiguration? What is the expected value for BaseAddress? image

vnbaaij commented 1 year ago

Your site's base url