Refactor error handling to use TranslationKeyError instead of TranslationPathError across multiple components and utilities. Update related types and functions for consistency.

drminh2807 · drminh2807 · commit 8f595d7c963c · 2025-07-17T10:55:05.000+07:00
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
@@ -7,10 +7,10 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {isReceiptError, isTranslationPathError} from '@libs/ErrorUtils';
+import {isReceiptError, isTranslationKeyError} from '@libs/ErrorUtils';
 import fileDownload from '@libs/fileDownload';
 import handleRetryPress from '@libs/ReceiptUploadRetryHandler';
-import type {TranslationPathError} from '@src/languages/types';
+import type {TranslationKeyError} from '@src/languages/types';
 import type {ReceiptError} from '@src/types/onyx/Transaction';
 import ConfirmModal from './ConfirmModal';
 import Icon from './Icon';
@@ -26,7 +26,7 @@ type DotIndicatorMessageProps = {
      *      timestamp: 'message',
      *  }
      */
-    messages: Record<string, string | ReceiptError | TranslationPathError | ReactElement | null>;
+    messages: Record<string, string | ReceiptError | TranslationKeyError | ReactElement | null>;
 
     /** The type of message, 'error' shows a red dot, 'success' shows a green dot */
     type: 'error' | 'success';
@@ -110,7 +110,7 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles, dismissErr
                 key={index}
                 style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), textStyles]}
             >
-                {isTranslationPathError(message) ? translate(message.translationPath) : message}
+                {isTranslationKeyError(message) ? translate(message.translationKey) : message}
             </Text>
         );
     };
diff --git a/src/components/ErrorMessageRow.tsx b/src/components/ErrorMessageRow.tsx
@@ -1,15 +1,15 @@
 import mapValues from 'lodash/mapValues';
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
-import type {TranslationPathError, TranslationPathErrors} from '@src/languages/types';
+import type {TranslationKeyError, TranslationKeyErrors} from '@src/languages/types';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type {ReceiptError, ReceiptErrors} from '@src/types/onyx/Transaction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import MessagesRow from './MessagesRow';
 
 type ErrorMessageRowProps = {
     /** The errors to display  */
-    errors?: OnyxCommon.Errors | ReceiptErrors | TranslationPathErrors | null;
+    errors?: OnyxCommon.Errors | ReceiptErrors | TranslationKeyErrors | null;
 
     /** Additional style object for the error row */
     errorRowStyles?: StyleProp<ViewStyle>;
@@ -27,7 +27,7 @@ type ErrorMessageRowProps = {
 function ErrorMessageRow({errors, errorRowStyles, onClose, canDismissError = true, dismissError}: ErrorMessageRowProps) {
     // Some errors have a null message. This is used to apply opacity only and to avoid showing redundant messages.
     const errorEntries = Object.entries(errors ?? {});
-    const filteredErrorEntries = errorEntries.filter((errorEntry): errorEntry is [string, string | ReceiptError | TranslationPathError] => errorEntry[1] !== null);
+    const filteredErrorEntries = errorEntries.filter((errorEntry): errorEntry is [string, string | ReceiptError | TranslationKeyError] => errorEntry[1] !== null);
     const errorMessages = mapValues(Object.fromEntries(filteredErrorEntries), (error) => error);
     const hasErrorMessages = !isEmptyObject(errorMessages);
 
diff --git a/src/components/MessagesRow.tsx b/src/components/MessagesRow.tsx
@@ -7,7 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {ReceiptError} from '@src/types/onyx/Transaction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type { TranslationPathError } from '@src/languages/types';
+import type { TranslationKeyError } from '@src/languages/types';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -16,7 +16,7 @@ import Tooltip from './Tooltip';
 
 type MessagesRowProps = {
     /** The messages to display */
-    messages: Record<string, string | ReceiptError | TranslationPathError>;
+    messages: Record<string, string | ReceiptError | TranslationKeyError>;
 
     /** The type of message, 'error' shows a red dot, 'success' shows a green dot */
     type: 'error' | 'success';
diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
@@ -12,7 +12,7 @@ import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type {ReceiptErrors} from '@src/types/onyx/Transaction';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type { TranslationPathErrors } from '@src/languages/types';
+import type { TranslationKeyErrors } from '@src/languages/types';
 import CustomStylesForChildrenProvider from './CustomStylesForChildrenProvider';
 import ErrorMessageRow from './ErrorMessageRow';
 import ImageSVG from './ImageSVG';
@@ -31,7 +31,7 @@ type OfflineWithFeedbackProps = ChildrenProps & {
     shouldHideOnDelete?: boolean;
 
     /** The errors to display  */
-    errors?: OnyxCommon.Errors | ReceiptErrors | TranslationPathErrors | null;
+    errors?: OnyxCommon.Errors | ReceiptErrors | TranslationKeyErrors | null;
 
     /** Whether we should show the error messages */
     shouldShowErrorMessages?: boolean;
diff --git a/src/languages/types.ts b/src/languages/types.ts
@@ -76,11 +76,11 @@ type DefaultTranslation = typeof en;
  */
 type TranslationPaths = FlattenObject<DefaultTranslation>;
 
-type TranslationPathError = {
-    translationPath: TranslationPaths
+type TranslationKeyError = {
+    translationKey: TranslationPaths
 }
 
-type TranslationPathErrors = Record<string, TranslationPathError>;
+type TranslationKeyErrors = Record<string, TranslationKeyError>;
 /**
  * Flattened default translation object with its values
  */
@@ -99,4 +99,4 @@ type TranslationParameters<TKey extends TranslationPaths> = FlatTranslationsObje
         : Args
     : never[];
 
-export type {TranslationDeepObject, TranslationPaths, PluralForm, FlatTranslationsObject, TranslationParameters, TranslationPathError, TranslationPathErrors};
+export type {TranslationDeepObject, TranslationPaths, PluralForm, FlatTranslationsObject, TranslationParameters, TranslationKeyError, TranslationKeyErrors};
diff --git a/src/libs/ErrorUtils.ts b/src/libs/ErrorUtils.ts
@@ -1,12 +1,12 @@
 import mapValues from 'lodash/mapValues';
 import type {OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
-import type {TranslationPathError, TranslationPathErrors, TranslationPaths} from '@src/languages/types';
+import type {TranslationKeyError, TranslationKeyErrors, TranslationPaths} from '@src/languages/types';
 import type {ErrorFields, Errors} from '@src/types/onyx/OnyxCommon';
 import type Response from '@src/types/onyx/Response';
 import type {ReceiptError} from '@src/types/onyx/Transaction';
 import DateUtils from './DateUtils';
-import * as Localize from './Localize';
+import {translateLocal} from './Localize';
 
 function getAuthenticateErrorMessage(response: Response): TranslationPaths {
     switch (response.jsonCode) {
@@ -42,11 +42,15 @@ function getAuthenticateErrorMessage(response: Response): TranslationPaths {
  * @param error - The translation key for the error message.
  */
 function getMicroSecondOnyxErrorWithTranslationKey(error: TranslationPaths, errorKey?: number): Errors {
-    return {[errorKey ?? DateUtils.getMicroseconds()]: Localize.translateLocal(error)};
+    return {[errorKey ?? DateUtils.getMicroseconds()]: translateLocal(error)};
 }
 
-function getMicroSecondTranslationErrorWithTranslationKey(error: TranslationPaths, errorKey?: number): TranslationPathErrors {
-    return {[errorKey ?? DateUtils.getMicroseconds()]: {translationPath: error}};
+/**
+ * Creates an error object with a timestamp (in microseconds) as the key and the translation key as the value.
+ * @param translationKey - The translation key for the error message.
+ */
+function getMicroSecondTranslationErrorWithTranslationKey(translationKey: TranslationPaths, errorKey?: number): TranslationKeyErrors {
+    return {[errorKey ?? DateUtils.getMicroseconds()]: {translationKey}};
 }
 
 /**
@@ -201,17 +205,20 @@ function isReceiptError(message: unknown): message is ReceiptError {
     return ((message as Record<string, unknown>)?.error ?? '') === CONST.IOU.RECEIPT_ERROR;
 }
 
-function isTranslationPathError(message: unknown): message is TranslationPathError {
+/**
+ * Check if the error includes a translation key.
+ */
+function isTranslationKeyError(message: unknown): message is TranslationKeyError {
     if (typeof message === 'string') {
         return false;
     }
     if (Array.isArray(message)) {
         return false;
     }
-    if (Object.keys(message as Record<string, unknown>).length === 0) {
+    if (Object.keys(message as Record<string, unknown>).length !== 1) {
         return false;
     }
-    return (message as Record<string, unknown>)?.translationPath !== undefined;
+    return (message as Record<string, unknown>)?.translationKey !== undefined;
 }
 
 export {
@@ -229,7 +236,7 @@ export {
     getMicroSecondOnyxErrorWithMessage,
     getMicroSecondOnyxErrorObject,
     isReceiptError,
-    isTranslationPathError,
+    isTranslationKeyError,
     getMicroSecondTranslationErrorWithTranslationKey,
 };
 
diff --git a/tests/unit/ErrorUtilsTest.ts b/tests/unit/ErrorUtilsTest.ts
@@ -1,6 +1,10 @@
 import * as ErrorUtils from '@src/libs/ErrorUtils';
+import DateUtils from '@src/libs/DateUtils';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 
+// Mock DateUtils
+jest.mock('@src/libs/DateUtils');
+
 describe('ErrorUtils', () => {
     test('should add a new error message for a given inputID', () => {
         const errors: Errors = {};
@@ -62,4 +66,88 @@ describe('ErrorUtils', () => {
             username: 'Username cannot be empty\nUsername must be at least 6 characters long\nUsername must contain at least one letter\nUsername must not contain special characters',
         });
     });
+
+    describe('getMicroSecondTranslationErrorWithTranslationKey', () => {
+        beforeEach(() => {
+            jest.clearAllMocks();
+        });
+
+        test('should create an error object with microsecond timestamp and translation key', () => {
+            const mockMicroseconds = 1234567890123;
+            (DateUtils.getMicroseconds as jest.Mock).mockReturnValue(mockMicroseconds);
+
+            const result = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.incorrectLoginOrPassword');
+
+            expect(result).toEqual({
+                [mockMicroseconds]: {translationKey: 'passwordForm.error.incorrectLoginOrPassword'},
+            });
+            expect(DateUtils.getMicroseconds).toHaveBeenCalledTimes(1);
+        });
+
+        test('should use provided errorKey instead of generating microsecond timestamp', () => {
+            const customErrorKey = 9876543210;
+            const result = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.fallback', customErrorKey);
+
+            expect(result).toEqual({
+                [customErrorKey]: {translationKey: 'passwordForm.error.fallback'},
+            });
+            expect(DateUtils.getMicroseconds).not.toHaveBeenCalled();
+        });
+
+        test('should handle different translation keys', () => {
+            const mockMicroseconds = 1111111111111;
+            (DateUtils.getMicroseconds as jest.Mock).mockReturnValue(mockMicroseconds);
+
+            const result = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.incorrectLoginOrPassword');
+
+            expect(result).toEqual({
+                [mockMicroseconds]: {translationKey: 'passwordForm.error.incorrectLoginOrPassword'},
+            });
+        });
+    });
+
+    describe('isTranslationKeyError', () => {
+        test('should return false for string messages', () => {
+            expect(ErrorUtils.isTranslationKeyError('This is a string error')).toBe(false);
+            expect(ErrorUtils.isTranslationKeyError('')).toBe(false);
+        });
+
+        test('should return false for array messages', () => {
+            expect(ErrorUtils.isTranslationKeyError(['error1', 'error2'])).toBe(false);
+            expect(ErrorUtils.isTranslationKeyError([])).toBe(false);
+        });
+
+        test('should return false for empty objects', () => {
+            expect(ErrorUtils.isTranslationKeyError({})).toBe(false);
+        });
+
+        test('should return false for objects with multiple keys', () => {
+            expect(ErrorUtils.isTranslationKeyError({
+                translationKey: 'passwordForm.error.fallback',
+                extraKey: 'extra',
+            })).toBe(false);
+        });
+
+        test('should return false for objects without translationKey property', () => {
+            expect(ErrorUtils.isTranslationKeyError({error: 'generic error'})).toBe(false);
+            expect(ErrorUtils.isTranslationKeyError({message: 'error message'})).toBe(false);
+        });
+
+        test('should return true for valid TranslationKeyError objects', () => {
+            expect(ErrorUtils.isTranslationKeyError({translationKey: 'passwordForm.error.fallback'})).toBe(true);
+            expect(ErrorUtils.isTranslationKeyError({translationKey: 'passwordForm.error.incorrectLoginOrPassword'})).toBe(true);
+            expect(ErrorUtils.isTranslationKeyError({translationKey: 'session.offlineMessageRetry'})).toBe(true);
+        });
+
+        test('should return false for null and undefined', () => {
+            expect(ErrorUtils.isTranslationKeyError(null)).toBe(false);
+            expect(ErrorUtils.isTranslationKeyError(undefined)).toBe(false);
+        });
+
+        test('should return false for primitive types', () => {
+            expect(ErrorUtils.isTranslationKeyError(123)).toBe(false);
+            expect(ErrorUtils.isTranslationKeyError(true)).toBe(false);
+            expect(ErrorUtils.isTranslationKeyError(false)).toBe(false);
+        });
+    });
 });
