Fix error handling

src/auth/authSlice.ts

@@ -1,5 +1,6 @@
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import Config from '../config';
+import { AuthError } from '../errors';
 import history from '../history';
 import type { RootState } from '../redux/store';
 import Storage from '../storage';
@@ -225,12 +226,12 @@ export const fetchUser = createAsyncThunk<void, { uuid: string } | undefined>('a
     const url = `${Config.API_URL}${Config.routes.user.user}/${uuid}`;
     const data = await fetchService(url, 'GET', 'json', {
       requiresAuthorization: true,
-      onFailCallback: () => dispatch(logoutUser()),
     });
 
     dispatch(setUser(data.user));
   } catch (error) {
     // TODO: Dispatch error message.
+    if (error instanceof AuthError) dispatch(logoutUser());
   }
 });
 
@@ -243,9 +244,9 @@ export const withLogout = <T extends AsyncFunction>(fn: T, type: string) =>
   createAsyncThunk<Awaited<ReturnType<T>>, Parameters<T>[0]>(type, async (args, { dispatch }) => {
     try {
       return await fn(args);
-    } catch (err) {
-      dispatch(logoutUser());
-      throw err;
+    } catch (error) {
+      if (error instanceof AuthError) dispatch(logoutUser());
+      throw error;
     }
   });
 

src/errors.ts

@@ -0,0 +1,24 @@
+// seems reasonable to put all errors in this file
+/* eslint-disable max-classes-per-file */
+
+export class UserError extends Error {
+  public message: string;
+
+  constructor(message: string) {
+    super();
+
+    Object.setPrototypeOf(this, UserError.prototype);
+    this.message = message;
+  }
+}
+
+export class AuthError extends Error {
+  public message: string;
+
+  constructor(message: string) {
+    super();
+
+    Object.setPrototypeOf(this, AuthError.prototype);
+    this.message = message;
+  }
+}

src/event/eventSlice.ts

@@ -1,6 +1,7 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { isEqual } from 'lodash';
 import { fetchUser, logoutUser, withLogout } from '../auth/authSlice';
+import { AuthError } from '../errors';
 import type { RootState } from '../redux/store';
 import * as utils from './utils';
 
@@ -39,7 +40,7 @@ export const checkIn = createAsyncThunk<any, any>('event/checkIn', async (info,
     dispatch(fetchFutureEvents());
     return data;
   } catch (error) {
-    dispatch(logoutUser());
+    if (error instanceof AuthError) dispatch(logoutUser());
     throw error;
   }
 });

src/event/utils.ts

@@ -57,7 +57,7 @@ export const checkIn = async (info) => {
     return data.event;
   } catch (error) {
     notify('Unable to checkin!', getErrorMessage(error));
-    throw new Error(getErrorMessage(error));
+    throw error;
   }
 };
 

src/leaderboard/leaderboardSlice.ts

@@ -1,5 +1,6 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { logoutUser } from '../auth/authSlice';
+import { AuthError } from '../errors';
 import type { RootState } from '../redux/store';
 import { PublicProfile } from '../types';
 import { getDefaultProfile } from '../utils';
@@ -23,7 +24,7 @@ export const fetchLeaderboard = createAsyncThunk<
     const data = await utils.fetchLeaderboard(args.offset, args.limit, args.from, args.to);
     return data;
   } catch (error) {
-    dispatch(logoutUser());
+    if (error instanceof AuthError) dispatch(logoutUser());
     throw error;
   }
 });

src/leaderboard/utils.ts

@@ -9,7 +9,5 @@ export const fetchLeaderboard = async (offset: number = 0, limit: number, from?:
     requiresAuthorization: true,
   });
 
-  if (!data) throw new Error('Empty response from server');
-  if (data.error) throw new Error(data.error.message);
   return data.leaderboard as PublicProfile[];
 };

src/profile/profileSlice.ts

@@ -1,5 +1,6 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { logoutUser, withLogout } from '../auth/authSlice';
+import { AuthError } from '../errors';
 import * as utils from './utils';
 
 const initialState = {
@@ -11,7 +12,7 @@ export const updateProfile = createAsyncThunk('utils/updateProfile', async (valu
   try {
     await utils.updateProfile(values);
   } catch (error) {
-    dispatch(logoutUser());
+    if (error instanceof AuthError) dispatch(logoutUser());
   }
 });
 

src/types.ts

@@ -11,7 +11,6 @@ export type MimeType = 'json' | 'image';
 export type FetchServiceOptions = {
   requiresAuthorization: boolean;
   payload?: any;
-  onFailCallback?: () => void;
 };
 
 export enum UserAccessType {

src/utils.tsx

@@ -3,6 +3,7 @@ import { showNotification } from '@mantine/notifications';
 import Storage from './storage';
 import DiamondDisplay from './store/components/DiamondDisplay';
 import { FetchServiceOptions, HttpRequestMethod, MimeType, OrderStatus, PublicMerchItemOption } from './types';
+import { AuthError, UserError } from './errors';
 
 export const notify = (title: string, description: string) => {
   showNotification({
@@ -159,7 +160,7 @@ const getServiceErrorMessage = (error) => {
  * Fetches data from server with simple error handling
  */
 export const fetchService = async (url: string, requestMethod: HttpRequestMethod, mimeType: MimeType, options: FetchServiceOptions) => {
-  const { payload, requiresAuthorization, onFailCallback } = options;
+  const { payload, requiresAuthorization } = options;
 
   let Accept;
   let ContentType;
@@ -187,9 +188,9 @@ export const fetchService = async (url: string, requestMethod: HttpRequestMethod
   });
 
   const { status } = response;
-  if (status === 401 || status === 403) onFailCallback?.();
+  if (status === 401 || status === 403) throw new AuthError('');
   const data = await response.json();
-  if (!data) throw new Error('Empty response from server');
+  if (!data) throw new AuthError('Empty response from server');
   if (data.error) {
     let { message } = data.error;
     if (status === 400 && data.error.errors) {
@@ -200,7 +201,7 @@ export const fetchService = async (url: string, requestMethod: HttpRequestMethod
       }
       message = messages;
     }
-    throw new Error(message);
+    throw new UserError(message);
   }
 
   return data;