How to handle 'ECONNREFUSED' in React with Fetch?

Question

I have the following code in React that interacts with a third party api. When the Avaya One-X client is not running on the target PC, i get an Error connection refused in the console which is normal. The issue is that the code is set to run every 5 seconds and the console gets filled with these errors whenever the one-x client is not running.

How can i handle this better? Not have it logged so many times would be nice.

  fetchData = (url) => {
    return new Promise((res, rej) => {
      fetch(url)
        .then((r) => r.text())
        .then((text) => {
          res(text);
        })
        .catch((e) => rej(e));
    });
  };

  getLogs = async () => {
    try {
      const { user } = this.props.auth;
      const regxmlPromise = this.fetchData(
        `http://127.0.0.1:60000/onexagent/api/registerclient?name=${user.id}`
      );
      const clientIdPromise = this.fetchData(
        `/api/avaya/${user.id}/getclientid/`
      );

      
      const resolves = await Promise.all([regxmlPromise, clientIdPromise]);

      const [registration, clientId] = resolves || [];

      const nextNotification = await this.fetchData(
        `http://127.0.0.1:60000/onexagent/api/nextnotification?clientid=${clientId}`
      );

      if (registration) {
        const regxml = new XMLParser().parseFromString(registration);
        if (regxml.attributes.ResponseCode === "0") {
          axios.post(`/api/avaya/${user.id}/register/`, regxml);
          console.log("ClientId sent!");
        }
      }

      if (nextNotification) {
        const xml = new XMLParser().parseFromString(nextNotification);
        if (
          xml.children[0].name === "VoiceInteractionCreated" ||
          xml.children[0].name === "VoiceInteractionMissed" ||
          xml.children[0].name === "VoiceInteractionTerminated"
        ) {
          console.log(xml);
          console.log(xml.children[0].name);
          axios.post(`/api/avaya/${user.id}/logcalls/`, xml);
        }
      }
    } catch (error) {
      console.log(error);
    }
  };

  timer = (time) => {
    const date = new Date(time);
    return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
  };

  componentDidMount() {
    this.getLogs();
    this.callsInterval = setInterval(this.getLogs, 5000);
  }

  componentWillUnmount() {
    clearInterval(this.callsInterval);
  }

To make things more clear, here's a screenshot of the console. I get the Get error with connection refused AND the actual error i catch and log. So even if i catch the error and do nothing with it, i still get that connection refused logged in the console no matter what.

One interesting thing is that if i use fetch-node, i get a different behavior and error message. The error with node is an object and has different props. In React, if i console.log the fetch req error, i only get "TypeError: Failed to fetch"

Answer 1

So if you are just trying to hide the network error messages you can click the gear box in Chrome and hit "hide network." Apparently in Chrome, even if you catch network errors they will still bubble up to the console unless you select that. I was using Firefox and did not see the problem at first.

Some more info can be found here: Catching net::ERR_NAME_NOT_RESOLVED for fixing bad img links