How to handle net::ERR_CONNECTION_REFUSED in Axios - Vue.js

Question

Below is my connection request code :

doLogin(this.login).then(response => {
        var token = response.data.token;
        localStorage.setItem('AUTH_TOKEN', JSON.stringify(token));
        this.$router.push({name: 'Devices'});
        });
      }).catch(error => {
        console.log(error.response.data.message);
      });

the catch() part works fine for http errors (like 400, 404, 403..etc). But when my server is offline this script just throws net::ERR_CONNECTION_REFUSED. Is there any way to handle this error and let the front-end user know that the server is currently offline.?

Here is the doLogin() function just in case,

function doLogin(data) {
  const url   = 'http://localhost:3000/authenticate';
  return axios.post(url,data);
}

You are printing `error.response.data.message`. Have you tried just to log `error`? — DrColossos, Nov 02 '17 at 08:28

score 52 · Accepted Answer · answered Nov 27 '17 at 12:09

52

You can try this in the catch part:

catch(error => {
        if (!error.response) {
            // network error
            this.errorStatus = 'Error: Network Error';
        } else {
            this.errorStatus = error.response.data.message;
        }
      })

answered Nov 27 '17 at 12:09

chithra

756
7
12

21

This do not allows to distinguish errors like `net::ERR_CONNECTION_RESET` and `net::ERR_CONNECTION_REFUSED` and, possibly, other error states. – Yuriy Petrovskiy Nov 28 '18 at 08:27
I'm working on vue js application which consumes api and I'm facing similar problem and this works fine for me but the problem is I need to place this in every request which sends to backend api. But what's the best way of approach to handle this by placing at one place? – Ruby4Rails May 08 '20 at 18:50
1

@Ruby4Rails - build a service class for your api with a method for each type, i.e. get(), post(), delete() or whatever. Then you can always handle these edge cases no matter where you call the methods in your api – fullStackChris Apr 22 '21 at 13:06

score 21 · Answer 2 · answered May 22 '19 at 22:36

21

You may use interceptors:

axios.interceptors.response.use(
    response => {
        return response
    },
    error => {
        if (!error.response) {
            console.log("Please check your internet connection.");
        }

        return Promise.reject(error)
    }
)

answered May 22 '19 at 22:36

Sinan Eldem

5,564
3
36
37

3

Great. I just put this in my `useEffect()` in my NextJS (React) `_app.js` and display globally a Snackbar from Material-UI from anywhere with React's Global Context. – KeitelDOG Feb 22 '21 at 20:59

score 1 · Answer 3 · answered Aug 16 '18 at 12:30

You should do the same validation that @chithra pointed out in the .then() because i'm having a weird issue when testing requests with my servers down, the "response" comes as if it was a success.

Also, on the .then() do it with response.status instead of response.error

shahrokh1111g · Answer 4 · 2021-08-13T13:57:24.223

By using npm; a standard package manager for the JavaScript runtime environment Node.js.

With npm:

npm i axios

Next, you should import Axios in your src/App.vue file

import axios from 'axios';

you will need to call it on a lifecycle hook. Here we will use the beforeCreated() lifecycle hook, this is because we will be able to retrieve sensitive data and events that are active with the beforeCreated hook.

 data() {
return {
  network: false,
}; },
beforeCreate() {
axios
  .get("http://localhost:13172/api/product/getproducts")
  .then((response) => {
    console.log(response);
    this.network = true;
  })
  .catch((error) => {
    console.log(error), (this.network = false);
  }); }

How to handle net::ERR_CONNECTION_REFUSED in Axios - Vue.js

4 Answers4