Add Error Handling for collections cache load failures

radicale/web/internal_data/index.html

@@ -54,6 +54,7 @@
     </section>
 
     <section id="collectionsscene" class="hidden">
+      <div class="error hidden" data-name="collectionsscene_error"></div>
       <div class="fabcontainer">
         <a href="" class="green" data-name="new" title="Create a new addressbook or calendar">
           <img src="css/icons/new.svg" class="icon" alt="➕">

radicale/web/internal_data/js/scenes/CollectionsScene.js

@@ -23,6 +23,7 @@ import { delete_collection } from "../api/api.js";
 import { SERVER } from "../constants.js";
 import { Collection, CollectionType } from "../models/collection.js";
 import { collectionsCache } from "../utils/collections_cache.js";
+import { ErrorHandler } from "../utils/error.js";
 import { bytesToHumanReadable } from "../utils/misc.js";
 import { CreateEditCollectionScene } from "./CreateEditCollectionScene.js";
 import { DeleteConfirmationScene } from "./DeleteConfirmationScene.js";
@@ -48,8 +49,10 @@ export class CollectionsScene {
         /** @type {HTMLElement} */ let new_btn = html_scene.querySelector("[data-name=new]");
         /** @type {HTMLElement} */ let upload_btn = html_scene.querySelector("[data-name=upload]");
         /** @type {HTMLElement} */ let incomingshares_btn = html_scene.querySelector("[data-name=incomingshares]");
+        /** @type {HTMLElement} */ let error_div = html_scene.querySelector("[data-name=collectionsscene_error]");
 
         /** @type {Array<HTMLElement>} */ let nodes = [];
+        let errorHandler = new ErrorHandler(error_div);
 
         function onnew() {
             try {
@@ -126,13 +129,18 @@ export class CollectionsScene {
         /**
          * @param {any[]} collections
          * @param {import("../api/sharing.js").Share[]} shares
+         * @param {boolean} clear_error
          */
-        function show_collections(collections, shares) {
+        function show_collections(collections, shares, clear_error) {
             /** @type {HTMLElement} */ let navBar = document.querySelector("#logoutview");
             let heightOfNavBar = navBar.offsetHeight + "px";
             html_scene.style.marginTop = heightOfNavBar;
             html_scene.style.height = "calc(100vh - " + heightOfNavBar + ")";
 
+            if (clear_error) {
+                errorHandler.clearError();
+            }
+
             // Clear old nodes
             nodes.forEach(function (node) {
                 node.parentNode.removeChild(node);
@@ -223,14 +231,18 @@ export class CollectionsScene {
             });
         }
 
+        this.errorwrapper = function (/** @type {string} */ error) {
+            errorHandler.setError(error);
+            if (onerror) onerror(error);
+        };
 
         this.show = function () {
             html_scene.classList.remove("hidden");
             new_btn.onclick = onnew;
             upload_btn.onclick = onupload;
             incomingshares_btn.onclick = onincomingshares;
-            collectionsCache.getChildCollections(user, password, principal_collection, onerror, show_collections);
+            collectionsCache.getChildCollections(user, password, principal_collection, this.errorwrapper, show_collections);
-            collectionsCache.getServerFeatures(user, password, null, maybe_enable_sharing_options);
+            collectionsCache.getServerFeatures(user, password, this.errorwrapper, maybe_enable_sharing_options);
         };
         this.hide = function () {
             html_scene.classList.add("hidden");

radicale/web/internal_data/js/utils/collections_cache.js

@@ -52,11 +52,11 @@ class CollectionsCache {
      * @param {string} password
      * @param {import("../models/collection.js").Collection} principal_collection
      * @param {function(string):void} onerror
-     * @param {function(Array<import("../models/collection.js").Collection>, Array<import("../api/sharing.js").Share>):void} displayData
+     * @param {function(Array<import("../models/collection.js").Collection>, Array<import("../api/sharing.js").Share>, boolean):void} displayData
      */
     getChildCollections(user, password, principal_collection, onerror, displayData) {
         if (this.child_collections !== null && this.incoming_shares !== null) {
-            displayData(this.child_collections, this.incoming_shares);
+            displayData(this.child_collections, this.incoming_shares, false);
             return;
         }
 
@@ -79,7 +79,7 @@ class CollectionsCache {
             } else if (collections !== null && shares !== null) {
                 this.child_collections = collections;
                 this.incoming_shares = shares;
-                displayData(this.child_collections, this.incoming_shares);
+                displayData(this.child_collections, this.incoming_shares, true);
                 pop_scene();
             }
         };