Add an issues page with information about some errors (#2163)

2 files changed, 21 insertions, 2 deletions

diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js
index c0f286f8..cff8a586 100644
--- a/ext/js/background/backend.js
+++ b/ext/js/background/backend.js
@@ -1909,7 +1909,10 @@ class Backend {
                         // The message logged to the console looks like this:
                         //  Access to fetch at '<URL>' from origin 'chrome-extension://<ID>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
                         const result = new Error('Audio download failed due to possible extension permissions error');
-                        result.data = {errors};
+                        result.data = {
+                            errors,
+                            referenceUrl: '/issues.html'
+                        };
                         return result;
                     }
                 }
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 3fabdbb0..95080e27 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -220,7 +220,23 @@ class DisplayGenerator {
         for (const error of errors) {
             const div = document.createElement('li');
             div.className = 'anki-note-error-message';
-            this._setTextContent(div, isObject(error) && typeof error.message === 'string' ? error.message : `${error}`);
+            let message = isObject(error) && typeof error.message === 'string' ? error.message : `${error}`;
+            let link = null;
+            if (isObject(error) && isObject(error.data)) {
+                const {referenceUrl} = error.data;
+                if (typeof referenceUrl === 'string') {
+                    message = message.trimEnd();
+                    if (!/[.!?]^/.test()) { message += '.'; }
+                    message += ' ';
+                    link = document.createElement('a');
+                    link.href = referenceUrl;
+                    link.target = '_blank';
+                    link.rel = 'noreferrer noopener';
+                    link.textContent = 'More info';
+                }
+            }
+            this._setTextContent(div, message);
+            if (link !== null) { div.appendChild(link); }
             list.appendChild(div);
         }