From 87bcb23be9eecacb46e3cc3f9a2a98b96321b35d Mon Sep 17 00:00:00 2001
From: Lilian <lilian@blahaj.space>
Date: Tue, 6 Aug 2024 23:47:13 +0200
Subject: [PATCH] [frontend] Add ErrorBoundary based error display

---
 Iceshrimp.Frontend/App.razor                  | 45 ++++++++++-------
 Iceshrimp.Frontend/Components/ErrorUi.razor   | 49 +++++++++++++++++++
 .../Components/ErrorUi.razor.css              | 41 ++++++++++++++++
 3 files changed, 118 insertions(+), 17 deletions(-)
 create mode 100644 Iceshrimp.Frontend/Components/ErrorUi.razor
 create mode 100644 Iceshrimp.Frontend/Components/ErrorUi.razor.css

diff --git a/Iceshrimp.Frontend/App.razor b/Iceshrimp.Frontend/App.razor
index 29232d6c..faee4d90 100644
--- a/Iceshrimp.Frontend/App.razor
+++ b/Iceshrimp.Frontend/App.razor
@@ -1,19 +1,30 @@
 @using Iceshrimp.Frontend.Components
 @using Microsoft.AspNetCore.Components.Authorization
-<Router AppAssembly="@typeof(App).Assembly">
-    <Found Context="routeData">
-        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
-            <NotAuthorized>
-                <RedirectToLogin/>
-            </NotAuthorized>
-        </AuthorizeRouteView>
-        @* <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/> *@
-        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
-    </Found>
-    <NotFound>
-        <PageTitle>Not found</PageTitle>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Page not found.</p>
-        </LayoutView>
-    </NotFound>
-</Router>
\ No newline at end of file
+<ErrorBoundary @ref=ErrorBoundary>
+    <ChildContent>
+        <Router AppAssembly="@typeof(App).Assembly">
+            <Found Context="routeData">
+                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+                    <NotAuthorized>
+                        <RedirectToLogin/>
+                    </NotAuthorized>
+                </AuthorizeRouteView>
+                @* <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/> *@
+                <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
+            </Found>
+            <NotFound>
+                <PageTitle>Not found</PageTitle>
+                <LayoutView Layout="@typeof(MainLayout)">
+                    <p role="alert">Page not found.</p>
+                </LayoutView>
+            </NotFound>
+        </Router>
+    </ChildContent>
+    <ErrorContent Context="Exception">
+        <ErrorUi Exception="Exception"></ErrorUi>
+    </ErrorContent>
+</ErrorBoundary>
+
+@code {
+    private ErrorBoundary? ErrorBoundary { get; set; }
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/ErrorUi.razor b/Iceshrimp.Frontend/Components/ErrorUi.razor
new file mode 100644
index 00000000..e7fed3b0
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/ErrorUi.razor
@@ -0,0 +1,49 @@
+@using Iceshrimp.Frontend.Core.Services
+@using Iceshrimp.Frontend.Localization
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<Localization> Loc;
+@inject NavigationManager              Navigation;
+@inject VersionService                 Version;
+
+<div class="error-ui">
+    <h3>@Loc["Unhandled Exception has occured"]</h3>
+    <div class="body">
+        <div class="text">
+            <div>
+                @Loc["If this issue happens more than once, please join our support chat at: "]<a href="https://chat.iceshrimp.dev/">https://chat.iceshrimp.dev/</a><br/>
+                @Loc["Providing the below stack trace and version information will aid in debugging."]
+            </div>
+        </div>
+        <div class="stacktrace">
+            <code>@Exception.GetType(): @Exception.Message @Exception.StackTrace</code>
+        </div>
+        <div class="version">
+            <span class="name">Iceshrimp.NET</span>
+            <span class="value">
+                <code>@Version.Version</code>
+            </span>
+            <span class="name">Codename</span>
+            <span class="value">
+                <code>@Version.Codename</code>
+            </span>
+            @if (Version.CommitHash != null)
+            {
+                <span class="name">Commit</span>
+                <span class="value">
+                    <code>@Version.CommitHash</code>
+                </span>
+            }
+        </div>
+    </div>
+    <button class="btn" @onclick="Reload">@Loc["Reload Application"]</button>
+
+</div>
+
+@code {
+    [Parameter] [EditorRequired] public required Exception Exception { get; set; }
+
+    private void Reload()
+    {
+        Navigation.Refresh(true);
+    }
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/ErrorUi.razor.css b/Iceshrimp.Frontend/Components/ErrorUi.razor.css
new file mode 100644
index 00000000..2ddd9da2
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/ErrorUi.razor.css
@@ -0,0 +1,41 @@
+.stacktrace {
+    margin-top: 1rem;
+    align-self: center;
+    max-width: 80vw;
+    max-height: 50vh;
+    overflow: scroll;
+    background-color: black;
+    border-radius: 1rem;
+    padding: 0.5rem;
+    user-select: all;
+}
+
+.version {
+    max-width: 80vw;
+    display: flex;
+    flex-direction: column;
+    margin-top: 1rem;
+}
+
+.error-ui {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+code {
+    color: lightgray;
+    user-select: all;
+}
+
+.value {
+    margin-bottom: 0.5rem;
+    max-width: 100vw;
+    overflow: scroll;
+}
+
+.body {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+}
\ No newline at end of file