Enhance error handling UI and middleware in ASP.NET

Updated `Error.razor` to provide distinct 404 and 500 error messages with a user-friendly layout, including a home button. Conditionally rendered Request ID display and removed development mode information for a cleaner user experience.

Modified `Program.cs` to change error handling middleware from re-executing the error page to redirecting with error codes, improving error information passed to the error page.
This commit is contained in:
Marco Minerva
2025-02-18 14:41:16 +01:00
parent d1ce7111c3
commit f0cccb00b9
2 changed files with 37 additions and 21 deletions
@@ -1,33 +1,49 @@
@page "/Error" @page "/Error"
@using System.Diagnostics @using System.Diagnostics
@rendermode @(new InteractiveServerRenderMode(prerender: false))
<PageTitle>Error</PageTitle> <div class="d-flex align-items-center justify-content-center">
<div class="text-center">
@if (Code == 404)
{
<PageTitle>Page Not Found</PageTitle>
<h1 class="text-danger">Error.</h1> <h1 class="display-1 fw-bold">404</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2> <p class="fs-3"><span class="text-danger">Ops!</span> Page Not Found.</p>
<p class="lead">
The page you're looking for does not exists.
</p>
}
else
{
<PageTitle>Unexpected Error</PageTitle>
@if (ShowRequestId) <h1 class="display-1 fw-bold">500</h1>
{ <p class="fs-3"><span class="text-danger">Ops!</span> Unexpected error.</p>
<p class="lead">
An unexpected error occurred while loading the page. Please, wait a minute and try again.
</p>
}
<a title="Back to Home" href="/" class="btn btn-primary"><i class="bi bi-house-door-fill"></i> Back to Home</a>
@if (ShowRequestId)
{
<p> <p>
<strong>Request ID:</strong> <code>@RequestId</code> <strong>Request ID:</strong> <code>@RequestId</code>
</p> </p>
} }
</div>
</div>
<h3>Development Mode</h3> @code {
<p>
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
</p>
<p>
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
It can result in displaying sensitive information from exceptions to end users.
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
and restarting the app.
</p>
@code{
[CascadingParameter] [CascadingParameter]
private HttpContext? HttpContext { get; set; } private HttpContext? HttpContext { get; set; }
[Parameter]
[SupplyParameterFromQuery(Name = "code")]
public int Code { get; set; }
private string? RequestId { get; set; } private string? RequestId { get; set; }
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId); private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+1 -1
View File
@@ -101,7 +101,7 @@ app.UseWhen(context => context.IsWebRequest(), builder =>
builder.UseHsts(); builder.UseHsts();
} }
builder.UseStatusCodePagesWithReExecute("/error"); builder.UseStatusCodePagesWithRedirects("/error?code={0}");
}); });
app.UseWhen(context => context.IsApiRequest(), builder => app.UseWhen(context => context.IsApiRequest(), builder =>