httpErrors not working in case of angular app deployed using Azure Web App

Question

I have a angular app hosted using Azure Web app. I want to display custom error pages for respective HTTP Status codes : 400, 403, 404, 500

Here is the app URL: https://test.com

Now in case anyone navigates to a non-existing path say for example : https://test.com/**/nonexistingpath/test , in that case I want to display a custom error page instead of the default error page.

I introduced the following code snippet in the web.config file :

<httpErrors errorMode="Custom" existingResponse="Auto" defaultResponseMode="File" >
    <remove statusCode="400" subStatusCode="-1"/>
    <error statusCode="400" path="/public/400.html" />
</httpErrors>

Now on navigating to the non-existing path: https://test.com/**/nonexistingpath/test

I am not seeing the custom error page and instead of that I still see the default server error page which describes to set CustomError mode to Off

I am not sure why httpErrors are not picked up in this case.

Now I added the below snippet:

<customErrors mode="On" defaultRedirect="/public" >
    <error statusCode="400" redirect="/public/400.html"  />
</customErrors>

Again I navigated to the location : https://test.com/**/nonexistingpath/test

I see the URL in the browser : https://test.com/public/400.html?aspxerrorpath=/**/nonexistingpath/test

In this case I don't want to see the querystring value :aspxerrorpath=/**/nonexistingpath/test after the ? symbol

Can anyone help me with their guidance to fix this issue?

Answer 1

I did the following steps to fix the issue:

1. Removed the customErrors section completely

2. Added the below code :

   <httpErrors errorMode="Custom" existingResponse="Replace" defaultResponseMode="ExecuteURL" >
        <remove statusCode="400" subStatusCode="-1"/>
        <error statusCode="400" path="/public/400.html" responseMode="ExecuteURL"/>
     </httpErrors>
   

I validated the above changes and found working fine :)