Add support for logging Anki errors on the settings page (#2073)

ext/js/comm/anki.js

@@ -183,7 +183,7 @@ class AnkiConnect {
             });
         } catch (e) {
             const error = new Error('Anki connection failure');
-            error.data = {action, params};
+            error.data = {action, params, originalError: e};
             throw error;
         }
 
@@ -200,7 +200,7 @@ class AnkiConnect {
             result = JSON.parse(responseText);
         } catch (e) {
             const error = new Error('Invalid Anki response');
-            error.data = {action, params, status: response.status, responseText};
+            error.data = {action, params, status: response.status, responseText, originalError: e};
             throw error;
         }
 

ext/js/pages/settings/anki-controller.js

@@ -43,6 +43,7 @@ class AnkiController {
         this._ankiErrorMessageDetailsToggle = null;
         this._ankiErrorInvalidResponseInfo = null;
         this._ankiCardPrimary = null;
+        this._ankiError = null;
         this._validateFieldsToken = null;
     }
 
@@ -70,6 +71,8 @@ class AnkiController {
             input.addEventListener('change', this._onAnkiCardPrimaryTypeRadioChange.bind(this), false);
         }
 
+        document.querySelector('#anki-error-log').addEventListener('click', this._onAnkiErrorLogLinkClick.bind(this));
+
         const options = await this._settingsController.getOptions();
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
         this._onOptionsChanged({options});
@@ -184,6 +187,11 @@ class AnkiController {
         this._setAnkiCardPrimaryType(node.dataset.value, node.dataset.ankiCardMenu);
     }
 
+    _onAnkiErrorLogLinkClick() {
+        if (this._ankiError === null) { return; }
+        console.log({error: this._ankiError});
+    }
+
     _setAnkiCardPrimaryType(ankiCardType, ankiCardMenu) {
         if (this._ankiCardPrimary === null) { return; }
         this._ankiCardPrimary.dataset.ankiCardType = ankiCardType;
@@ -296,9 +304,12 @@ class AnkiController {
         this._ankiErrorMessageNode.textContent = (this._ankiConnect.enabled ? 'Connected' : 'Not enabled');
         this._ankiErrorMessageNode.classList.remove('danger-text');
         this._ankiErrorMessageDetailsNode.textContent = '';
+        this._ankiError = null;
     }
 
     _showAnkiError(error) {
+        this._ankiError = error;
+
         let errorString = typeof error === 'object' && error !== null ? error.message : null;
         if (!errorString) { errorString = `${error}`; }
         if (!/[.!?]$/.test(errorString)) { errorString += '.'; }

ext/settings.html

@@ -1569,6 +1569,9 @@
                 </div>
             </div>
             <div class="settings-item-children" id="anki-error-message-details-container" hidden>
+                <p>
+                    <a tabindex="0" id="anki-error-log">Log error to console</a>
+                </p>
                 <p class="danger-text" id="anki-error-invalid-response-info" hidden>
                     Attempting to connect to Anki can sometimes return an error message which includes "Invalid response",
                     which may indicate that the value of the <em>AnkiConnect server address</em> option is incorrect.