How to redirect to an error page depending on the response code

Question

I have an api that I use to check the weather, but it may return different codes depending on the situation. In my axios.get in the catch block I want to redirect the user to an error page depending on the code returned by the server. How can this be done? I tried code below but it works wrong. When an error occurs, first the 'cityDoesntExist' page appears and then almost immediately the 'serverDoesntWork' page

methods: {
    async getWeather() {
        const cityName = this.$route.params.cityName;
        await axios.get(`/api/weather`, {params: { cityName: cityName }})
            .then(response => response.data)
            .then(data => this.weather = data)
            .catch(function (error) {
                if(error.response.status === 404) {
                    router.push({name: 'cityDoesntExist'});
                }
                if(error.response.status === 500) {
                    router.push({name: 'serverDoesntWork'});
                }

            });
    },
},

@AlaaEddineCherif This is the only place in my vue component where I handle the error. There is no problem with the return code through the api. I don't know how to handle the status code. Maybe this shouldn't be done in the catch block at all, but the provided code is the only part of my program where I'm trying to solve my problem — Cygnus_bewickii, Aug 03 '22 at 12:27
Try to check for status in the first then . Or it would be much better if you console logged the whole response to analyse it — Alaa Eddine Cherif, Aug 03 '22 at 12:29
@AlaaEddineCherif I check status code with postman and it shows everything correct, but when i try to log my response i have nothing in console. Also i should say that when response is ok it loggs in console without problems — Cygnus_bewickii, Aug 03 '22 at 13:24
That means catch is catching the response with the error . most likely the problem is that you're not getting into any of the if statements . now try logging the error in the catch and see where the status comes maybe you're looking for it in the wrong place (maybe it's error.data.status or error.status) — Alaa Eddine Cherif, Aug 03 '22 at 13:27
@AlaaEddineCherif i thought about it but why if code doesn't go to `if statements` i anyway get `cityDoesntExist` and `serverDoesntWork` pages? Does it mean that both of statements are true? Is it possible. I'll try to log an error and will answer you — Cygnus_bewickii, Aug 03 '22 at 13:34
that means the 404 isn't coming from axios but from your app server (the vue server) since you're calling for /api/weather but the error is from assets. Are you using webpack by any chance ? — Alaa Eddine Cherif, Aug 03 '22 at 14:00
@AlaaEddineCherif i'm using vite (maybe i should tell about stack: laravel + vue) — Cygnus_bewickii, Aug 03 '22 at 14:07
Also when my server returns status 500 i get this, so i get correct error, but anyway i can't handle it as i want https://imgur.com/a/zJfAqI3 — Cygnus_bewickii, Aug 03 '22 at 14:12

score 0 · Answer 1 · answered Aug 03 '22 at 12:32

0

The error could also be caused due to some other issue, which is why I would suggest you first confirm that there was response received, after which you could check what was the status in response and then use return keyword like so:

.catch(function (error) {
    if (error.response) {
      // Request made and server responded
      if(error.response.status === 404) {
          router.push({name: 'cityDoesntExist'});
          return;
      }
      if(error.response.status === 500) {
          router.push({name: 'serverDoesntWork'});
          return;
      }
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }

Code referred from : Axios handling errors

answered Aug 03 '22 at 12:32

Hasan Riza

469
1
8

Thanks for answer. I tried your code, but it works exectly the same. first the 'cityDoesntExist' page appears and then almost immediately the 'serverDoesntWork' page. Also i have nothing in my logs – Cygnus_bewickii Aug 03 '22 at 13:07
I use postman to make requests and it shows correct codes – Cygnus_bewickii Aug 03 '22 at 13:14
I'd like you to try `else if` condition for `500` and also try to console and check the `error.response.status` values. I'm hoping there is no api calling being done in cityDoesntExist – Hasan Riza Aug 03 '22 at 13:27
Anyway the same problem. And of course there aren't any api calls in `cityDoesntExist` – Cygnus_bewickii Aug 03 '22 at 14:22

score 0 · Accepted Answer · answered Aug 03 '22 at 17:37

Finally, after 4 hours i found solution and it was easier, than i thought. Thanks everybody who tried to help me! Here is my solution:

async getWeather() {
       const cityName = this.$route.params.cityName;
       await axios.get('/api/weather', {params: {cityName},})
           .then(response => response.data)
           .then(data => this.weather = data)
           .catch(function (err) {
               let errJSON = err.toJSON();
               console.log(errJSON);
               if (errJSON.status === 404) {
                   return router.push({name: 'cityDoesntExist'});
               } else if (errJSON.status === 500) {
                   return router.push({name: 'serverDoesntWork'});
               }
           });
   }

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 06 '22 at 02:16

How to redirect to an error page depending on the response code

2 Answers2