🐛 fix router notfound create 404.razor

neozhu · Dec 23, 2023 · 6a3ff98 · 6a3ff98
2 parents f318ddb + b0ee338
commit 6a3ff98
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 30 deletions.
diff --git a/src/Server.UI/Components/Routes.razor b/src/Server.UI/Components/Routes.razor
@@ -7,34 +7,23 @@
 @inject LayoutService LayoutService
 
 <Fluxor.Blazor.Web.StoreInitializer />
+<CascadingAuthenticationState>
+    <Router AppAssembly="@typeof(Program).Assembly">
+        <Found Context="routeData">
+            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+                <Authorizing>
+                    <text>@L["Please wait, we are authorizing you..."]</text>
+                </Authorizing>
+                <NotAuthorized>
+                    <RedirectToLogin />
+                </NotAuthorized>
+            </AuthorizeRouteView>
+            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+        </Found>
+    </Router>
+</CascadingAuthenticationState>
 
+@code
+{
 
-        <CascadingAuthenticationState>
-            <Router AppAssembly="@typeof(Program).Assembly">
-                <Found Context="routeData">
-                    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
-                        <Authorizing>
-                            <text>@L["Please wait, we are authorizing you..."]</text>
-                        </Authorizing>
-                        <NotAuthorized>
-                          <RedirectToLogin/>
-                        </NotAuthorized>
-                    </AuthorizeRouteView>
-                </Found>
-                <NotFound>
-                    <PageTitle>Not found</PageTitle>
-                    <LayoutView Layout="@typeof(MainLayout)">
-                        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="d-flex">
-                            <p role="alert">
-                                @L["Sorry, there's nothing at this address."] <MudButton Variant="Variant.Filled" Size="Size.Small" Link="/">@L["Go Home"]</MudButton>
-                                </p>
-                            </MudContainer>
-                        </LayoutView>
-                    </NotFound>
-                </Router>
-            </CascadingAuthenticationState>
-
-    @code
-    {
-
 }
diff --git a/src/Server.UI/DependencyInjection.cs b/src/Server.UI/DependencyInjection.cs
@@ -68,13 +68,18 @@ public static IServiceCollection AddServerUI(this IServiceCollection services, I
 
     public static WebApplication ConfigureServer(this WebApplication app, IConfiguration config)
     {
-        if (!app.Environment.IsDevelopment())
+        // Configure the HTTP request pipeline.
+        if (app.Environment.IsDevelopment())
+        {
+            app.UseMigrationsEndPoint();
+        }
+        else
         {
             app.UseExceptionHandler("/Error", createScopeForErrors: true);
             // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
             app.UseHsts();
         }
-
+        app.UseStatusCodePagesWithRedirects("/404");
         app.MapHealthChecks("/health");
         app.UseHttpsRedirection();
         app.UseStaticFiles();

diff --git a/src/Server.UI/Pages/404.razor b/src/Server.UI/Pages/404.razor
@@ -0,0 +1,22 @@
+@page "/404"
+@inject IStringLocalizer<SharedResource> L
+<PageTitle>Not found</PageTitle>
+<MudPaper Class="pa-16 ma-2" Elevation="3" Style="max-width: 100%;
+  height: 475px;
+  margin: 0;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;">
+
+    <h1 style="font-size: 48px; margin: 0;">
+        404 Error.
+    </h1>
+    <p style=" font-size: 16px;  width: 35%;  margin: 16px auto 24px; text-align: center;"> We can't find the page you're looking for.</p>
+    <MudButton Variant="Variant.Filled" Size="Size.Small" Href="/">@L["Go Home"]</MudButton>
+</MudPaper>
+
+@code {
+
+}
diff --git a/src/Server.UI/Pages/Error.razor b/src/Server.UI/Pages/Error.razor
@@ -0,0 +1,43 @@
+@page "/Error"
+@using System.Diagnostics
+
+<PageTitle>Error</PageTitle>
+<MudPaper Class="pa-16 ma-2" Elevation="3" Style="max-width: 100%;
+  height: 475px;
+  margin: 0;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;">
+    <h1 class="text-danger">Error.</h1>
+    <h2 class="text-danger">An error occurred while processing your request.</h2>
+
+    @if (ShowRequestId)
+    {
+        <p>
+            <strong>Request ID:</strong> <code>@RequestId</code>
+        </p>
+    }
+
+    <h3>Development Mode</h3>
+    <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>
+</MudPaper>
+@code {
+    [CascadingParameter]
+    private HttpContext? HttpContext { get; set; }
+
+    private string? RequestId { get; set; }
+    private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    protected override void OnInitialized() =>
+        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+}