Catch 401 errors without throwing error when auth is not valid anymore

[rap2hpoutre]

When a search fails and returns 401 (let's say because the session is not valid anymore), Reactive Search throws an error. I would love to catch it to not trigger an error, since it just means the connection is lost. The problem in throwing an error is that it adds some mess the console and the bug trackers (eg: Sentry). For instance, I would love a clean way to catch the error then redirect the user to a auth. onError on components is too late since the error is already thrown.

I'm using v3.14.0 (React project)

[bietkul]

It seems a good idea. We can add onError prop in the ReactiveBase to catch errors.

[DanielHabenicht]

Love it and was about to create another Issue for it! I also think it would be a great Idea to make this for all Errors that might happen, not just the network requests.

[rap2hpoutre]

Any news about this issue?

[siddharthlatest]

Thanks for bringing attention to this. We would like to support this use-case. Also in case someone wants to contribute sooner, happy to provide guidance on how to do this.

[rap2hpoutre]

@siddharthlatest OK, thank you. I don't know where to start, but I would be glad to tackle this issue. I checked ReactiveBase in web but I did not found where the query is actually done nor where I can catch errors (I see a componentDidCatch that does not seem to be triggered). Could you give me guidance on how I should start?

[bietkul]

@rap2hpoutre The existing componentDidCatch would not get invoked on network calls error. The best way to catch the network requests errors is to use the StateProvider component. Check this example https://codesandbox.io/s/optimistic-euclid-2tbm7?file=/src/index.js

[bietkul]

@rap2hpoutre As per your use-case, you want to handle the error before ReactiveSearch processes it. For e.g if ReactiveList was showing some results and next request caused some error then it should not clear the results.

• To do this we can define a global error handler in ReactiveBase.

  <ReactiveBase
  onError={(error) => new Promise((resolve, reject) => {
     // resolve would forward the error to RS
     if (error.code === 401) {
        // avoid processing and redirect to login modal
         reject(error)
     } else {
        // forward the error to RS
        resolve(error)
     }
  })}
  />

• We can store the prop in Redux store like transformRequest. https://github.com/appbaseio/reactivesearch/blob/next/packages/web/src/components/basic/ReactiveBase.js#L102
• Use the global onError method if defined at here https://github.com/appbaseio/reactivecore/blob/master/src/actions/utils.js#L48