Search code examples
.netangularazureazure-web-app-service

Angular Application shows random 500 Server Errors with Azure App Service

We recently (in the past two weeks) discovered a very strange behavior in one of our production apps, which ran flawlessly for the last couple of months. There wasn't a deployment in over three months, either.

Somehow, a small portion of our user base (including some of our devs) are getting random 500 Internal Server Errors on PUT/POST requests, but none of them is visible on the backend on the server logs nor in Application insights.

Application insights itself logs those errors from the angular app with Status Code 0, which adds up to the confusion.

Interestingly, Any GET or DELETE request runs without any problem.

enter image description here

The response (body) is nonexistent, which is strange as well. enter image description here

Somehow, the timing tab in the Chrome dev tools only goes to initial connection, but it appears that no request/response is really handled/shown there, what would match up with the empty response. enter image description here

That's really all from Application Insights:

enter image description here

We added some custom error logging in the Angular Application, but all the errors are undefined and definitely not coming from our API.

Some other important information:

  • Frontend: Angular 17+
  • Backend: .NET 8
  • IdentityServer for Authentication.
  • We use NSwag for the Client Generation.
  • Everything is hosted on Azure App Services on different subdomains, CORS is configured and works fine, although we see some error in the console, but we believe this is a consequence of the random 500 error with the missing response headers.
  • No Reverse Proxy or API Gateway.
  • It miraculously starts working after a couple of minutes/hours, but starts failing multiple times a day.
  • A small portion of users are affected.
  • Login/Logout doesn't solve the issue.
  • Clearing the site's cache doesn't solve the issue.
  • A second (different) browser side by side with the same user works!
  • It occurs with Chrome, Brave, Edge and Mobile Safari.
  • We saw a big spike in Application Insights for this error in the last two weeks, without any changes or deployments.

Are there any known issues with this constellation? We are running out of ideas at this point.

The individual OPTIONS requests are successful: enter image description here

EDIT: The very same request that fails from Angular works (Dev Tools → Copy → Fetch) in the same tabs browser console.

EDIT II: On Safari on Mac no Http Status is shown at all! enter image description here

Solution

  • I am getting an error from Microsoft Azure's side which is affecting app services all over. For many (us included) the issue goes away if you set your app service to use http1.1 instead of http2 in your app service configuration.

    The issue has been escalated within Microsoft and they are indicating that they are working on fix. You will find this link useful: https://learn.microsoft.com/en-us/answers/questions/1687258/our-azure-app-service-application-started-to-exper?comment=question