Handle 401 unauthorized code with react-router

user_10162545 0
Viewed 1420

I am wrapping some components with a function to handle errors, let's call this: wrapError.

Here some important points:

  • Some of the components call endpoints to fetch information.
  • I am using react-router

Everything works fine, but here we have the edge case:

When the access token of the users expires, the user can click and go to another page(component) and the new component will try to call its endpoint, then because the token is not valid we will receive a 401 error, finally remember that we have the wrapError that will handle this code Error.

This error is handled by using push(pushing to a 401 page error) from react-router but push is async so by a moment the code on the components keeps running, and prompts errors in the console.

Do you know how can I stop the flow, and redirect to the 401 screen?

function wrapError(callback, errorCode = 401) {
  return callback.catch(e => {
    if (errorCode === error.statusCode) {
      // delete access token

      history.push("/my401page");
... etc

The error is:

TypeError: Cannot read property 'variable' of undefined...

Because in that moment the endpoint returns undefined.

react-router reactjs ecmascript-6 javascript
1 Answers

it's not related to react.

Cannot read property 'variable' of undefined...

This means you wanna access to property of object. but object is undefined. in your example you catched error as e, but you used it as error.

Try this:

function wrapError(callback, errorCode = 401) {
  return callback.catch(e => {
    if (errorCode === e.statusCode) {
      // delete access token

      history.push("/my401page");
... etc
user_92216090
Related