UI: Transloco configuration is missing a fallback language

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Do not escape object key in page title (aquarist-labs/s3gw#839).
+- Make sure a missing translation file does not crash the app (aquarist-labs/s3gw#846).
 
 ## [0.23.0]
 

src/frontend/src/app/i18n.helper.ts

@@ -43,12 +43,12 @@ export const supportedLanguages: Record<string, string> = {
 
 /**
  * Get the current configured language. If not set in local storage,
- * then try to get the default browser language. Finally fall back
+ * then try to get the default browser language. Finally, fall back
  * to the specified default language. Defaults to 'en_US'.
  */
 export const getCurrentLanguage = (defaultValue = defaultLanguage): string => {
   // Get the stored language from local storage.
-  let lang = localStorage.getItem('language');
+  let lang: string | null = localStorage.getItem('language');
   // If not set, try to detect the browser language.
   if (_.isNull(lang)) {
     if (_.isArray(navigator.languages)) {
@@ -60,7 +60,8 @@ export const getCurrentLanguage = (defaultValue = defaultLanguage): string => {
         .value();
     }
   }
-  return _.defaultTo(lang, defaultValue);
+  // Remove unwanted characters, e.g. `"en_US"` => `en_US`.
+  return _.trim(_.defaultTo(lang, defaultValue), '"');
 };
 
 export const setCurrentLanguage = (lang: string): void => {

src/frontend/src/app/transloco-root.module.ts

@@ -11,7 +11,8 @@ import {
   TranslocoModule
 } from '@ngneat/transloco';
 import * as _ from 'lodash';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { supportedLanguages } from '~/app/i18n.helper';
 import { environment } from '~/environments/environment';
@@ -21,7 +22,13 @@ class CustomLoader implements TranslocoLoader {
   constructor(private http: HttpClient) {}
 
   public getTranslation(lang: string): Observable<Translation> {
-    return this.http.get<Translation>(`assets/i18n/${lang}.json`);
+    return this.http.get<Translation>(`assets/i18n/${lang}.json`).pipe(
+      catchError((err) => {
+        // Return an empty translation list. In this way, Transloco will
+        // not translate anything, but it will not fail either.
+        return of({});
+      })
+    );
   }
 }