diff --git a/src/error-handler.js b/src/error-handler.js index 869ac03af..b925f6d2e 100644 --- a/src/error-handler.js +++ b/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,14 +57,24 @@ function primitiveErrorModal(enduser_message, github_issue_url, mailto_url) { }"> ${enduser_message ? '
' : ''} -${I18N_DEFINITION['error-handler']['explanation']}
-${I18N_DEFINITION['error-handler']['privacy']}
+ ${explanations.map((explanation) => `${explanation}
`).join('\n')} + ${ + github_issue_url + ? ` ${I18N_DEFINITION['error-handler']['report-on-github']} - + ` + : '' + } + ${ + mailto_url + ? ` ${I18N_DEFINITION['error-handler']['report-via-email']} + ` + : '' + } `; @@ -66,8 +82,8 @@ function primitiveErrorModal(enduser_message, github_issue_url, mailto_url) { // 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:dev@datenanfragen.de?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'); } diff --git a/src/i18n/de.json b/src/i18n/de.json index 3274e93a0..618e99abc 100644 --- a/src/i18n/de.json +++ b/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.", diff --git a/src/i18n/en.json b/src/i18n/en.json index 2ffd135bf..5ff67279e 100644 --- a/src/i18n/en.json +++ b/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.",