Handle offline saving errors

app/assets/javascripts/app/controllers/editor.js

@@ -40,6 +40,19 @@ angular.module('app')
       this.loadTagsString();
     }.bind(this));
 
+    // Right now this only handles offline saving status changes.
+    this.syncStatusObserver = syncManager.registerSyncStatusObserver((status) => {
+      if(status.localError) {
+        $timeout(() => {
+          this.showErrorStatus({
+            message: "Offline Saving Issue",
+            desc: "Changes not saved"
+          });
+        }, 500)
+      } else {
+      }
+    })
+
     modelManager.addItemSyncObserver("component-manager", "Note", (allItems, validItems, deletedItems, source) => {
       if(!this.note) { return; }
 
@@ -283,10 +296,16 @@ angular.module('app')
       this.noteStatus = $sce.trustAsHtml(status);
     }
 
-    this.showErrorStatus = function() {
+    this.showErrorStatus = function(error) {
+      if(!error) {
+        error = {
+          message: "Sync Unreachable",
+          desc: "All changes saved offline"
+        }
+      }
       this.saveError = true;
       this.syncTakingTooLong = false;
-      this.noteStatus = $sce.trustAsHtml("<span class='error bold'>Sync Unreachable</span><br>All changes saved offline")
+      this.noteStatus = $sce.trustAsHtml(`<span class='error bold'>${error.message}</span><br>${error.desc}`)
     }
 
     this.contentChanged = function() {

app/assets/javascripts/app/services/dbManager.js

@@ -90,11 +90,11 @@ class DBManager {
     this.saveModels([item]);
   }
 
-  saveModels(items, callback) {
+  saveModels(items, onsuccess, onerror) {
 
     if(items.length == 0) {
-      if(callback) {
-        callback();
+      if(onsuccess) {
+        onsuccess();
       }
       return;
     }
@@ -109,6 +109,17 @@ class DBManager {
         console.log("Transaction error:", event.target.errorCode);
       };
 
+      transaction.onabort = function(event) {
+        console.log("Offline saving aborted:", event);
+        var error = event.target.error;
+        if(error.name == "QuotaExceededError") {
+          alert("Unable to save changes locally because your device is out of space. Please free up some disk space and try again, otherwise, your data may end up in an inconsistent state.");
+        } else {
+          alert(`Unable to save changes locally due to an unknown system issue. Issue Code: ${error.code} Issue Name: ${error.name}.`);
+        }
+        onerror && onerror(error);
+      };
+
       var itemObjectStore = transaction.objectStore("items");
       var i = 0;
       putNext();
@@ -119,8 +130,8 @@ class DBManager {
           itemObjectStore.put(item).onsuccess = putNext;
           ++i;
         } else {
-          if(callback){
-            callback();
+          if(onsuccess){
+            onsuccess();
           }
         }
       }

app/assets/javascripts/app/services/storageManager.js

@@ -208,11 +208,11 @@ class StorageManager {
     this.saveModels([item]);
   }
 
-  saveModels(items, callback) {
+  saveModels(items, onsuccess, onerror) {
     if(this.modelStorageMode == StorageManager.Fixed) {
-      this.dbManager.saveModels(items, callback);
+      this.dbManager.saveModels(items, onsuccess, onerror);
     } else {
-      callback && callback();
+      onsuccess && onsuccess();
     }
   }
 

app/assets/javascripts/app/services/syncManager.js

@@ -11,6 +11,7 @@ class SyncManager {
     this.storageManager = storageManager;
     this.passcodeManager = passcodeManager;
     this.syncStatus = {};
+    this.syncStatusObservers = [];
   }
 
   get serverURL() {
@@ -21,6 +22,22 @@ class SyncManager {
     return this.storageManager.getItem("mk");
   }
 
+  registerSyncStatusObserver(callback) {
+    var observer = {key: new Date(), callback: callback};
+    this.syncStatusObservers.push(observer);
+    return observer;
+  }
+
+  removeSyncStatusObserver(observer) {
+    _.pull(this.syncStatusObservers, observer);
+  }
+
+  syncStatusDidChange() {
+    this.syncStatusObservers.forEach((observer) => {
+      observer.callback(this.syncStatus);
+    })
+  }
+
   writeItemsToLocalStorage(items, offlineOnly, callback) {
     if(items.length == 0) {
       callback && callback();
@@ -38,7 +55,18 @@ class SyncManager {
       }
       return itemParams;
     })).then((params) => {
-      this.storageManager.saveModels(params, callback);
+      this.storageManager.saveModels(params, () => {
+        // on success
+        if(this.syncStatus.localError) {
+          this.syncStatus.localError = null;
+          this.syncStatusDidChange();
+        }
+        callback && callback();
+      }, (error) => {
+        // on error
+        this.syncStatus.localError = error;
+        this.syncStatusDidChange();
+      });
     })
   }