Task/WP-505: APCD File Upload Failures Logging Request (#1013)

* Adding error messages to upload modal ui

* response text for 403

* remove logs and testing code

* additional testing reversal

* console log removal

* 500 errors for testing

* try catch for http and network errors

client/src/components/DataFiles/DataFilesModals/DataFilesUploadModalListing/DataFilesUploadModalListingTable.jsx

@@ -5,19 +5,25 @@ import { LoadingSpinner, InlineMessage, Button } from '_common';
 import { FileLengthCell } from '../../DataFilesListing/DataFilesListingCells';
 import { useUpload } from 'hooks/datafiles/mutations';
 import styles from './DataFilesUploadModalListingTable.module.scss';
+import { useSelector } from 'react-redux';
 
 const DataFilesUploadStatus = ({ i, removeCallback, rejectedFiles }) => {
   if (rejectedFiles.filter((f) => f.id === i).length > 0) {
     return <InlineMessage type="error">Exceeds File Size Limit</InlineMessage>;
   }
+  const errorMessage = useSelector((state) => state.files.error.message);
   const status = useUpload().status[i];
   switch (status) {
     case 'UPLOADING':
       return <LoadingSpinner placement="inline" />;
     case 'SUCCESS':
       return <span className="badge badge-success">SUCCESS</span>;
     case 'ERROR':
-      return <InlineMessage type="error">Upload Failed</InlineMessage>;
+      return (
+        <InlineMessage type="error">
+          Upload Failed: {errorMessage}
+        </InlineMessage>
+      );
     default:
       return (
         <Button type="link" onClick={() => removeCallback(i)}>

client/src/components/Submissions/Submissions.jsx

@@ -132,7 +132,7 @@ const Submissions = () => {
 
   const useSubmitterRole = () => {
     const query = useQuery({
-      queryKey: 'submitter-role',
+      queryKey: ['submitter-role'],
       queryFn: getSubmitterRole,
     });
     return query;

client/src/redux/reducers/datafiles.reducers.js

@@ -122,6 +122,7 @@ export const initialFilesState = {
   error: {
     FilesListing: false,
     modal: false,
+    message: '',
   },
   listing: {
     FilesListing: [],
@@ -331,6 +332,14 @@ export function files(state = initialFilesState, action) {
           [action.payload.section]: setValue,
         },
       };
+    case 'DATA_FILES_SET_ERROR':
+      return {
+        ...state,
+        error: {
+          ...state.error,
+          message: action.payload.message,
+        },
+      };
     case 'DATA_FILES_SET_LOADING':
       return {
         ...state,

client/src/redux/sagas/datafiles.sagas.js

@@ -485,16 +485,23 @@ export async function uploadFileUtil(api, scheme, system, path, file) {
     `/api/datafiles/${api}/upload/${scheme}/${system}/${apiPath}/`
   );
 
-  const request = await fetch(url, {
-    method: 'POST',
-    headers: { 'X-CSRFToken': Cookies.get('csrftoken') },
-    credentials: 'same-origin',
-    body: formData,
-  });
-  if (!request.ok) {
-    throw new Error(request.status);
+  try {
+    const request = await fetch(url, {
+      method: 'POST',
+      headers: { 'X-CSRFToken': Cookies.get('csrftoken') },
+      credentials: 'same-origin',
+      body: formData,
+    });
+    if (!request.ok) {
+      throw new Error(`HTTP error: ${request.status}`);
+    }
+    return request;
+  } catch (error) {
+    if (error instanceof TypeError) {
+      throw new Error('Network error: The file upload was blocked.');
+    }
+    throw error;
   }
-  return request;
 }
 
 export function* watchUpload() {
@@ -548,6 +555,10 @@ export function* uploadFile(api, scheme, system, path, file, index) {
       type: 'DATA_FILES_SET_OPERATION_STATUS_BY_KEY',
       payload: { status: 'ERROR', key: index, operation: 'upload' },
     });
+    yield put({
+      type: 'DATA_FILES_SET_ERROR',
+      payload: { message: e.toString() },
+    });
     return 'ERR';
   }
   return 'SUCCESS';