From 3eeebe098d322f9926c36b61d0405aad25fedee7 Mon Sep 17 00:00:00 2001
From: qstokkink <goqs@hotmail.com>
Date: Wed, 11 Sep 2024 16:05:29 +0200
Subject: [PATCH] GUI error handling POC2b

---
 src/tribler/ui/src/Router.tsx                 | 22 +++++++++++++++++--
 src/tribler/ui/src/services/ipv8.service.ts   |  1 -
 src/tribler/ui/src/services/reporting.ts      |  2 +-
 .../ui/src/services/tribler.service.ts        |  1 -
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/tribler/ui/src/Router.tsx b/src/tribler/ui/src/Router.tsx
index 56af2239bf..1b18680297 100644
--- a/src/tribler/ui/src/Router.tsx
+++ b/src/tribler/ui/src/Router.tsx
@@ -1,6 +1,8 @@
-import { createHashRouter } from "react-router-dom";
+import { createHashRouter, Await, useRouteError } from "react-router-dom";
+import { Suspense } from 'react';
 import { SideLayout } from "./components/layouts/SideLayout";
 import { filterActive, filterAll, filterCompleted, filterDownloading, filterInactive } from "./pages/Downloads";
+import { handleHTTPError } from "./services/reporting";
 import NoMatch from "./pages/NoMatch";
 import Dashboard from "./pages/Dashboard";
 import Downloads from "./pages/Downloads";
@@ -20,11 +22,22 @@ import DHT from "./pages/Debug/DHT";
 import Libtorrent from "./pages/Debug/Libtorrent";
 import Asyncio from "./pages/Debug/Asyncio";
 
+var raiseUnhandledError;
+const errorPromise = new Promise(function(resolve, reject){
+  raiseUnhandledError = reject;
+});
+
+
+function ErrorBoundary() {
+  handleHTTPError(useRouteError());
+  return <div>The GUI crashed beyond repair. Please report the error and refresh the page.</div>;
+}
 
 export const router = createHashRouter([
     {
         path: "/",
-        element: <SideLayout />,
+        element: <><SideLayout className="h-full" /><Suspense className="hidden invisible">hi<Await resolve={errorPromise}></Await></Suspense></>,
+        errorElement: <ErrorBoundary />,
         children: [
             {
                 path: "",
@@ -117,3 +130,8 @@ export const router = createHashRouter([
         element: <NoMatch />,
     },
 ])
+
+window.addEventListener("unhandledrejection", (event) => {
+  raiseUnhandledError(event.reason);
+  event.preventDefault();
+});
diff --git a/src/tribler/ui/src/services/ipv8.service.ts b/src/tribler/ui/src/services/ipv8.service.ts
index 447727604b..2b405a1c31 100644
--- a/src/tribler/ui/src/services/ipv8.service.ts
+++ b/src/tribler/ui/src/services/ipv8.service.ts
@@ -13,7 +13,6 @@ export class IPv8Service {
             baseURL: this.baseURL,
             withCredentials: true,
         });
-        this.http.interceptors.response.use(function (response) { return response; }, handleHTTPError);
     }
 
 
diff --git a/src/tribler/ui/src/services/reporting.ts b/src/tribler/ui/src/services/reporting.ts
index 3bd58b6fea..5f70783a0a 100644
--- a/src/tribler/ui/src/services/reporting.ts
+++ b/src/tribler/ui/src/services/reporting.ts
@@ -8,7 +8,7 @@ export function handleHTTPError(error: Error | AxiosError) {
     if (axios.isAxiosError(error) && error.response?.data?.error?.message){
         error_popup_text.textContent = error.response.data.error.message.replace(/(?:\n)/g, '\r\n');
     } else {
-        error_popup_text.textContent = error.message;
+        error_popup_text.textContent = error.message + "\n" + error.stack.replace(/(?:\n)/g, '\r\n');
     }
     const error_popup = document.querySelector("#error_popup");
     if (error_popup && error_popup.classList.contains("hidden")) {
diff --git a/src/tribler/ui/src/services/tribler.service.ts b/src/tribler/ui/src/services/tribler.service.ts
index d5d6ce36e8..2d414b7678 100644
--- a/src/tribler/ui/src/services/tribler.service.ts
+++ b/src/tribler/ui/src/services/tribler.service.ts
@@ -26,7 +26,6 @@ export class TriblerService {
             baseURL: this.baseURL,
             withCredentials: true,
         });
-        this.http.interceptors.response.use(function (response) { return response; }, handleHTTPError);
         this.events = new EventSource(this.baseURL + '/events', { withCredentials: true });
         this.addEventListener("tribler_exception", OnError);
         // Gets the GuiSettings