redux-saga catch无法加载资源：net :: ERR_CONNECTION_REFUSED

Question

I use axios to make call to the backend server. And with redux-saga I can control the side effect from the server easily.

import {call, put, takeEvery} from "redux-saga/effects";
import {REQUEST_FAILED, REQUEST_SUCCESS, ROOT_URL, SUBMIT_USERNAME_PASSWORD} from "../../constants";
import axios from "axios/index";

const shootApiTokenAuth = (values) => {
  const {username, password} = values;
  return axios.post(`${ROOT_URL}/api-token-auth/`,
    {username, password});
};

function* shootAPI(action) {
  try {
    const res = yield call(shootApiTokenAuth, action.payload);
    const {history} = action.payload;
    yield put({
      type: REQUEST_SUCCESS,
      payload: res
    });
    history.push('/companies'); //push user to `/companies` page
  } catch (err) {
    yield put({
      type: REQUEST_FAILED,
      payload: err
    });
  }
}

export function* watchSubmitBtn() {
  yield takeEvery(SUBMIT_USERNAME_PASSWORD, shootAPI);
}

Problem: When the backend server is down. It does not return any error back to me. And browser will raises an error Failed to load resource: net::ERR_CONNECTION_REFUSED

I have seen previous answer on callback method , but I prefer axios and redux-saga not callback

I had tried console.log(err) . And I still searching they way to grab the error message and differentiate it from server response error.

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)

Question:
How can I use axios and redux-saga to catch the err ?

Answer 1

If you put the try/catch around the axios request itself, then you can get a bit more granularity on the cause.

https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253

You probably want to have a custom error format and an error reducer that handles the different types of errors appropriate. For example if you got a response you could parse it and add it to the error, else you know there is an application level error which you would handle with an 'Oops' page or something like that.

Answer 2

case REQUEST_FAILED:
      //Probably it can failed by 2 reason
      //1. 404 from server
      //2. network is down
      if (action.payload.response === undefined) {
        return {
          token: undefined,
          message: 'Network is down',
          isAuthenticated: false,
          statusCode: 406
        }
      } else {
        const tmp = action.payload.response.request.response;
        const tmp2 = JSON.parse(tmp);
        return {
          token: undefined,
          message: tmp2.non_field_errors[0],
          isAuthenticated: false,
          statusCode: action.payload.response.status
        };
      }