Avoid onboarding screen if /api/organizationsIsEmpty fails (#8356)

* add error handling

* remove unused imports

* improve structure of try catch clause

* add changelog

* add margin

* remove typo

* move other api calls outside of try catch block

* add another function call to try and catch because failure would lead to blank screen

* move all methods to try catch block

* improve styling

Author: knollengewaechs

CHANGELOG.unreleased.md

@@ -21,6 +21,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Fixed
 - Fixed a bug that lead to trees being dropped when merging to trees together. [#8359](https://github.com/scalableminds/webknossos/pull/8359)
+- Fixed that the onboarding screen incorrectly appeared when a certain request failed. [#8356](https://github.com/scalableminds/webknossos/pull/8356)
 - Fixed the segment registering in coarser mags for non-mag-aligned bounding boxes. [#8364](https://github.com/scalableminds/webknossos/pull/8364)
 
 ### Removed

frontend/javascripts/main.tsx

@@ -53,7 +53,7 @@ const localStoragePersister = createSyncStoragePersister({
   key: "query-cache-v3",
 });
 
-async function loadActiveUser() {
+async function tryToLoadActiveUser() {
   // Try to retrieve the currently active user if logged in
   try {
     const user = await getActiveUser({
@@ -73,12 +73,8 @@ async function loadActiveUser() {
 
 async function loadHasOrganizations() {
   // Check whether any organizations exist
-  try {
-    const hasOrganizations = await checkAnyOrganizationExists();
-    Store.dispatch(setHasOrganizationsAction(hasOrganizations));
-  } catch (_e) {
-    // pass
-  }
+  const hasOrganizations = await checkAnyOrganizationExists();
+  Store.dispatch(setHasOrganizationsAction(hasOrganizations));
 }
 
 async function loadOrganization() {
@@ -97,10 +93,32 @@ document.addEventListener("DOMContentLoaded", async () => {
   });
   message.config({ top: 30 });
   checkBrowserFeatures();
-  await Promise.all([loadFeatureToggles(), loadActiveUser(), loadHasOrganizations()]);
-  await Promise.all([loadOrganization()]);
   const containerElement = document.getElementById("main-container");
 
+  try {
+    await Promise.all([
+      loadFeatureToggles(),
+      // This function call cannot error as it has a try-catch built-in
+      tryToLoadActiveUser(),
+      // *Don't* ignore errors in this request. We only want
+      // to show an onboarding screen if the back-end replied
+      // with hasOrganizations==true.
+      loadHasOrganizations(),
+    ]);
+    await loadOrganization();
+  } catch (e) {
+    console.error("Failed to load WEBKNOSSOS due to the following error", e);
+    if (containerElement) {
+      const react_root = createRoot(containerElement);
+      react_root.render(
+        <p style={{ margin: 20, marginTop: -20 }}>
+          Failed to load WEBKNOSSOS. Please try again or check the console for details.
+        </p>,
+      );
+    }
+    return;
+  }
+
   if (containerElement) {
     const react_root = createRoot(containerElement);
     react_root.render(