Moved syncDiagram to after setItem; ignore imageBase64 when saving item.

src/components/app.jsx

@@ -764,6 +764,10 @@ BookLibService.Borrow(id) {
 
 		console.log('on saving, ', this.state.currentItem);
 
+		itemService
+			.setItem(key || this.state.currentItem.id, this.state.currentItem)
+			.then(onSaveComplete.bind(this));
+
 		try {
 			const result = await syncDiagram(this.state.currentItem);
 			if(result) {
@@ -772,10 +776,6 @@ BookLibService.Borrow(id) {
 		} catch (e) {
 			console.error(e);
 		}
-
-		return itemService
-			.setItem(key || this.state.currentItem.id, this.state.currentItem)
-			.then(onSaveComplete.bind(this));
 	}
 
 	// Save current item to storage

src/itemService.js

@@ -74,6 +74,8 @@ if (window.zenumlDesktop) {
 		},
 
 		async setItem(id, item) {
+			// Saving imageBase64 in localStorage often cause errors due to size limit.
+			item.imageBase64 = undefined;
 			const d = deferred();
 			var remotePromise;
 			// TODO: check why we need to save locally always?

src/services/syncService.js

@@ -2,13 +2,14 @@ import firebase from 'firebase/app';
 
 async function syncDiagram(currentItem) {
 	if(location.host === 'localhost:8080') {
-		console.log('!! Skipping sync-diagram call in local environment');
+		console.log('Skipping sync-diagram call in local environment');
 		return;
 	}
 
 	const { id, title, js, imageBase64 } = currentItem;
 	if (!js || !title || !imageBase64) {
-		throw Error('Cannot sync diagram because of missing data');
+		console.error('Cannot sync diagram because of missing data', currentItem.js, currentItem.title, currentItem.imageBase64);
+		return;
 	}
 
 	const token = await firebase.auth().currentUser.getIdToken(true);