Serving Up Pages for HTTP Status Codes - asp.net

Question

I'm trying to set up 500 and 404 pages for an ASP.NET 4.5.2 Web Forms project. I've got the 404 working when the non-existent page is a .ASPX page. - I have code written to serve up a custom NotFound.aspx page in response.
My problem occurs when I am using the Web.config to serve up a 404.html page for non-existent HTML pages. My 404.html page is in the root folder. If I test this with a non-existent HTML page in the root folder, 404.html renders correctly. However, if I test it with a non-existent HTML page in a non-existent sub-folder, the 404.html is served up, but the CSS/JS paths are no longer correct? It's like it's treating the CSS/JS paths as being relevant to the non-existent sub-folder I'm specifying as part of the test?
Global.asax.cs:
void Application_Error(object sender, EventArgs e)
{
Exception ex = Server.GetLastError();
if (ex != null && ex is HttpUnhandledException)
{
Server.ClearError();
Server.Transfer("~/Error.aspx", true);
}
if (ex != null)
{
var httpException = ex as HttpException;
if (httpException.GetHttpCode() == 404)
{
Server.ClearError();
Server.Transfer("~/NotFound.aspx", true);
}
}
}
Web.config:
<httpErrors errorMode="Custom" existingResponse="Replace">
<remove statusCode="404" />
<error statusCode="404" path="404.html" responseMode="File" />
</httpErrors>

Answer 1

Use absolute URLs for the CSS/JS paths. For example, in your 404.html (bootstrap and jquery are just examples):
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-3.0.0.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
Another setup would be to set responseMode="Redirect":
<httpErrors errorMode="Custom" existingResponse="Replace">
<remove statusCode="404" />
<error statusCode="404" path="/Errors/404.html" responseMode="Redirect" />
</httpErrors>
In this example, 404.html is in folder Errors and the URLs can be relative:
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.0.0.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
and that will work because the redirect URL is no longer relative to whatever URL you've requested.

Answer 2

I was able to solve it as follows:
<httpErrors errorMode="Custom" existingResponse="Replace">
<remove statusCode="404" />
<error statusCode="404" path="http://localhost/myproject/404.html"
responseMode="File" />
</httpErrors>
The key takeaway is that the path must be absolute for this version to work. So my next step would be to try and set the path programmatically so that in debug mode it would go to my local and in release mode go to the production URL. I don't want to mess with Web.config transform files.
If anyone has any further info, please feel free.