Android: Fixed resource loading issue, and improved logging on desktop

ElectronClient/app/gui/NoteText.jsx

@@ -671,6 +671,10 @@ class NoteTextComponent extends React.Component {
 
 			const newBody = shared.toggleCheckbox(msg, this.state.note.body);
 			this.saveOneProperty('body', newBody);
+		} else if (msg.indexOf('error:') === 0) {
+			const s = msg.split(':');
+			s.splice(0, 1);
+			reg.logger().error(s.join(':'));
 		} else if (msg === 'setMarkerCount') {
 			const ls = Object.assign({}, this.state.localSearch);
 			ls.resultCount = arg0;

ElectronClient/app/gui/note-viewer/index.html

@@ -38,11 +38,16 @@
 	<script src="./lib.js"></script>
 
 	<script>
+	const ipcProxySendToHost = (methodName, arg) => {
+		window.postMessage({ target: 'main', name: methodName, args: [ arg ] }, '*');
+	}
+
+	try {
 		const contentElement = document.getElementById('content');
 
 		const ipc = {};
 
-	window.addEventListener('message', (event) => {
+		window.addEventListener('message', webviewLib.logEnabledEventHandler(event => {
 			// Here we only deal with messages that are sent from the main Electro process to the webview.
 			if (!event.data || event.data.target !== 'webview') return;
 
@@ -54,7 +59,7 @@
 			} else {
 				ipc[callName](callData);
 			}
-	});
+		}));
 
 		const loadedCssFiles_ = {};
 		function loadCssFiles(cssFiles) {
@@ -246,11 +251,7 @@
 			document.getElementById('body').style.height = window.innerHeight + 'px';
 		}
 
-	const ipcProxySendToHost = (methodName, arg) => {
+		contentElement.addEventListener('scroll', webviewLib.logEnabledEventHandler(e => {
-		window.postMessage({ target: 'main', name: methodName, args: [ arg ] }, '*');
-	}
-
-	contentElement.addEventListener('scroll', function(e) {
 			if (ignoreNextScrollEvent) {
 				ignoreNextScrollEvent = false;
 				return;
@@ -260,9 +261,9 @@
 			setPercentScroll(percent);
 			
 			ipcProxySendToHost('percentScroll', percent);
-	});
+		}));
 
-	document.addEventListener('contextmenu', function(event) {
+		document.addEventListener('contextmenu', webviewLib.logEnabledEventHandler(event => {
 			let element = event.target;
 
 			// To handle right clicks on resource icons
@@ -288,7 +289,7 @@
 					});
 				}
 			}
-	});
+		}));
 
 		webviewLib.initialize({
 			postMessage: ipcProxySendToHost,
@@ -296,23 +297,27 @@
 
 		// Disable drag and drop otherwise it's possible to drop a URL
 		// on it and it will open in the view as a website.
-	document.addEventListener('drop', function(e) {
+		document.addEventListener('drop', webviewLib.logEnabledEventHandler(e => {
 			e.preventDefault();
 			e.stopPropagation();
-	});
+		}));
-	document.addEventListener('dragover', function(e) {
+		document.addEventListener('dragover', webviewLib.logEnabledEventHandler(e => {
 			e.preventDefault();
 			e.stopPropagation();
-	});
+		}));
-	document.addEventListener('dragover', function(e) {
+		document.addEventListener('dragover', webviewLib.logEnabledEventHandler(e => {
 			e.preventDefault();
-	});
+		}));
 
-	window.addEventListener('resize', function() {
+		window.addEventListener('resize', webviewLib.logEnabledEventHandler(() => {
 			updateBodyHeight();
-	});
+		}));
 
 		updateBodyHeight();
+	} catch (error) {
+		ipcProxySendToHost('error:' + JSON.stringify(webviewLib.cloneError(error)));
+		throw error;
+	}
 	</script>
 
 </body>

ReactNativeClient/lib/MdToHtml/utils.js

@@ -46,7 +46,12 @@ utils.errorImage = function() {
 }
 
 utils.loaderImage = function() {
-	return '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="16px" height="16px" viewBox="0 0 128 128" xml:space="preserve"><g><circle cx="16" cy="64" r="16" fill="#000000" fill-opacity="1"/><circle cx="16" cy="64" r="16" fill="#555555" fill-opacity="0.67" transform="rotate(45,64,64)"/><circle cx="16" cy="64" r="16" fill="#949494" fill-opacity="0.42" transform="rotate(90,64,64)"/><circle cx="16" cy="64" r="16" fill="#cccccc" fill-opacity="0.2" transform="rotate(135,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" fill-opacity="0.12" transform="rotate(180,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" fill-opacity="0.12" transform="rotate(225,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" fill-opacity="0.12" transform="rotate(270,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" fill-opacity="0.12" transform="rotate(315,64,64)"/><animateTransform attributeName="transform" type="rotate" values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64" calcMode="discrete" dur="720ms" repeatCount="indefinite"></animateTransform></g></svg>';
+	// https://github.com/ForkAwesome/Fork-Awesome/blob/master/src/icons/svg/hourglass-half.svg
+	return `
+		<svg width="1536" height="1790" xmlns="http://www.w3.org/2000/svg">
+    		<path d="M1408 128c0 370-177 638-373 768 196 130 373 398 373 768h96c18 0 32 14 32 32v64c0 18-14 32-32 32H32c-18 0-32-14-32-32v-64c0-18 14-32 32-32h96c0-370 177-638 373-768-196-130-373-398-373-768H32c-18 0-32-14-32-32V32C0 14 14 0 32 0h1472c18 0 32 14 32 32v64c0 18-14 32-32 32h-96zm-128 0H256c0 146 33 275 85 384h854c52-109 85-238 85-384zm-57 1216c-74-193-207-330-340-384H653c-133 54-266 191-340 384h910z"/>
+		</svg>
+	`;
 }
 
 utils.resourceStatusImage = function(state) {

ReactNativeClient/lib/MdToHtml/webviewLib.js

@@ -63,6 +63,24 @@ webviewLib.getParentAnchorElement = function(element) {
 	}
 }
 
+webviewLib.cloneError = function(error) {
+	return {
+		message: error.message,
+		stack: error.stack
+	};
+}
+
+webviewLib.logEnabledEventHandler = function(fn) {
+	return function(event) {
+		try {
+			return fn(event);
+		} catch (error) {
+			webviewLib.options_.postMessage('error:' + JSON.stringify(webviewLib.cloneError(error)));
+			throw error;
+		}
+	}
+}
+
 webviewLib.initialize = function(options) {
 	webviewLib.options_ = options;
 }

ReactNativeClient/lib/components/note-body-viewer.js

@@ -108,7 +108,7 @@ class NoteBodyViewer extends Component {
 
 		const injectedJs = [this.mdToHtml_.injectedJavaScript()];
 		injectedJs.push(shim.injectedJs('webviewLib'));
-		injectedJs.push('webviewLib.initialize({ postMessage: postMessage });');
+		injectedJs.push('webviewLib.initialize({ postMessage: msg => { return postMessage(msg); } });');
 		injectedJs.push(`
 			const readyStateCheckInterval = setInterval(function() {
 			    if (document.readyState === "complete") {
@@ -177,6 +177,8 @@ class NoteBodyViewer extends Component {
 					onMessage={(event) => {
 						let msg = event.nativeEvent.data;
 
+						console.info('Got IPC message: ', msg);
+
 						if (msg.indexOf('checkboxclick:') === 0) {
 							const newBody = shared.toggleCheckbox(msg, this.props.note.body);
 							if (this.props.onCheckboxChange) this.props.onCheckboxChange(newBody);