Error-Handler: Ignore errors if the browser is outdated. Fixes #644

src/error-handler.js

@@ -37,8 +37,14 @@ function logError(event, debug_info = undefined) {
     console.groupEnd();
     /* eslint-enable no-console */
 }
-
-function primitiveErrorModal(enduser_message, github_issue_url, mailto_url) {
+/**
+ * Primitive error modal without any dependencies.
+ * @param {String[]} explanations Array of explanations to show to the user.
+ * @param {String | undefined} enduser_message Enduser-facing message from our exception.
+ * @param {String | undefined} github_issue_url URL to create a GitHub issue.
+ * @param {String | undefined} mailto_url prefilled mailto URL.
+ */
+function primitiveErrorModal(explanations, enduser_message, github_issue_url, mailto_url) {
     document.getElementById('error-modal')?.remove();
 
     const dismiss = () => document.getElementById('error-modal') && document.getElementById('error-modal').remove();
@@ -51,23 +57,33 @@ function primitiveErrorModal(enduser_message, github_issue_url, mailto_url) {
         }"></button>
 
         ${enduser_message ? '<p id="error-modal-enduser-message"></p>' : ''}
-        <p>${I18N_DEFINITION['error-handler']['explanation']}</p>
-        <p>${I18N_DEFINITION['error-handler']['privacy']}</p>
+        ${explanations.map((explanation) => `<p>${explanation}</p>`).join('\n')}
+        ${
+            github_issue_url
+                ? `
         <a id="error-modal-github-link" class="button button-small" style="margin-right: 10px;" target="_blank" rel="noopener noreferrer">
             ${I18N_DEFINITION['error-handler']['report-on-github']}
-        </a>
+        </a>`
+                : ''
+        } 
+        ${
+            mailto_url
+                ? `
         <a id="error-modal-email-link" class="button button-small">
             ${I18N_DEFINITION['error-handler']['report-via-email']}
         </a>
+        `
+                : ''
+        } 
     </div>
 </div>`;
 
     // Using innerHTML is a little naughty but it is fine here, since we don't include anything that could possibly be
     // attacker-controlled. All that content is later added safely.
     document.body.innerHTML += html;
     if (enduser_message) document.getElementById('error-modal-enduser-message').innerText = enduser_message;
-    document.getElementById('error-modal-github-link').href = github_issue_url;
-    document.getElementById('error-modal-email-link').href = mailto_url;
+    if (github_issue_url) document.getElementById('error-modal-github-link').href = github_issue_url;
+    if (mailto_url) document.getElementById('error-modal-email-link').href = mailto_url;
 
     document.querySelector('#error-modal .backdrop').onclick = dismiss;
     document.querySelector('#error-modal .close-button').onclick = dismiss;
@@ -82,6 +98,21 @@ const isNetworkError = (message) => {
     if (message === 'NetworkError when attempting to fetch resource.') return true;
     return false;
 };
+
+/**
+ * Heuristic to determine if the browser is too old. Uses somewhat recent language features to check if the browser is deprecated.
+ * @returns {boolean}
+ */
+const isBrowserDeprecated = () => {
+    try {
+        Object.fromEntries(new Map([['a', 'b']]));
+        [1, 2, 3, 4].findLast((x) => x > 0);
+    } catch (e) {
+        return true;
+    }
+    return false;
+};
+
 try {
     const handler = (event) => {
         try {
@@ -101,6 +132,13 @@ try {
                 return;
             }
 
+            if (isBrowserDeprecated()) {
+                // eslint-disable-next-line no-console
+                const explanation = I18N_DEFINITION['error-handler']['browser-too-old'];
+                primitiveErrorModal([explanation], event.error?.enduser_message);
+                return;
+            }
+
             if (event.error?.no_side_effects && isNetworkError(event.error.message)) {
                 if (!window.navigator.onLine) {
                     // seems like we don't have a network connection in the first place
@@ -187,7 +225,12 @@ try {
             const mailto_url = `mailto:[email protected]?subject=${report_title}&body=${email_body}`;
 
             if (!debug_info.error.code || debug_info.error.code <= 3) {
-                primitiveErrorModal(event.error?.enduser_message, github_issue_url, mailto_url);
+                primitiveErrorModal(
+                    [I18N_DEFINITION['error-handler']['explanation'], I18N_DEFINITION['error-handler']['privacy']],
+                    event.error?.enduser_message,
+                    github_issue_url,
+                    mailto_url
+                );
                 previous_github_report_body = github_body + encodeURIComponent('\n\n---\n\n');
                 previous_email_report_body = email_body + encodeURIComponent('\n\n---\n\n');
             }

src/i18n/de.json

@@ -526,7 +526,8 @@
         "explain-context": "Bitte gib uns wenn möglich ein bisschen Kontext für Deine Fehlermeldung. Beschreib also z. B., was Du getan hast, bevor der Fehler aufgetreten ist. Bitte entferne auch alle privaten Daten aus den Debuginformationen weiter unten.",
         "report-on-github": "Über GitHub melden",
         "report-via-email": "Per E-Mail melden",
-        "no-internet": "Es scheint so, als hättest Du gerade keine Internetverbindung."
+        "no-internet": "Es scheint so, als hättest Du gerade keine Internetverbindung.",
+        "browser-too-old": "Es ist ein Fehler aufgetreten, aber Dein Browser ist so alt dass wir ihn nicht unterstützen. Aktualisiere bitte Deinen Browser oder wechsel zu einem modernen."
     },
     "error-msg": {
         "company-not-found": "Das gewünschte Unternehmen wurde nicht gefunden.",

src/i18n/en.json

@@ -525,7 +525,8 @@
         "explain-context": "If applicable, please provide some context for the error, i.e. describe what you did before the error occurred. Please also remove any sensitive information from the debug information below.",
         "report-on-github": "Report on GitHub",
         "report-via-email": "Report via email",
-        "no-internet": "Seems like you don't have a working internet connection."
+        "no-internet": "Seems like you don't have a working internet connection.",
+        "browser-too-old": "An error occured, but you are running an unsupported browser. Please update your browser or switch to a modern one."
     },
     "error-msg": {
         "company-not-found": "The company you were looking for could not be found.",