Search code examples
react-admin

Intercept api errors


I'm using react-admin with standard crud options, I want to react to the RA/CRUD_GET_LIST_FAILURE (and all others in the future) to logout the user if the error is a 401 (like when the token timed out)

How am I supposed to do this ? On custom requests I have my own sagas which handle this in the catch part and correctly do the job.

If I try to intercept the RA/CRUD_GET_LIST_FAILURE like this :

function * loadingErrorRA (action) {
  var e = action.payload;
  console.error('loadingError',action);
  if(action.error === "Unauthorized"){ 
  //I can't find a better way because I don't have access to the fetch response object in here
    yield put(userLogout());
    yield put(showNotification('Disconnected','warning'));
  } else {
    yield put(showNotification('Error '+action.error,'warning'));
  }
}

function * errorLoadingSaga() {
  yield takeLatest('RA/CRUD_GET_LIST_FAILURE', loadingErrorRA);
}

I have a blank screen and an error pops :

ListController.js:417 Uncaught TypeError: Cannot read property 'list' of undefined
    at Function.mapStateToProps [as mapToProps] (ListController.js:417)
    at mapToPropsProxy (wrapMapToProps.js:43)
    at handleNewPropsAndNewState (selectorFactory.js:34)
    at handleSubsequentCalls (selectorFactory.js:67)
    at pureFinalPropsSelector (selectorFactory.js:74)
    at Object.runComponentSelector [as run] (connectAdvanced.js:26)
    at Connect.componentWillReceiveProps (connectAdvanced.js:150)
    at callComponentWillReceiveProps (react-dom.development.js:11527)
   ....
index.js:2178 The above error occurred in the <Connect(TranslatedComponent(undefined))> component:
    in Connect(TranslatedComponent(undefined)) (created by List)
    in List (created by WithStyles(List))
    in WithStyles(List) (at SalesByOrganismList.js:40)
    in div (at SalesByOrganismList.js:39)
    in SalesByOrganismList (created by WithPermissions)
    in WithPermissions (created by Connect(WithPermissions))
    in Connect(WithPermissions) (created by getContext(Connect(WithPermissions)))
    ...

And then saga catch it with :
index.js:2178 uncaught at loadingErrorRA TypeError: Cannot read property 'list' of undefined
    at Function.mapStateToProps [as mapToProps] 
    ...

Thanks for the help


Solution

  • https://marmelab.com/react-admin/DataProviders.html#error-format

    When the API backend returns an error, the Data Provider should throw an Error object. This object should contain a status property with the HTTP response code (404, 500, etc.). React-admin inspects this error code, and uses it for authentication (in case of 401 or 403 errors). Besides, react-admin displays the error message on screen in a temporary notification.

    And https://marmelab.com/react-admin/Authentication.html#catching-authentication-errors-on-the-api

    Each time the API returns an error, the authProvider is called with the AUTH_ERROR type. Once again, it’s up to you to decide which HTTP status codes should let the user continue (by returning a resolved promise) or log them out (by returning a rejected promise).