How to create a generic wrapper function for saga error handling?

Question

I would like to create a wrapper that would handle the try-catch clauses in my sagas to make them a bit more concise. So far I have the code below, but it's not working.

export function* withErrorHandler(fn, errorFn) {
  try {
    fn();
  } catch (e) {
    yield put(errorFn(parseError(e)));
  }
}

export function* logoutSaga() {
  yield withErrorHandler(function*() {
    yield put(logoutRequest());
    yield call(api.logout);
    yield localStorage.clear();
    yield put(logoutSuccess());
  }, logoutFailure);
}

Answer 1

Why do you need a wrapper? Just put it in a try/catch block:

export function* logoutSaga() {
  try {
    yield put(logoutRequest());
    yield call(api.logout);
    yield localStorage.clear();
    yield put(logoutSuccess());
  } catch(e) {
    yield put(logoutFailure(parseError(e)));
  }
}

Additionally, you can eliminate the need to parse errors at all, by wrapping your API functions in a wrapper. For example:

class ApiError {
    constructor(err, helpful) {
        this.original = err;
        this.helpful = helpful;
    }
}

const logout = () => { 
    try {
        return axios.post("accounts/logout/");
    } catch (err) {
        throw new ApiError(err, 'There was a problem logging out.');
    }
}

Then in your error handling functions, you can check if the thrown error is "instanceof ApiError", and display err.helpful to the end user. You can take the constructor of ApiError even further, parse the original error, and modify this.helpful more based on the returned result.

Answer 2

You pass a generator, not a function so you need to call it properly. You should change your wrapper like this

export function* withErrorHandler(fn, errorFn) {
 try {
  yield fn();
 } catch (e) {
...