Merge pull request #5209 from matrix-org/t3chguy/fix/12591

Retry loading i18n language if it fails

__mocks__/browser-request.js

@@ -1,5 +1,10 @@
 const en = require("../src/i18n/strings/en_EN");
+const de = require("../src/i18n/strings/de_DE");
 
+// Mock the browser-request for the languageHandler tests to return
+// Fake languages.json containing references to en_EN and de_DE
+// en_EN.json
+// de_DE.json
 module.exports = jest.fn((opts, cb) => {
     const url = opts.url || opts.uri;
     if (url && url.endsWith("languages.json")) {
@@ -8,9 +13,15 @@ module.exports = jest.fn((opts, cb) => {
                 "fileName": "en_EN.json",
                 "label": "English",
             },
+            "de": {
+                "fileName": "de_DE.json",
+                "label": "German",
+            },
         }));
     } else if (url && url.endsWith("en_EN.json")) {
         cb(undefined, {status: 200}, JSON.stringify(en));
+    } else if (url && url.endsWith("de_DE.json")) {
+        cb(undefined, {status: 200}, JSON.stringify(de));
     } else {
         cb(true, {status: 404}, "");
     }

src/languageHandler.tsx

@@ -27,6 +27,7 @@ import PlatformPeg from "./PlatformPeg";
 // @ts-ignore - $webapp is a webpack resolve alias pointing to the output directory, see webpack config
 import webpackLangJsonUrl from "$webapp/i18n/languages.json";
 import { SettingLevel } from "./settings/SettingLevel";
+import {retry} from "./utils/promise";
 
 const i18nFolder = 'i18n/';
 
@@ -327,7 +328,7 @@ export function setLanguage(preferredLangs: string | string[]) {
             console.error("Unable to find an appropriate language");
         }
 
-        return getLanguage(i18nFolder + availLangs[langToUse].fileName);
+        return getLanguageRetry(i18nFolder + availLangs[langToUse].fileName);
     }).then((langData) => {
         counterpart.registerTranslations(langToUse, langData);
         counterpart.setLocale(langToUse);
@@ -336,7 +337,7 @@ export function setLanguage(preferredLangs: string | string[]) {
 
         // Set 'en' as fallback language:
         if (langToUse !== "en") {
-            return getLanguage(i18nFolder + availLangs['en'].fileName);
+            return getLanguageRetry(i18nFolder + availLangs['en'].fileName);
         }
     }).then((langData) => {
         if (langData) counterpart.registerTranslations('en', langData);
@@ -482,7 +483,15 @@ function weblateToCounterpart(inTrs: object): object {
     return outTrs;
 }
 
-function getLanguage(langPath: string): object {
+async function getLanguageRetry(langPath: string, num = 3): Promise<object> {
+    return retry(() => getLanguage(langPath), num, e => {
+        console.log("Failed to load i18n", langPath);
+        console.error(e);
+        return true; // always retry
+    });
+}
+
+function getLanguage(langPath: string): Promise<object> {
     return new Promise((resolve, reject) => {
         request(
             { method: "GET", url: langPath },

test/i18n-test/languageHandler-test.js

@@ -12,11 +12,11 @@ describe('languageHandler', function() {
         languageHandler.setMissingEntryGenerator(key => key.split("|", 2)[1]);
     });
 
-    it('translates a string to german', function() {
+    it('translates a string to german', function(done) {
         languageHandler.setLanguage('de').then(function() {
             const translated = languageHandler._t('Rooms');
             expect(translated).toBe('Räume');
-        });
+        }).then(done);
     });
 
     it('handles plurals', function() {