Fall back to untranslated string rather than showing missing translation error

src/languageHandler.tsx

@@ -90,6 +90,22 @@ const translateWithFallback = (text: string, options?: object): { translated?: s
     const translated = counterpart.translate(text, { ...options, fallbackLocale: counterpart.getLocale() });
     if (!translated || /^missing translation:/.test(translated)) {
         const fallbackTranslated = counterpart.translate(text, { ...options, locale: FALLBACK_LOCALE });
+        if (!fallbackTranslated || /^missing translation:/.test(translated) && process.env.NODE_ENV !== "development") {
+            // Even the translation via FALLBACK_LOCALE failed; this can happen if
+            //
+            // 1. The string isn't in the translations dictionary, usually because you're in develop
+            // and haven't run yarn i18n
+            // 2. Loading the translation resources over the network failed, which can happen due to
+            // to network or if the client tried to load a translation that's been removed from the
+            // server.
+            //
+            // At this point, its the lesser evil to show the untranslated text, which
+            // will be in English, so the user can still make out *something*, rather than an opaque
+            // "missing translation" error.
+            //
+            // Don't do this in develop so people remember to run yarn i18n.
+            return { translated: text, isFallback: true };
+        }
         return { translated: fallbackTranslated, isFallback: true };
     }
     return { translated };

test/i18n-test/languageHandler-test.tsx

@@ -11,6 +11,10 @@ import {
 import { stubClient } from '../test-utils';
 
 describe('languageHandler', function() {
+    /*
+      See /__mocks__/browser-request.js/ for how we are stubbing out translations
+      to provide fixture data for these tests
+     */
     const basicString = 'Rooms';
     const selfClosingTagSub = 'Accept <policyLink /> to continue:';
     const textInTagSub = '<a>Upgrade</a> to your own domain';
@@ -19,6 +23,7 @@ describe('languageHandler', function() {
 
     type TestCase = [string, string, Record<string, unknown>, Record<string, unknown>, TranslatedString];
     const testCasesEn: TestCase[] = [
+        // description of the test case, translationString, variables, tags, expected result
         ['translates a basic string', basicString, {}, undefined, 'Rooms'],
         [
             'handles plurals when count is 0',
@@ -201,4 +206,17 @@ describe('languageHandler', function() {
             });
         });
     });
+
+    describe('when languages dont load', () => {
+        it('_t', async () => {
+            const STRING_NOT_IN_THE_DICTIONARY = "a string that isn't in the translations dictionary";
+            expect(_t(STRING_NOT_IN_THE_DICTIONARY, {}, undefined)).toEqual(STRING_NOT_IN_THE_DICTIONARY);
+        });
+
+        it('_tDom', async () => {
+            const STRING_NOT_IN_THE_DICTIONARY = "a string that isn't in the translations dictionary";
+            expect(_t(STRING_NOT_IN_THE_DICTIONARY, {}, undefined)).toEqual(
+                <span lang="en">{ STRING_NOT_IN_THE_DICTIONARY }</span>);
+        });
+    });
 });