404 Page works on localhost but not on production

I have a 404 page on my localhost which works just fine. However, when it's pushed to Azure Web App, it does not.

I pushed it originally through the Publish tool, and right now I use the built in feature that pushes from a branch in Github.

I have the following web.config:

<system.web>
    <customErrors mode="On" defaultRedirect="~/Error/Index">
      <error redirect="~/Error/NotFound" statusCode="404" />
      <error redirect="~/Error/Index" statusCode="500" />

    </customErrors>
    <!-- More stuff :-) -->
  </system.web>
  <system.webServer>

This is my error controller:

 public class ErrorController : Controller
    {
        public ViewResult Index()
        {
            return View("Error");
        }
        public ViewResult NotFound()
        {
            Response.StatusCode = 404; 
            return View("NotFound");
        }
    }

My production web.config transformation file has not been changed at all (see how stuff is in comments):

<?xml version="1.0"?>

<!-- For more information on using Web.config transformation visit http://go.microsoft.com/fwlink/?LinkId=301874 -->

<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <!--
    In the example below, the "SetAttributes" transform will change the value of
    "connectionString" to use "ReleaseSQLServer" only when the "Match" locator
    finds an attribute "name" that has a value of "MyDB".

    <connectionStrings>
      <add name="MyDB"
        connectionString="Data Source=ReleaseSQLServer;Initial Catalog=MyReleaseDB;Integrated Security=True"
        xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
    </connectionStrings>
  -->
  <system.web>
    <compilation xdt:Transform="RemoveAttributes(debug)" />
    <!--
      In the example below, the "Replace" transform will replace the entire
      <customErrors> section of your Web.config file.
      Note that because there is only one customErrors section under the
      <system.web> node, there is no need to use the "xdt:Locator" attribute.

      <customErrors defaultRedirect="GenericError.htm"
        mode="RemoteOnly" xdt:Transform="Replace">
        <error statusCode="500" redirect="InternalError.htm"/>
      </customErrors>
    -->
  </system.web>
</configuration>

However, while my 404 page works just fine in localhost, in production I get:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

Instead of a nice looking 404 page.

Any idea?

I have a 404 page on my localhost which works just fine. However, when it's pushed to Azure Web App, it does not.

I used your code and reproduced your results.

I add <httpErrors existingResponse="PassThrough" /> to <system.webServer> </system.webServer> in the web.config ,then it works fine.

<system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <remove name="ApplicationInsightsWebTracking" />
      <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
    </modules>
    <httpErrors existingResponse="PassThrough" />
</system.webServer>