Merge pull request Expensify#91114 from Expensify/fix/graceful-currency-code-handling

Gracefully handle malformed currency codes instead of crashing

Author: mountiny

src/components/CurrencyListContextProvider/index.tsx

@@ -1,7 +1,7 @@
 import React, {createContext, useCallback, useContext, useMemo} from 'react';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
-import {convertToFrontendAmountAsInteger} from '@libs/CurrencyUtils';
+import {convertToFrontendAmountAsInteger, sanitizeCurrencyCode} from '@libs/CurrencyUtils';
 import {format, formatToParts} from '@libs/NumberFormatUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -34,15 +34,12 @@ function CurrencyListContextProvider({children}: React.PropsWithChildren) {
 
     const convertToDisplayString = useCallback(
         (amountInCents: number | undefined, currencyCode: string | undefined): string => {
-            const decimals = getCurrencyDecimals(currencyCode);
+            const sanitizedCurrency = sanitizeCurrencyCode(currencyCode);
+            const decimals = getCurrencyDecimals(sanitizedCurrency);
             const convertedAmount = convertToFrontendAmountAsInteger(amountInCents ?? 0, decimals);
-            let currencyWithFallback = currencyCode;
-            if (!currencyCode) {
-                currencyWithFallback = CONST.CURRENCY.USD;
-            }
             return format(preferredLocale, convertedAmount, {
                 style: 'currency',
-                currency: currencyWithFallback,
+                currency: sanitizedCurrency,
 
                 // We are forcing the number of decimals because we override the default number of decimals in the backend for some currencies
                 // See: https://github.com/Expensify/PHP-Libs/pull/834
@@ -56,11 +53,12 @@ function CurrencyListContextProvider({children}: React.PropsWithChildren) {
 
     const convertToDisplayStringWithoutCurrency = useCallback(
         (amountInCents: number, currencyCode: string = CONST.CURRENCY.USD): string => {
-            const decimals = getCurrencyDecimals(currencyCode);
+            const sanitizedCurrency = sanitizeCurrencyCode(currencyCode);
+            const decimals = getCurrencyDecimals(sanitizedCurrency);
             const convertedAmount = convertToFrontendAmountAsInteger(amountInCents, decimals);
             return formatToParts(preferredLocale, convertedAmount, {
                 style: 'currency',
-                currency: currencyCode,
+                currency: sanitizedCurrency,
 
                 // We are forcing the number of decimals because we override the default number of decimals in the backend for some currencies
                 // See: https://github.com/Expensify/PHP-Libs/pull/834

src/components/Search/SearchChartView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import useLocalize from '@hooks/useLocalize';
-import {getCurrencySymbol} from '@libs/CurrencyUtils';
+import {getCurrencySymbol, sanitizeCurrencyCode} from '@libs/CurrencyUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import {formatToParts} from '@libs/NumberFormatUtils';
@@ -71,7 +71,7 @@ function SearchChartView({queryJSON, view, groupBy, data, isLoading}: SearchChar
     };
 
     const firstItem = data.at(0);
-    const currency = firstItem?.currency ?? 'USD';
+    const currency = sanitizeCurrencyCode(firstItem?.currency ?? CONST.CURRENCY.USD);
     const parts = formatToParts(preferredLocale, 0, {style: 'currency', currency});
     const currencyIndex = parts.findIndex((p) => p.type === 'currency');
     const integerIndex = parts.findIndex((p) => p.type === 'integer');

src/components/TransactionItemRow/DataCells/TotalCell.tsx

@@ -8,7 +8,7 @@ import {useCurrencyListActions} from '@hooks/useCurrencyList';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {convertToBackendAmount, convertToFrontendAmountAsString, getCurrencyDecimals} from '@libs/CurrencyUtils';
+import {convertToBackendAmount, convertToFrontendAmountAsString, getCurrencyDecimals, sanitizeCurrencyCode} from '@libs/CurrencyUtils';
 import {formatToParts} from '@libs/NumberFormatUtils';
 import {parseFloatAnyLocale, roundToTwoDecimalPlaces} from '@libs/NumberUtils';
 import {getTransactionDetails, isInvoiceReport, shouldEnableNegative} from '@libs/ReportUtils';
@@ -121,10 +121,11 @@ function TotalCell({shouldShowTooltip, transactionItem, canEdit, onSave, report,
     // Some currencies display with a space between symbol and amount (e.g., "CZK 100.00") in convertToDisplayString (in preview).
     // We detect this spacing and apply matching padding to the input to prevent visual flicker when entering edit mode.
     // See: https://github.com/Expensify/App/pull/83127#issuecomment-4240055145
+    const sanitizedCurrency = sanitizeCurrencyCode(currency);
     const hasSymbolSpaceInPreview = formatToParts(preferredLocale, 0, {
         style: 'currency',
-        currency,
-        minimumFractionDigits: getCurrencyDecimals(currency),
+        currency: sanitizedCurrency,
+        minimumFractionDigits: getCurrencyDecimals(sanitizedCurrency),
         maximumFractionDigits: CONST.DEFAULT_CURRENCY_DECIMALS,
     }).some((part) => part.type === 'literal' && part.value.trim() === '');
 

src/libs/CurrencyUtils.ts

@@ -4,6 +4,7 @@ import IntlStore from '@src/languages/IntlStore';
 import type {OnyxValues} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Locale} from '@src/types/onyx';
+import Log from './Log';
 import {format, formatToParts} from './NumberFormatUtils';
 
 let currencyList: OnyxValues[typeof ONYXKEYS.CURRENCY_LIST] = {};
@@ -19,6 +20,46 @@ Onyx.connect({
     },
 });
 
+/**
+ * Returns true when the provided value is a syntactically valid ISO 4217 currency code
+ * (exactly 3 uppercase ASCII letters).
+ */
+function isValidCurrencyCode(currencyCode: unknown): currencyCode is string {
+    return typeof currencyCode === 'string' && /^[A-Z]{3}$/.test(currencyCode);
+}
+
+// Tracks invalid currency codes already warned about so the same bad value doesn't spam the log on every render.
+const warnedInvalidCurrencyCodes = new Set<string>();
+
+/**
+ * Test-only: clears the in-memory de-dup of malformed currency codes so tests asserting on `Log.warn`
+ * are not affected by warnings emitted by earlier tests. Production code should not call this.
+ */
+function resetInvalidCurrencyWarningsForTesting() {
+    warnedInvalidCurrencyCodes.clear();
+}
+
+/**
+ * Validates a currency code and returns it unchanged if it is a valid ISO 4217 code.
+ * Whitespace and case-only variations (e.g. " usd ") are normalized rather than discarded.
+ * Returns CONST.CURRENCY.USD and logs a warning at most once per unique malformed value, to prevent Intl.NumberFormat
+ * from throwing a RangeError. See https://github.com/Expensify/App/issues/91113
+ */
+function sanitizeCurrencyCode(currencyCode: unknown): string {
+    if (isValidCurrencyCode(currencyCode)) {
+        return currencyCode;
+    }
+    const normalized = typeof currencyCode === 'string' ? currencyCode.trim().toUpperCase() : '';
+    if (isValidCurrencyCode(normalized)) {
+        return normalized;
+    }
+    if (!warnedInvalidCurrencyCodes.has(normalized)) {
+        warnedInvalidCurrencyCodes.add(normalized);
+        Log.warn('CurrencyUtils: invalid currency code, defaulting to USD', {currencyCode});
+    }
+    return CONST.CURRENCY.USD;
+}
+
 /**
  * Returns the number of digits after the decimal separator for a specific currency.
  * For currencies that have decimal places > 2, floor to 2 instead:
@@ -47,7 +88,7 @@ function getCurrencyUnit(currency: string = CONST.CURRENCY.USD): number {
 function getLocalizedCurrencySymbol(locale: Locale | undefined, currencyCode: string): string | undefined {
     const parts = formatToParts(locale, 0, {
         style: 'currency',
-        currency: currencyCode,
+        currency: sanitizeCurrencyCode(currencyCode),
     });
     return parts.find((part) => part.type === 'currency')?.value;
 }
@@ -97,15 +138,9 @@ function convertToFrontendAmountAsString(amountAsInt: number | null | undefined,
  * @param currency - IOU currency
  */
 function convertToDisplayString(amountInCents = 0, currency: string = CONST.CURRENCY.USD, shouldUseLocalCurrencySymbol = false): string {
-    const decimals = getCurrencyDecimals(currency);
+    const currencyWithFallback = sanitizeCurrencyCode(currency);
+    const decimals = getCurrencyDecimals(currencyWithFallback);
     const convertedAmount = convertToFrontendAmountAsInteger(amountInCents, decimals);
-    /**
-     * Fallback currency to USD if it empty string or undefined
-     */
-    let currencyWithFallback = currency;
-    if (!currency) {
-        currencyWithFallback = CONST.CURRENCY.USD;
-    }
 
     if (shouldUseLocalCurrencySymbol) {
         const currencySymbol = getCurrencySymbol(currencyWithFallback);
@@ -153,7 +188,7 @@ function convertToShortDisplayString(amountInCents = 0, currency: string = CONST
 
     return format(IntlStore.getCurrentLocale(), convertedAmount, {
         style: 'currency',
-        currency,
+        currency: sanitizeCurrencyCode(currency),
 
         // There will be no decimals displayed (e.g. $9)
         minimumFractionDigits: 0,
@@ -171,7 +206,7 @@ function convertAmountToDisplayString(amount = 0, currency: string = CONST.CURRE
     const convertedAmount = amount / 100.0;
     return format(IntlStore.getCurrentLocale(), convertedAmount, {
         style: 'currency',
-        currency,
+        currency: sanitizeCurrencyCode(currency),
         minimumFractionDigits: CONST.MIN_TAX_RATE_DECIMAL_PLACES,
         maximumFractionDigits: CONST.MAX_TAX_RATE_DECIMAL_PLACES,
     });
@@ -181,11 +216,12 @@ function convertAmountToDisplayString(amount = 0, currency: string = CONST.CURRE
  * Acts the same as `convertAmountToDisplayString` but the result string does not contain currency
  */
 function convertToDisplayStringWithoutCurrency(amountInCents: number, currency: string = CONST.CURRENCY.USD) {
-    const decimals = getCurrencyDecimals(currency);
+    const sanitizedCurrency = sanitizeCurrencyCode(currency);
+    const decimals = getCurrencyDecimals(sanitizedCurrency);
     const convertedAmount = convertToFrontendAmountAsInteger(amountInCents, decimals);
     return formatToParts(IntlStore.getCurrentLocale(), convertedAmount, {
         style: 'currency',
-        currency,
+        currency: sanitizedCurrency,
 
         // We are forcing the number of decimals because we override the default number of decimals in the backend for some currencies
         // See: https://github.com/Expensify/PHP-Libs/pull/834
@@ -200,6 +236,9 @@ function convertToDisplayStringWithoutCurrency(amountInCents: number, currency:
 }
 
 export {
+    isValidCurrencyCode,
+    sanitizeCurrencyCode,
+    resetInvalidCurrencyWarningsForTesting,
     getCurrencyDecimals,
     getCurrencyUnit,
     getLocalizedCurrencySymbol,

src/libs/Formula.ts

@@ -4,7 +4,7 @@ import type {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import type {PersonalDetails, Policy, PolicyReportField, Report, Transaction} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import {convertToDisplayString, convertToDisplayStringWithoutCurrency} from './CurrencyUtils';
+import {convertToDisplayString, convertToDisplayStringWithoutCurrency, isValidCurrencyCode} from './CurrencyUtils';
 import formatDate from './FormulaDatetime';
 import getBase62ReportID from './getBase62ReportID';
 import Log from './Log';
@@ -567,24 +567,34 @@ function formatAmount(amount: number | undefined, currency: string | undefined,
     const absoluteAmount = Math.abs(amount);
 
     try {
+        const trimmedCurrency = currency?.trim().toUpperCase();
         const trimmedDisplayCurrency = displayCurrency?.trim().toUpperCase();
         if (trimmedDisplayCurrency) {
             if (trimmedDisplayCurrency === 'NOSYMBOL') {
-                return convertToDisplayStringWithoutCurrency(absoluteAmount, currency);
+                return convertToDisplayStringWithoutCurrency(absoluteAmount, trimmedCurrency);
             }
 
             // If a currency conversion is needed (displayCurrency differs from the source),
             // return null so the backend can compute it.
             // We can only compute the value optimistically when the amount is 0.
-            if (absoluteAmount !== 0 && currency !== trimmedDisplayCurrency) {
+            if (absoluteAmount !== 0 && trimmedCurrency !== trimmedDisplayCurrency) {
                 return null;
             }
 
+            // Return empty string for an unrecognized display currency so the placeholder is preserved upstream.
+            if (!isValidCurrencyCode(trimmedDisplayCurrency)) {
+                return '';
+            }
+
             return convertToDisplayString(absoluteAmount, trimmedDisplayCurrency);
         }
 
-        if (currency) {
-            return convertToDisplayString(absoluteAmount, currency, true);
+        if (trimmedCurrency) {
+            // Return empty string for an unrecognized source currency so the placeholder is preserved upstream.
+            if (!isValidCurrencyCode(trimmedCurrency)) {
+                return '';
+            }
+            return convertToDisplayString(absoluteAmount, trimmedCurrency, true);
         }
 
         return convertToDisplayStringWithoutCurrency(absoluteAmount, currency);

src/libs/NumberFormatUtils/index.ts

@@ -1,4 +1,5 @@
 import intlPolyfill from '@libs/IntlPolyfill';
+import Log from '@libs/Log';
 import memoize from '@libs/memoize';
 import CONST from '@src/CONST';
 import type Locale from '@src/types/onyx/Locale';
@@ -8,12 +9,45 @@ intlPolyfill();
 
 const MemoizedNumberFormat = memoize(Intl.NumberFormat, {maxSize: 10, monitoringName: 'NumberFormatUtils'});
 
+// Tracks malformed currency codes that have already produced a warning in this module, so the
+// safety-net log doesn't fire on every render for the same bad value.
+const warnedMalformedCurrencies = new Set<string>();
+
+/**
+ * Build an Intl.NumberFormat. If construction throws a RangeError due to a malformed currency
+ * code (Intl rejects empty strings and non-ISO-4217 codes), fall back to USD instead of letting
+ * the error crash the screen. We check `'currency' in options` rather than `options.currency`
+ * truthiness so an empty-string currency still triggers the fallback.
+ */
+function createFormatter(locale: Locale | undefined, options?: Intl.NumberFormatOptions): Intl.NumberFormat {
+    try {
+        return new MemoizedNumberFormat(locale ?? CONST.LOCALES.DEFAULT, options);
+    } catch (e) {
+        if (e instanceof RangeError && options && 'currency' in options) {
+            const currency = String(options.currency ?? '');
+            if (!warnedMalformedCurrencies.has(currency)) {
+                warnedMalformedCurrencies.add(currency);
+                Log.warn('NumberFormatUtils: malformed currency code, falling back to USD', {currency: options.currency});
+            }
+            return new MemoizedNumberFormat(locale ?? CONST.LOCALES.DEFAULT, {...options, currency: CONST.CURRENCY.USD});
+        }
+        throw e;
+    }
+}
+
 function format(locale: Locale | undefined, number: number, options?: Intl.NumberFormatOptions): string {
-    return new MemoizedNumberFormat(locale ?? CONST.LOCALES.DEFAULT, options).format(number);
+    return createFormatter(locale, options).format(number);
 }
 
 function formatToParts(locale: Locale | undefined, number: number, options?: Intl.NumberFormatOptions): Intl.NumberFormatPart[] {
-    return new MemoizedNumberFormat(locale ?? CONST.LOCALES.DEFAULT, options).formatToParts(number);
+    return createFormatter(locale, options).formatToParts(number);
+}
+
+/**
+ * Test-only: clears the malformed-currency deduplication so warn-assertion tests don't pollute each other.
+ */
+function resetMalformedCurrenciesForTesting() {
+    warnedMalformedCurrencies.clear();
 }
 
-export {format, formatToParts};
+export {format, formatToParts, resetMalformedCurrenciesForTesting};