fix: add proper error message when session expired

Author: Bentroen

web/src/lib/axios/token.utils.ts

@@ -8,7 +8,16 @@ export const getTokenLocal = (): string | never => {
     ?.split('=')[1];
 
   // TODO: should be changed to a redirect to the login page?
-  if (!token) throw new Error('Failed to get token');
+  if (!token) throw new InvalidTokenError('Token not found');
 
   return token;
 };
+
+export class InvalidTokenError extends Error {
+  constructor(msg: string) {
+    super(msg);
+
+    // Set the prototype explicitly.
+    Object.setPrototypeOf(this, InvalidTokenError.prototype);
+  }
+}

web/src/modules/song-upload/components/client/context/UploadSong.context.tsx

@@ -15,7 +15,10 @@ import {
 import { toast } from 'react-hot-toast';
 
 import axiosInstance from '@web/src/lib/axios';
-import { getTokenLocal } from '@web/src/lib/axios/token.utils';
+import {
+  InvalidTokenError,
+  getTokenLocal,
+} from '@web/src/lib/axios/token.utils';
 
 import {
   UploadSongForm,
@@ -146,9 +149,15 @@ export const UploadSongProvider = ({
     } catch (e) {
       console.error('Error submitting song', e);
 
-      setSendError(
-        'An unknown error occurred while submitting the song! Please contact us.',
-      );
+      if (e instanceof InvalidTokenError) {
+        setSendError(
+          'Your session has expired! Please sign in again and try to submit the song.',
+        );
+      } else {
+        setSendError(
+          'An unknown error occurred while submitting the song! Please contact us.',
+        );
+      }
     } finally {
       setIsSubmitting(false);
     }