Blazor app is not working with Front door

Question

Hi,

My blazor app works fine in local. And I had deployed to App service in azure and did front door configuration for lower environments, then it shows warning message like below and all actions (Add/delete) works fine as expected.

But when i deployed the code to production app service it is throwing an error and ADD/update/delete actions are not working.

Can you please help me out? Thank you!

Answer 1

Hello YachamaneniSreelekha-1920,

Welcome to the Microsoft Q&A and thank you for posting your questions here.

Problem

I understand that you are having issue deploying your Blazor app to production environment, after deployment is not working with Front door.

Solution

To troubleshoot the error you encountered, try to do the followings:

• Ensure that you've properly configured the error page support for Blazor in your Program.cs. You mentioned using app.UseExceptionHandler("/Error", createScopeForErrors: true); in development mode, but this middleware might not work as expected when interacting with the server via SignalR (which Blazor uses for real-time communication). Consider adding a custom middleware to handle errors for example:

     app.Use(async (context, next) =>
     {
         if (!context.Request.Path.Value.Contains("Error"))
         {
             throw new Exception("An error occurred.");
         }
         await next.Invoke();
     });

This should route errors to the appropriate error component: https://stackoverflow.com/questions/77586315/how-to-use-new-useexceptionhandler-and-error-page-in-blazor-net8-0.

• Secondly, the “ServerSentEvent Failed” error with a status code of 404 typically indicates that the SignalR connection between the client (your Blazor app) and the server (Azure App Service) is encountering issues. So, ensure that WebSockets are enabled. Go to the Azure Portal, > navigate to your App Service, > and under "Configuration," verify that the WEBSOCKET_ENABLED setting is set to On. Also, enable the "Always On" setting to keep your app service warm and prevent it from going idle and check the logs for any additional information related to the 404 error. You can find these logs in the Azure Portal under "Monitoring > Diagnostics logs."
• If you're using NSGs or firewalls, make sure they allow traffic on the necessary ports (e.g., 80, 443, and 5001 for SignalR).
• Verify that your Blazor app's CORS settings allow requests from the production domain. if not, you can configure CORS in your Startup.cs file:

       services.AddCors(options =>
     {
         options.AddPolicy("AllowAllOrigins", builder =>
         {
             builder.AllowAnyOrigin()
                    .AllowAnyHeader()
                    .AllowAnyMethod();
         });
     });

• Use the browser's developer tools (e.g., F12 in Chrome) to inspect the network traffic. Try to look for any failed requests related to SignalR and correct it and check the console for any JavaScript errors.
• Lastly, implement retry policies in your Blazor app to handle transient connection issues, for an example, try to use Polly for retry logic if convenient for you.

References

Kindly, use the additional resources available by the right side of this page for more reading and troubleshooting.

To use Polly for retry logic use the links below:

• https://github.com/App-vNext/Polly/blob/main/docs/strategies/retry.md
• https://learn.microsoft.com/en-us/dotnet/architecture/microservices/implement-resilient-applications/implement-http-call-retries-exponential-backoff-polly
• https://github.com/mizrael/BlazorHttpResiliency
• https://martintmk.github.io/Polly/strategies/retry.html

Accept Answer

I hope this is helpful! Do not hesitate to let me know if you have any other questions.

** Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful ** so that others in the community facing similar issues can easily find the solution.

Best Regards,

Sina Salam