A way to stop WebSocket errors to show up in browser's console

Question

So the problem is when I try to initiate a new WebSocket to a remote host, sometimes the browser's console prints a red error message and complains about a refused connection, here is the message:

Error in connection establishment: net::ERR_CONNECTION_REFUSED

Having an error is fine since the remote host might be not responding sometimes, but the fact that I cannot handle this error message is very annoying.

Is there any way to either handle this error message or check whether the remote host accepts the WebSocket connection before initializing one in my JavaScript code??

Answer 1

Several possibilities come to mind:

1. Add a WebSocket.onerror error handler

   myWebSocket.onerror = myEventHandler;
   

2. Wrap your "connect" in a try/catch block

   try {
      const connection = new WebSocket(myUrl);
      ...
   }
   catch(error) {
      console.error(error);
   }
   

3. Structure your code such that your I/O is event driven:

   https://developer.mozilla.org/en-US/docs/Web/API/WebSocket#Examples

    // Create WebSocket connection.
    const socket = new WebSocket('ws://localhost:8080');

    // Connection opened
    socket.addEventListener('open', function (event) {
        socket.send('Hello Server!');
    });

    // Listen for messages
    socket.addEventListener('message', function (event) {
       console.log('Message from server ', event.data);
    });

    // Handle errors
    socket.addEventListener('error', function (event) {
       console.log('WebSocket error observed:', event);
    });

ADDENDUM:

• The above methods allow you to completely handle a websockets exception.

• Regardless of whether the exception is handled or not, the Chrome debugger will tell you if an exception has occurred. This is a Good Thing. It's called a "First-Chance Exception":

  https://learn.microsoft.com/en-us/security-risk-detection/concepts/first-chance-exception

  .. it is known a “first chance” exception – the debugger is given the first chance of inspecting the exception prior to the application handling it (or not).

  In Microsoft's Visual Studio debugger, there's a little checkbox you can use to "gag" first chance exceptions. I'm not aware of any similar "checkbox" in Chrome debugger.

• POSSIBLE SUGGESTIONS:

  • Chrome debugger has a "filter". EXAMPLE FILTER REGEX: ^((?!ERR_CONNECTION_REFUSED).)*$

  • This link suggests you might be able to use the filter to "Hide Network Messages" (I haven't tried it myself). See also this link.

Answer 2

This is not possible.

I had the same problem in a frontend application that triggers a reload on the server and needs to wait for it to come back. The solution I found is to build a proxy server that remains up the whole time and implements the verification WebSocket in a reliable way.

It seemed too much at the beginning, but it revealed a more robust application. This may or may not relate to your scenario, the point here is: spending so much energy trying to suppress an error message is a smell of inadequate architecture.