fix: improve error handling in song loading process

- Refactored song loading logic in SongEditForm and EditSongProvider to use async/await for better readability and error management.
- Added comprehensive error handling to provide user feedback for various failure scenarios during song loading.
- Ensured consistent handling of song data and instrument settings upon loading.

Author: tomast1337

apps/frontend/src/modules/song-edit/components/client/SongEditForm.tsx

@@ -26,8 +26,17 @@ export const SongEditForm = ({
   ) as useEditSongProviderType;
 
   useEffect(() => {
-    loadSong(songId, username, songData);
-    setSongId(songId);
+    const loadSongData = async () => {
+      try {
+        await loadSong(songId, username, songData);
+        setSongId(songId);
+      } catch (error) {
+        // Error is already handled in loadSong with setSendError and toaster
+        console.error('Failed to load song:', error);
+      }
+    };
+
+    loadSongData();
   }, [loadSong, setSongId, songData, songId, username]);
   // TODO: The username is injected into the form differently in SongUploadForm (defaultAuthorName) and SongEditForm (username). This should be consistent
 

apps/frontend/src/modules/song-edit/components/client/context/EditSong.context.tsx

@@ -236,25 +236,51 @@ export const EditSongProvider = ({
       // fetch song
       const token = getTokenLocal();
 
-      const songFile = (
-        await axiosInstance.get(`/song/${id}/download`, {
-          params: {
-            src: 'edit',
-          },
-          responseType: 'arraybuffer',
-          headers: { authorization: `Bearer ${token}` },
-        })
-      ).data as ArrayBuffer;
-
-      // convert to song
-      const song = await parseSongFromBuffer(songFile);
-
-      // set instruments array
-      const songInstruments = songData.customInstruments;
-      setInstrumentSounds(songInstruments);
-      formMethods.setValue('customInstruments', songInstruments);
-
-      setSong(song as unknown as SongFileType); // TODO: Investigate this weird type error
+      try {
+        const songFile = (
+          await axiosInstance.get(`/song/${id}/download`, {
+            params: {
+              src: 'edit',
+            },
+            responseType: 'arraybuffer',
+            headers: { authorization: `Bearer ${token}` },
+          })
+        ).data as ArrayBuffer;
+
+        // convert to song
+        const song = await parseSongFromBuffer(songFile);
+
+        // set instruments array
+        const songInstruments = songData.customInstruments;
+        setInstrumentSounds(songInstruments);
+        formMethods.setValue('customInstruments', songInstruments);
+
+        setSong(song as unknown as SongFileType); // TODO: Investigate this weird type error
+      } catch (error: any) {
+        console.error('Error loading song', error);
+
+        let errorMessage = 'An unknown error occurred while loading the song!';
+
+        if (error.response) {
+          // Server responded with an error status
+          errorMessage =
+            error.response.data.message ||
+            Object.values(error.response.data.error || {})[0] ||
+            `Failed to load song: ${error.response.status}`;
+        } else if (error.request) {
+          console.error('Error loading song', error);
+          // Request was made but no response received (network error)
+          errorMessage =
+            'Network error: Unable to connect to the server. Please check your internet connection and try again.';
+        } else {
+          // Something else happened
+          errorMessage = error.message || errorMessage;
+        }
+
+        setSendError(errorMessage);
+        toaster.error(errorMessage);
+        throw error; // Re-throw to allow caller to handle if needed
+      }
     },
     [formMethods, setSong],
   );