Add error pages

ReplayBrowser/Pages/Shared/Layout/Error.razor

@@ -4,6 +4,11 @@
 
 <PageTitle>Error</PageTitle>
 
+<MetaDataSpecifer
+    Title="Error"
+    Description="There was an error. Please try again later."
+/>
+
 <h1 class="text-danger">Error.</h1>
 <h2 class="text-danger">An error occurred while processing your request.</h2>
 

ReplayBrowser/Pages/Shared/Layout/ErrorCode.razor

@@ -0,0 +1,75 @@
+@page "/error/{code:int}"
+
+@inject NavigationManager NavigationManager
+
+<div class="error-container">
+    @{
+        switch (Code)
+        {
+            case 404:
+                <MetaDataSpecifer
+                    Title="Not found"
+                    Description="There is no page at the specified URL."
+                />
+                <h1>404 Not Found</h1>
+                <p>Oops. The page at <strong id="page-url"></strong> doesn't exist. What a shame.</p>
+                <em>Should there be a page here? Contribute to the project on <a href="https://github.com/Simyon264/ReplayBrowser" target="_blank">GitHub</a>!</em>
+                break;
+            case 500:
+                <MetaDataSpecifer
+                    Title="Internal Server Error"
+                    Description="There was an error on the server. Please try again later."
+                />
+                <h1>500 Internal Server Error</h1>
+                <p>There was an error on the server. Please try again later.</p>
+                <em>How did you get here? The other error page *should* have caught this.</em>
+                break;
+            default:
+                <MetaDataSpecifer
+                    Title="Error"
+                    Description="There was an error. Please try again later."
+                />
+                <h1>@Code</h1>
+                <p>There was an error. Please try again later.</p>
+                <em>That's all we know.</em>
+                break;
+        }
+    }
+</div>
+
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // If there is a url under the url query parameter, display it
+        if (window.location.search.includes('url=')) {
+            document.getElementById('page-url').innerText = new URLSearchParams(window.location.search).get('url');
+            return;
+        }
+
+        const url = window.location.href;
+        const urlParts = url.split('/');
+        const pageUrl = urlParts.slice(3).join('/');
+        document.getElementById('page-url').innerText = "/" + pageUrl;
+    });
+</script>
+
+<style>
+    .error-container h1 {
+        font-size: 3em;
+        --bs-text-opacity: 1;
+        color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
+    }
+
+    .error-container p {
+        font-size: 1.5em;
+    }
+
+    .error-container em {
+        font-size: 1em;
+    }
+</style>
+
+@code {
+    [Parameter]
+    public int Code { get; set; }
+}

ReplayBrowser/Pages/Shared/Layout/Routes.razor

@@ -1,4 +1,4 @@
-<Router AppAssembly="@typeof(Program).Assembly">
+<Router AppAssembly="@typeof(Startup).Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
         <FocusOnNavigate RouteData="@routeData" Selector="h1"/>

ReplayBrowser/Pages/ViewReplay.razor

@@ -9,11 +9,12 @@
 @inject AuthenticationStateProvider AuthenticationStateProvider
 @inject ReplayHelper ReplayHelper
 @inject ReplayParserService ReplayParserService
+@inject NavigationManager NavigationManager
 
 <PageTitle>Replay viewer</PageTitle>
 @if (Replay == null)
 {
-    <p>Replay not found</p>
+    <p>Loading...</p>
 }
 else
 {
@@ -70,5 +71,10 @@ else
     {
         var authstate = await AuthenticationStateProvider.GetAuthenticationStateAsync();
         Replay = await ReplayHelper.GetReplay(Id, authstate)!;
+        if (Replay == null)
+        {
+            var currentUrl = Uri.EscapeDataString(NavigationManager.Uri);
+            NavigationManager.NavigateTo($"/error/404?url={currentUrl}");
+        }
     }
 }

ReplayBrowser/Startup.cs

@@ -239,6 +239,7 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 #else
         app.UseDeveloperExceptionPage();
 #endif
+        app.UseStatusCodePagesWithReExecute("/error/{0}");
 
         app.UseHttpsRedirection();