Handling Errors with Custom Axios and redux-saga - reactjs

Question

I have the following pipeline in my React App
saga.js :
function* handleGetTrack(action: ReturnType<typeof selectTrack>) {
try {
const getTrackResponse = yield httpGetTrack(action.payload)
yield console.log(getTrackResponse)
getTrackResponse.status === 200
? yield put(trackSelected(getTrackResponse.data))
: yield put(selectTrackError('Track Not Found (Get)'))
} catch (err) {
if (err instanceof Error && err.stack) {
yield put(selectTrackError(err.stack))
} else {
yield put(selectTrackError('An unknown error occured.'))
}
}
}
Api.js
export function httpGetTrack(trackId) {
return customAxios.get(`${URL}/tracks/${trackId}`)
}
customAxios.js :
export const customAxios = axios.create({
baseURL: process.env.REACT_APP_API_ENDPOINT,
timeout: 10000,
})
customAxios.interceptors.response.use(
function(response) {
return response
},
function(error) {
const errorResponse = error.response
if (isTokenExpiredError(errorResponse)) {
return resetTokenAndReattemptRequest(error)
}
return error.response
}
)
Like this everything works fine, In fact in my saga.js I can make the console.log(getTrackResponse) print the error well,
However in the Axios documentation it says tu use return Promise.reject(error) instead of return error.response
Why is that ?? Am i doing well or wrong ??

Answer 1

Have you tried using the call effect? For example:
import { call } from 'redux-saga/effects';
...
const getTrackResponse = yield call(httpGetTrack, action.payload);
...
When you define your interceptor you should also follow the Axios docs
function(error) {
const errorResponse = error.response
...
return Promise.reject(error.response);
}

Answer 2

import Api from './path/to/api'
import { call, put } from 'redux-saga/effects'
function fetchProductsApi() {
return Api.fetch('/products')
.then(response => ({ response }))
.catch(error => ({ error }))
}
function* fetchProducts() {
const { response, error } = yield call(fetchProductsApi)
if (response)
yield put({ type: 'PRODUCTS_RECEIVED', products: response })
else
yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
}
Documentation
Here is an answer for a similar problem