GUI error handling POC2b

Tribler · Sep 12, 2024 · 3eeebe0 · 3eeebe0
1 parent 4c389cc
commit 3eeebe0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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