i18n locale loading fails for regional locales (e.g. de-DE)

[dev-cb]

When the application initializes, i18next attempts to load locale files based on the browser language (e.g. de-DE).

The backend only provides base language files (e.g. de.json, en.json), but not regional variants like de-DE.json.

As a result:

• GET /api/v1/locales/de-DE.json → 406 Not Acceptable
• Response body is empty (Content-Length: 0)
• The frontend does not handle this failure gracefully

This leads to a runtime error:

TypeError: Cannot read properties of null (reading 'data')

And finally React rendering fails during initialization.

Observed Behavior:
Despite valid fallback languages being loaded, the failed de-DE request causes the app to crash.

Expected Behavior:
The app should either

1. Normalize de-DE → de before requesting locale files, or
2. Gracefully fall back to de / en if a regional locale is not available

A failed locale request must not crash the application

Assumed root cause:
Frontend configuration uses:

load: 'currentOnly'

This forces i18next to load the exact locale (de-DE) instead of falling back to the base language (de).

Backend only supports base locales (de, en) and returns 406 for unsupported locales.

Additionally, the frontend does not defensively handle failed HTTP responses.

---

Besides that, I suggest to ensure that HTTP failures are handled safely.
Avoid assuming response shape (response.data) without validation.

[dev-cb]

Update: Root Cause Identified

The issue is caused by how the active language is set in combination with the i18next configuration.

Relevant Code

In app/javascript/App.jsx:

const { i18n } = useTranslation();

useEffect(() => {
  i18n.changeLanguage(currentUser?.language);
}, [currentUser?.language]);

At runtime:

currentUser.language === 'de-DE'
document.documentElement.lang === 'de-DE'

Problem

i18next is configured with:

load: 'currentOnly'

This causes i18next to request the exact locale:

/api/v1/locales/de-DE.json

However, the backend only provides base language files:

• /api/v1/locales/de.json ✅
• /api/v1/locales/en.json ✅
• /api/v1/locales/de-DE.json ❌ → 406 Not Acceptable

Result

• The request for de-DE.json fails with 406
• The response body is empty
• The frontend does not handle this failure correctly
• This leads to a runtime error:

TypeError: Cannot read properties of null (reading 'data')

• The application crashes during initial render

Important Observation

Even though fallback languages (de, en) are successfully loaded, the failed request for de-DE still breaks the initialization flow.

Root Cause Summary

• currentUser.language contains regional locale codes such as de-DE
• i18next is configured to load only the exact locale
• Backend supports language-only locales such as de and en
• No normalization or graceful fallback is applied before requesting the locale file

Proposed Fix

load: 'languageOnly'

This normalizes:

• de-DE → de
• en-US → en

Additional Recommendation

Ensure failed locale requests are handled safely and do not break app initialization.

Likely Regression Source

This behavior was likely introduced when switching to user/browser-driven language values, which now include regional locale codes such as de-DE.

[dev-cb]

This was not the actual reason for the app crash. But the improvements in #6258 are helpful anyways to fix the 404 error for the region locale.