Fix RangeError from HTTP quality values in navigator.languages
What does this MR do and why?
Fixes a RangeError: Invalid language tag: en;q=0.9 thrown by Intl.DateTimeFormat when navigator.languages contains HTTP Accept-Language quality values (e.g. en;q=0.9) instead of plain BCP 47 language tags.
The getPreferredLocales() function in locale/index.js passes navigator.languages entries directly to Intl.DateTimeFormat. The spec says navigator.languages should contain BCP 47 tags, but some browser environments (observed in Chrome 145) include quality-value suffixes like ;q=0.9. These are not valid BCP 47 and cause Intl.DateTimeFormat to throw a RangeError, breaking date formatting across all pages — most visibly in time_ago_tooltip.vue tooltips.
The fix strips everything from the first semicolon in each locale string before using it, converting en;q=0.9 to en and en-US;q=1.0 to en-US.
Closes https://gitlab.com/gitlab-org/gitlab/-/work_items/625056
References
- Sentry issue: https://new-sentry.gitlab.net/organizations/gitlab/issues/3696539/
- MDN
navigator.languages: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/languages
Screenshots or screen recordings
N/A — logic-only fix, no UI change.
How to set up and validate locally
- Open browser DevTools console on any GitLab page with a
TimeAgoTooltip(e.g. any issue list). - Override
navigator.languagesto include quality values:Object.defineProperty(navigator, 'languages', { get: () => ['en;q=0.9'] }); - Hover over a relative timestamp — before this fix a
RangeErroris thrown; after the fix the tooltip renders correctly.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.