GUI failsafe error handling

Tribler · Sep 13, 2024 · 5f0aab9 · 5f0aab9
1 parent 6e0e8c2
commit 5f0aab9
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 10 deletions.
diff --git a/src/tribler/ui/index.html b/src/tribler/ui/index.html
@@ -8,7 +8,7 @@
     <meta name="description" content="Tribler">
   </head>
   <body class="min-h-screen">
-    <div id="root" class="relative flex min-h-screen flex-col"></div>
+    <div id="root" class="h-full relative flex min-h-screen flex-col"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
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: (reason?: any) => void;
+const errorPromise = new Promise(function(resolve, reject){
+  raiseUnhandledError = reject;
+});
+
+
+function ErrorBoundary() {
+  handleHTTPError(useRouteError() as Error);
+  return <div>The GUI crashed beyond repair. Please report the error and refresh the page.</div>;
+}
 
 export const router = createHashRouter([
     {
         path: "/",
-        element: <SideLayout />,
+        element: <div className="flex-1 flex"><SideLayout /><div className="h-0 hidden invisible"><Suspense><Await children={[]} resolve={errorPromise}></Await></Suspense></div></div>,
+        errorElement: <ErrorBoundary />,
         children: [
             {
                 path: "",
@@ -117,3 +130,9 @@ export const router = createHashRouter([
         element: <NoMatch />,
     },
 ])
+
+window.addEventListener("unhandledrejection", (event) => {
+  let exc = event.reason;
+  raiseUnhandledError(exc as Error);
+  event.preventDefault();
+});
diff --git a/src/tribler/ui/src/components/layouts/Header.tsx b/src/tribler/ui/src/components/layouts/Header.tsx
@@ -64,7 +64,7 @@ export function Header() {
     }
 
     return (
-        <>
+        <div className="h-fit">
             <Dialog open={!online || shutdownLogs.length > 0}>
                 <DialogContent
                     closable={false}
@@ -135,6 +135,6 @@ export function Header() {
                     className: 'bg-accent text-foreground font-light',
                 }}
             />
-        </>
+        </div>
     )
 }
diff --git a/src/tribler/ui/src/components/layouts/SideLayout.tsx b/src/tribler/ui/src/components/layouts/SideLayout.tsx
@@ -21,7 +21,7 @@ export function SideLayout() {
     const [showNav, setShowNav] = useState(false)
 
     return (
-        <>
+        <div className="flex-grow flex flex-col">
             <Header />
             <div className="flex-grow container px-0 flex flex-col md:flex-row md:space-x-4 lg:space-x-4 md:pl-6">
                 <div>
@@ -119,6 +119,6 @@ export function SideLayout() {
                     </div>
                 </div>
             </div>
-        </>
+        </div>
     )
 }
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,10 @@ 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;
+        var stack = "";
+        if (error.stack)
+            stack = error.stack.replace(/(?:\n)/g, '\r\n');
+        error_popup_text.textContent = error.message + "\n" + stack;
     }
     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
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,6 @@ export class IPv8Service { @@
                 baseURL: this.baseURL,
                 withCredentials: true,
             });
-            this.http.interceptors.response.use(function (response) { return response; }, handleHTTPError);
         }
@@ Expand Down @@