Error logging refactoring (#454)

* Create new logging methods on yomichan object

* Use new yomichan.logError instead of global logError

* Remove old logError

* Handle unhandledrejection events

* Add addEventListener stub

* Update log function

* Update error conversion to support more types

* Add log event

* Add API log function

* Log errors to the backend

* Make error/warning logs update the badge

* Clear log error indicator on extension button click

* Log correct URL on the background page

* Fix incorrect error conversion

* Remove unhandledrejection handling

Firefox doesn't support it properly.

* Remove unused argument type from log function

* Improve function name

* Change console.warn to yomichan.logWarning

* Move log forwarding initialization into main scripts

11 files changed, 63 insertions, 10 deletions

diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 693a9ad6..3c47b14e 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -78,6 +78,7 @@ class Backend {
         this._isPrepared = false;
         this._prepareError = false;
         this._badgePrepareDelayTimer = null;
+        this._logErrorLevel = null;
 
         this._messageHandlers = new Map([
             ['yomichanCoreReady', {handler: this._onApiYomichanCoreReady.bind(this), async: false}],
@@ -112,7 +113,9 @@ class Backend {
             ['getDictionaryInfo', {handler: this._onApiGetDictionaryInfo.bind(this), async: true}],
             ['getDictionaryCounts', {handler: this._onApiGetDictionaryCounts.bind(this), async: true}],
             ['purgeDatabase', {handler: this._onApiPurgeDatabase.bind(this), async: true}],
-            ['getMedia', {handler: this._onApiGetMedia.bind(this), async: true}]
+            ['getMedia', {handler: this._onApiGetMedia.bind(this), async: true}],
+            ['log', {handler: this._onApiLog.bind(this), async: false}],
+            ['logIndicatorClear', {handler: this._onApiLogIndicatorClear.bind(this), async: false}]
         ]);
 
         this._commandHandlers = new Map([
@@ -164,7 +167,7 @@ class Backend {
             this._isPrepared = true;
         } catch (e) {
             this._prepareError = true;
-            logError(e);
+            yomichan.logError(e);
             throw e;
         } finally {
             if (this._badgePrepareDelayTimer !== null) {
@@ -260,7 +263,7 @@ class Backend {
             this.options = JsonSchema.getValidValueOrDefault(this.optionsSchema, utilIsolate(options));
         } catch (e) {
             // This shouldn't happen, but catch errors just in case of bugs
-            logError(e);
+            yomichan.logError(e);
         }
     }
 
@@ -767,8 +770,34 @@ class Backend {
         return await this.database.getMedia(targets);
     }
 
+    _onApiLog({error, level, context}) {
+        yomichan.log(jsonToError(error), level, context);
+
+        const levelValue = this._getErrorLevelValue(level);
+        if (levelValue <= this._getErrorLevelValue(this._logErrorLevel)) { return; }
+
+        this._logErrorLevel = level;
+        this._updateBadge();
+    }
+
+    _onApiLogIndicatorClear() {
+        if (this._logErrorLevel === null) { return; }
+        this._logErrorLevel = null;
+        this._updateBadge();
+    }
+
     // Command handlers
 
+    _getErrorLevelValue(errorLevel) {
+        switch (errorLevel) {
+            case 'info': return 0;
+            case 'debug': return 0;
+            case 'warn': return 1;
+            case 'error': return 2;
+            default: return 0;
+        }
+    }
+
     async _onCommandSearch(params) {
         const {mode='existingOrNewTab', query} = params || {};
 
@@ -890,7 +919,20 @@ class Backend {
         let color = null;
         let status = null;
 
-        if (!this._isPrepared) {
+        if (this._logErrorLevel !== null) {
+            switch (this._logErrorLevel) {
+                case 'error':
+                    text = '!!';
+                    color = '#f04e4e';
+                    status = 'Error';
+                    break;
+                default: // 'warn'
+                    text = '!';
+                    color = '#f0ad4e';
+                    status = 'Warning';
+                    break;
+            }
+        } else if (!this._isPrepared) {
             if (this._prepareError) {
                 text = '!!';
                 color = '#f04e4e';
diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js
index e2086a96..dbba0272 100644
--- a/ext/bg/js/context-main.js
+++ b/ext/bg/js/context-main.js
@@ -17,7 +17,9 @@
 
 /* global
  * apiCommandExec
+ * apiForwardLogsToBackend
  * apiGetEnvironmentInfo
+ * apiLogIndicatorClear
  * apiOptionsGet
  */
 
@@ -52,8 +54,11 @@ function setupButtonEvents(selector, command, url) {
 }
 
 async function mainInner() {
+    apiForwardLogsToBackend();
     await yomichan.prepare();
 
+    await apiLogIndicatorClear();
+
     showExtensionInfo();
 
     apiGetEnvironmentInfo().then(({browser}) => {
diff --git a/ext/bg/js/database.js b/ext/bg/js/database.js
index 16612403..a94aa720 100644
--- a/ext/bg/js/database.js
+++ b/ext/bg/js/database.js
@@ -104,7 +104,7 @@ class Database {
             });
             return true;
         } catch (e) {
-            logError(e);
+            yomichan.logError(e);
             return false;
         }
     }
diff --git a/ext/bg/js/mecab.js b/ext/bg/js/mecab.js
index 597dceae..815ee860 100644
--- a/ext/bg/js/mecab.js
+++ b/ext/bg/js/mecab.js
@@ -24,7 +24,7 @@ class Mecab {
     }
 
     onError(error) {
-        logError(error, false);
+        yomichan.logError(error);
     }
 
     async checkVersion() {
diff --git a/ext/bg/js/search-main.js b/ext/bg/js/search-main.js
index 38b6d99a..5e4d7a20 100644
--- a/ext/bg/js/search-main.js
+++ b/ext/bg/js/search-main.js
@@ -17,6 +17,7 @@
 
 /* global
  * DisplaySearch
+ * apiForwardLogsToBackend
  * apiOptionsGet
  */
 
@@ -53,6 +54,7 @@ function injectSearchFrontend() {
 }
 
 (async () => {
+    apiForwardLogsToBackend();
     await yomichan.prepare();
 
     const displaySearch = new DisplaySearch();
diff --git a/ext/bg/js/search-query-parser.js b/ext/bg/js/search-query-parser.js
index eb3b681c..0001c9ff 100644
--- a/ext/bg/js/search-query-parser.js
+++ b/ext/bg/js/search-query-parser.js
@@ -45,7 +45,7 @@ class QueryParser extends TextScanner {
     }
 
     onError(error) {
-        logError(error, false);
+        yomichan.logError(error);
     }
 
     onClick(e) {
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index a5484fc3..cbd7b562 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -122,7 +122,7 @@ class DisplaySearch extends Display {
     }
 
     onError(error) {
-        logError(error, true);
+        yomichan.logError(error);
     }
 
     onSearchClear() {
diff --git a/ext/bg/js/settings/backup.js b/ext/bg/js/settings/backup.js
index bdfef658..faf4e592 100644
--- a/ext/bg/js/settings/backup.js
+++ b/ext/bg/js/settings/backup.js
@@ -133,7 +133,7 @@ async function _settingsImportSetOptionsFull(optionsFull) {
 }
 
 function _showSettingsImportError(error) {
-    logError(error);
+    yomichan.logError(error);
     document.querySelector('#settings-import-error-modal-message').textContent = `${error}`;
     $('#settings-import-error-modal').modal('show');
 }
diff --git a/ext/bg/js/settings/dictionaries.js b/ext/bg/js/settings/dictionaries.js
index 7eed4273..50add4c7 100644
--- a/ext/bg/js/settings/dictionaries.js
+++ b/ext/bg/js/settings/dictionaries.js
@@ -554,7 +554,7 @@ function dictionaryErrorsShow(errors) {
     if (errors !== null && errors.length > 0) {
         const uniqueErrors = new Map();
         for (let e of errors) {
-            logError(e);
+            yomichan.logError(e);
             e = dictionaryErrorToString(e);
             let count = uniqueErrors.get(e);
             if (typeof count === 'undefined') {
diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js
index 308e92eb..f03cc631 100644
--- a/ext/bg/js/settings/main.js
+++ b/ext/bg/js/settings/main.js
@@ -21,6 +21,7 @@
  * ankiInitialize
  * ankiTemplatesInitialize
  * ankiTemplatesUpdateValue
+ * apiForwardLogsToBackend
  * apiOptionsSave
  * appearanceInitialize
  * audioSettingsInitialize
@@ -284,6 +285,7 @@ function showExtensionInformation() {
 
 
 async function onReady() {
+    apiForwardLogsToBackend();
     await yomichan.prepare();
 
     showExtensionInformation();
diff --git a/ext/bg/js/settings/popup-preview-frame-main.js b/ext/bg/js/settings/popup-preview-frame-main.js
index 2ab6af6b..8228125f 100644
--- a/ext/bg/js/settings/popup-preview-frame-main.js
+++ b/ext/bg/js/settings/popup-preview-frame-main.js
@@ -17,8 +17,10 @@
 
 /* global
  * SettingsPopupPreview
+ * apiForwardLogsToBackend
  */
 
 (() => {
+    apiForwardLogsToBackend();
     new SettingsPopupPreview();
 })();