The archive from kstroevsky

archive's People

Contributors

Watchers

archive's Issues

axios error handling

I did some research and I can propose you next solution:

At first add this types to your project. If something isn't clear for you, we'll discuss about this on meeting.

import axios, { AxiosError } from 'axios';

interface IErrorBase<T> {
   error: Error | AxiosError<T>;
   type: 'axios-error' | 'stock-error';
}

interface IAxiosError<T> extends IErrorBase<T> {
   error: AxiosError<T>;
   type: 'axios-error';
}
interface IStockError<T> extends IErrorBase<T> {
   error: Error;
   type: 'stock-error';
}

Next you should add error handler like this:

export function axiosErrorHandler<T>(
   callback: (err: IAxiosError<T> | IStockError<T>) => void
) {
   return (error: Error | AxiosError<T>) => {
      if (axios.isAxiosError(error)) {
         callback({
            error: error,
            type: 'axios-error'
         });
      } else {
         callback({
            error: error,
            type: 'stock-error'
         });
      }
   };
}

const getErrorWithStatus:IErrorWithStatus = (error) => {
  error.status = +error.message.slice(-3);
  return error;
};

export const getError =
  ({ error, cb, operationType }: IGetError) =>
  (dispatch: AppDispatch) => {
    const operation = createAsyncThunk(
      operationType,
      async (_, { rejectWithValue }) => {
        const { status, message } = getErrorWithStatus(error);
        if (status === 401) {
          authOperations.refreshToken(cb);
        }
        return rejectWithValue({ status, message });
      }
    );
    dispatch(operation());
  };

And, finally, you should use this handler in all axios catch cases. I.e.:

.catch((error: Error | AxiosError) {
  if (axios.isAxiosError(error))  {
    // Access to config, request, and response
  } else {
    // Just a stock error
  }
  
  getError({
          error,
          cb: () => changeSprintsTitle(),
          cb: () => changeSprintsTitle(sprintId),
          operationType: "sprint/changeTitle",
        })
      );
      return rejectWithValue(error.message);
})

You can get more details here: reference: axios/axios#3612

Recommend Projects