Silence net::ERR_CONNECTION_REFUSED

Connecting to a non-existent web socket server results in loud errors being logged to the console, usually to the tune of ... net::ERR_CONNECTION_REFUSED.

Anyone have an idea for a hackaround to silence this output? XMLHttpRequest won't work since it yields the same verbose error output if the server is not reachable.

The goal here is to test if the server is available, if it is then connect to it, otherwise use a fallback, and to do this without spamming the console with error output.

回答1:

Chrome itself is emitting these messages, and there is no way to block them. This is a function of how chrome was built; whenever a ResourceFetcher object attempts to fetch a resource, its response is passed back to its context, and if there's an error, the browser prints it to the console - see here.

How to use it?

Open the demo page, click the "boot" button, it will open a new tab. Click the "test" button in the new tab and check the result below. If you want to get a positive result, change the url to wss://echo.websocket.org.

Why?

By using post message, we can make browser tabs communicate with each other. So we can move those error output to a tab that we don't concern.

P.S. You can refresh the target page freely without loosing the connection between it and boot page.

P.P.S You can also use storage event to achieve this.

boot.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>boot page</title>

</head>

<body>
    <button onclick="boot()">boot</button>
    <p>BTW, you can boot the page without the button if you are willing to allow the "pop-up"</p>
    <script>
        var targetWindow;

        function init() {
            targetWindow
        }

        function boot() {
            targetWindow = window.open("target.html");
        }
        boot();
        window.addEventListener('message', function(e) {
            var msg = e.data;
            var {
                action,
                url,
                origin,
            } = msg;

            if (action === "testUrl") {
                let ws = new WebSocket(url);
                ws.addEventListener("error", function() {
                    targetWindow.postMessage({
                        action: "urlResult",
                        url,
                        data: false,
                    }, origin);
                    ws.close();
                });
                ws.addEventListener("open", function() {
                    targetWindow.postMessage({
                        action: "urlResult",
                        url,
                        data: true,
                    }, origin);
                    ws.close();
                });
            }


        });

    </script>
</body>

</html>

target.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>target page</title>
</head>

<body>
    <h4>input the url you want to test:</h4>
    <textarea type="text" id="input" style="width:300px;height:100px;">
        </textarea>
    <br>
    <div>try <span style="color:red">wss://echo.websocket.org</span> for success result(may be slow)</div>
    <button onclick="test()">test</button>
    <div id="output"></div>
    <script>
        var origin = location.origin;
        var testUrl = origin.replace(/^https?/, "ws") + "/abcdef"; //not available of course
        document.querySelector("#input").value = testUrl;

        function output(val) {

            document.querySelector("#output").textContent = val;
        }

        function test() {
            if (window.opener) {
                window.opener.postMessage({
                    action: "testUrl",
                    url: document.querySelector("#input").value,
                    origin,
                }, origin);
            } else {
                alert("opener is not available");
            }

        }
        window.addEventListener('message', function(e) {
            var msg = e.data;
            if (msg.action === "urlResult") {
                output(`test ${msg.url} result: ${msg.data}`);
            }
        });

    </script>
</body>

</html>