I have a website like this:

<input type="text" name="bg-url" id="bg-url">
<input type="submit" value="Set image" onclick="setBg(document.querySelector(`#bg-url`))">
<script>
    function setBg(element) {
        document.body.style.backgroundImage = `url("${encodeURI(element.value)}")`;
    }
</script>

The problem is that whenever the user enters a bad URL, it throws an error in the console. I would much rather have it alert the user.

I don’t want errors in the console because they look ugly and because I strongly dislike them.

Verifying via fetch didn’t work because of CORS.

Setting up a window.onerror event listener also didn’t work.