[PB-5849] feature/Enhance error handling and display user friendly messages

.github/workflows/unit-tests.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.20.4]
+        node-version: [20]
       fail-fast: true
 
     steps:

src/components/modals/AddModal/index.tsx

@@ -543,9 +543,10 @@ function AddModal(): JSX.Element {
               })
               .catch((err) => {
                 logger.error('Error on handleUploadFromCameraRoll function:', JSON.stringify(err));
+                const error = errorService.castError(err, 'upload');
                 notificationsService.show({
                   type: NotificationType.Error,
-                  text1: strings.formatString(strings.errors.uploadFile, err.message) as string,
+                  text1: error.message,
                 });
               })
               .finally(() => {
@@ -638,9 +639,10 @@ function AddModal(): JSX.Element {
             })
             .catch((err) => {
               logger.error('Error on handleUploadFromCameraRoll (Android):', JSON.stringify(err));
+              const error = errorService.castError(err, 'upload');
               notificationsService.show({
                 type: NotificationType.Error,
-                text1: strings.formatString(strings.errors.uploadFile, err.message) as string,
+                text1: error.message,
               });
             })
             .finally(() => {

src/contexts/Drive/Drive.context.tsx

@@ -8,7 +8,9 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import appService from '@internxt-mobile/services/AppService';
 import errorService from '@internxt-mobile/services/ErrorService';
+import notificationsService from '@internxt-mobile/services/NotificationsService';
 import { AppStateStatus, NativeEventSubscription } from 'react-native';
+import { NotificationType } from '@internxt-mobile/types/index';
 
 import { driveFolderService } from '@internxt-mobile/services/drive/folder';
 import { mapFileWithIsFolder, mapFolderWithIsFolder } from 'src/helpers/driveItemMappers';
@@ -87,7 +89,13 @@ export const DriveContextProvider: React.FC<DriveContextProviderProps> = ({ chil
   const handleAppStateChange = (state: AppStateStatus) => {
     if (state === 'active' && currentFolderId.current) {
       loadFolderContent(currentFolderId.current, { pullFrom: ['network'], resetPagination: true }).catch((error) => {
+        // TODO: Refactor to custom hook (useDriveWithNotifications) to separate notification concerns from context
         errorService.reportError(error);
+        const err = errorService.castError(error, 'content');
+        notificationsService.show({
+          type: NotificationType.Error,
+          text1: err.message,
+        });
       });
     }
   };
@@ -115,7 +123,13 @@ export const DriveContextProvider: React.FC<DriveContextProviderProps> = ({ chil
     setDriveFoldersTree({ [rootFolderId]: ROOT_FOLDER_NODE });
     loadFolderContent(rootFolderId, { pullFrom: ['network'], resetPagination: true, focusFolder: true }).catch(
       (err) => {
+        // TODO: Refactor to custom hook (useDriveWithNotifications) to separate notification concerns from context
         errorService.reportError(err);
+        const error = errorService.castError(err, 'content');
+        notificationsService.show({
+          type: NotificationType.Error,
+          text1: error.message,
+        });
       },
     );
   }, [rootFolderId]);

src/screens/drive/DriveFolderScreen/DriveFolderScreen.tsx

@@ -99,6 +99,12 @@ export function DriveFolderScreen({ navigation }: DriveScreenProps<'DriveFolder'
         })
         .catch((error) => {
           logger.error('Error loading folder content in DriveFolderScreen:', error);
+          errorService.reportError(error);
+          const err = errorService.castError(error, 'content');
+          notificationsService.show({
+            type: NotificationType.Error,
+            text1: err.message,
+          });
         });
     }
   }, [folderUuid]);
@@ -109,7 +115,14 @@ export function DriveFolderScreen({ navigation }: DriveScreenProps<'DriveFolder'
     if (parentUuid) {
       driveCtx
         .loadFolderContent(parentUuid, { pullFrom: ['network'], resetPagination: false, focusFolder: true })
-        .catch(errorService.reportError);
+        .catch((error) => {
+          errorService.reportError(error);
+          const err = errorService.castError(error, 'content');
+          notificationsService.show({
+            type: NotificationType.Error,
+            text1: err.message,
+          });
+        });
     }
   };
 
@@ -193,7 +206,14 @@ export function DriveFolderScreen({ navigation }: DriveScreenProps<'DriveFolder'
       );
       handleOnFilePress(driveItem);
     } else if (driveItem.data.uuid) {
-      driveCtx.loadFolderContent(driveItem.data.uuid, { focusFolder: true, resetPagination: true });
+      driveCtx.loadFolderContent(driveItem.data.uuid, { focusFolder: true, resetPagination: true }).catch((error) => {
+        errorService.reportError(error);
+        const err = errorService.castError(error, 'content');
+        notificationsService.show({
+          type: NotificationType.Error,
+          text1: err.message,
+        });
+      });
 
       // Navigate to the folder, this is the minimal data
       navigation.push('DriveFolder', {
@@ -277,6 +297,11 @@ export function DriveFolderScreen({ navigation }: DriveScreenProps<'DriveFolder'
       });
     } catch (error) {
       errorService.reportError(error);
+      const err = errorService.castError(error, 'content');
+      notificationsService.show({
+        type: NotificationType.Error,
+        text1: err.message,
+      });
     } finally {
       setLoadingMore(false);
     }
@@ -296,11 +321,20 @@ export function DriveFolderScreen({ navigation }: DriveScreenProps<'DriveFolder'
   }, [driveSortedItems, searchValue]);
 
   async function handleRefresh() {
-    await driveCtx.loadFolderContent(folderUuid, {
-      focusFolder: true,
-      pullFrom: ['network'],
-      resetPagination: true,
-    });
+    try {
+      await driveCtx.loadFolderContent(folderUuid, {
+        focusFolder: true,
+        pullFrom: ['network'],
+        resetPagination: true,
+      });
+    } catch (error) {
+      errorService.reportError(error);
+      const err = errorService.castError(error, 'content');
+      notificationsService.show({
+        type: NotificationType.Error,
+        text1: err.message,
+      });
+    }
   }
 
   return (