⚡ extra error handling in case backend failed loading (#2601)

* ⚡ extra error handling in case backend failed loading

* Release notes

* Rename some error vars

packages/desktop-client/src/browser-server.js

@@ -12,15 +12,15 @@ let hasInitialized = false;
 const importScriptsWithRetry = async (script, { maxRetries = 5 } = {}) => {
   try {
     importScripts(script);
-  } catch (e) {
+  } catch (error) {
     // Break if maxRetries has exceeded
     if (maxRetries <= 0) {
-      throw e;
+      throw error;
     } else {
       console.groupCollapsed(
         `Failed to load backend, will retry ${maxRetries} more time(s)`,
       );
-      console.log(e);
+      console.log(error);
       console.groupEnd();
     }
 
@@ -36,39 +36,50 @@ const importScriptsWithRetry = async (script, { maxRetries = 5 } = {}) => {
   }
 };
 
-self.addEventListener('message', async e => {
-  if (!hasInitialized) {
-    const msg = e.data;
+self.addEventListener('message', async event => {
+  try {
+    if (!hasInitialized) {
+      const msg = event.data;
 
-    if (msg.type === 'init') {
-      hasInitialized = true;
-      const isDev = !!msg.isDev;
-      // let version = msg.version;
-      const hash = msg.hash;
+      if (msg.type === 'init') {
+        hasInitialized = true;
+        const isDev = !!msg.isDev;
+        // let version = msg.version;
+        const hash = msg.hash;
 
-      if (!self.SharedArrayBuffer && !msg.isSharedArrayBufferOverrideEnabled) {
-        self.postMessage({
-          type: 'app-init-failure',
-          SharedArrayBufferMissing: true,
+        if (
+          !self.SharedArrayBuffer &&
+          !msg.isSharedArrayBufferOverrideEnabled
+        ) {
+          self.postMessage({
+            type: 'app-init-failure',
+            SharedArrayBufferMissing: true,
+          });
+          return;
+        }
+
+        await importScriptsWithRetry(
+          `${msg.publicUrl}/kcab/kcab.worker.${hash}.js`,
+          { maxRetries: isDev ? 5 : 0 },
+        );
+
+        backend.initApp(isDev, self).catch(err => {
+          console.log(err);
+          const msg = {
+            type: 'app-init-failure',
+            IDBFailure: err.message.includes('indexeddb-failure'),
+          };
+          self.postMessage(msg);
+
+          throw err;
         });
-        return;
       }
-
-      await importScriptsWithRetry(
-        `${msg.publicUrl}/kcab/kcab.worker.${hash}.js`,
-        { maxRetries: isDev ? 5 : 0 },
-      );
-
-      backend.initApp(isDev, self).catch(err => {
-        console.log(err);
-        const msg = {
-          type: 'app-init-failure',
-          IDBFailure: err.message.includes('indexeddb-failure'),
-        };
-        self.postMessage(msg);
-
-        throw err;
-      });
     }
+  } catch (error) {
+    console.log('Failed initializing backend:', error);
+    self.postMessage({
+      type: 'app-init-failure',
+      BackendInitFailure: true,
+    });
   }
 });

packages/desktop-client/src/components/FatalError.tsx

@@ -15,6 +15,7 @@ type AppError = Error & {
   type?: string;
   IDBFailure?: boolean;
   SharedArrayBufferMissing?: boolean;
+  BackendInitFailure?: boolean;
 };
 
 type FatalErrorProps = {
@@ -64,18 +65,7 @@ function RenderSimple({ error }: RenderSimpleProps) {
     // user something at least so they aren't looking at a blank
     // screen
     msg = (
-      <Text>
-        There was a problem loading the app in this browser version. If this
-        continues to be a problem, you can{' '}
-        <Link
-          variant="external"
-          linkColor="muted"
-          to="https://github.com/actualbudget/releases"
-        >
-          download the desktop app
-        </Link>
-        .
-      </Text>
+      <Text>There was a problem loading the app in this browser version.</Text>
     );
   }
 

upcoming-release-notes/2601.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Improved fatal-error handling in case backend failed loading: show error message.