Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript Using Javascript fetch() to determine if URL is "good" or "bad"

ppowell777

Well-Known Coder
I wrote a simple CMA that displays database information that includes various URLs displayed on my website that is managed by my CMA. The URLs display just fine, and all is well, however, what if that URL goes "bad"? What if the URL returns a 403, 404, or even a 0, if you click onto the URL from my CMA?

I want to be able to determine that before I click onto the link.

I wrote a simple function in Javascript that I thought could do it, but it constantly says that every URL is fine, even "bad" ones like www . thiswillabsolutelyneverworkdonttry . com. Although the response status is 0, as expected, it still returns true anyway, which makes zero sense; furthermore, I still get

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Is this even possible in Javascript, or this is impossible for Javascript to accomplish?

Code:

JavaScript:
/**
 * Options object based on https://stackoverflow.com/questions/41030425/disabling-cors-using-js-fetch
 */
async function checkUrl(url) {
    try {
        const controller = new AbortController();
        const timeout = setTimeout(() => { controller.abort(); }, 2000);
        const options = {
          method: 'GET',
          mode: 'no-cors',
          signal: controller.signal
        };
        await fetch(url, options)
             .then((response) => {
                // BASED ON https://dmitripavlutin.com/timeout-fetch-request/ PUT clearTimeout() BEFORE THE return STATEMENT BLOCK
                clearTimeout(timeout);
                if (response.status >= 200 && response.status < 400) {
                    return true;
                } else {
                    return false;
                }
             })
             .catch((e) => { return false; });
    } catch (e) {
        console.error(`Unable to run checkUrl(): ${e.message}`);
    }
}

Thanks
 
I wrote a simple CMA that displays database information that includes various URLs displayed on my website that is managed by my CMA. The URLs display just fine, and all is well, however, what if that URL goes "bad"? What if the URL returns a 403, 404, or even a 0, if you click onto the URL from my CMA?

I want to be able to determine that before I click onto the link.

I wrote a simple function in Javascript that I thought could do it, but it constantly says that every URL is fine, even "bad" ones like www . thiswillabsolutelyneverworkdonttry . com. Although the response status is 0, as expected, it still returns true anyway, which makes zero sense; furthermore, I still get



Is this even possible in Javascript, or this is impossible for Javascript to accomplish?

Code:

JavaScript:
/**
 * Options object based on https://stackoverflow.com/questions/41030425/disabling-cors-using-js-fetch
 */
async function checkUrl(url) {
    try {
        const controller = new AbortController();
        const timeout = setTimeout(() => { controller.abort(); }, 2000);
        const options = {
          method: 'GET',
          mode: 'no-cors',
          signal: controller.signal
        };
        await fetch(url, options)
             .then((response) => {
                // BASED ON https://dmitripavlutin.com/timeout-fetch-request/ PUT clearTimeout() BEFORE THE return STATEMENT BLOCK
                clearTimeout(timeout);
                if (response.status >= 200 && response.status < 400) {
                    return true;
                } else {
                    return false;
                }
             })
             .catch((e) => { return false; });
    } catch (e) {
        console.error(`Unable to run checkUrl(): ${e.message}`);
    }
}

Thanks
Hi there,
so yes. it is possible with js, or with pretty much any language. this can be done in several ways..

make a GET request to the site itself. Depending on the status code you get, you can either
A) show the text of the link. with an line through it, instead of using an anchor tag with it, or tooltip the would be link to tell the user that the link does not work

B) not display it, but get a separate report of those broken links
 
That's just it; I am using the "GET" method, and I am listening for the response code. The code should be 200-399 to be "OK", but, on occasions, it might be 0 (e.g. www . thisisnotatallarealdomain . com), and, instead of returning false, it throws an error in the console, which is not what I want to happen, so my fetch() function fails to work in spite of "GET" and response code
 
That's just it; I am using the "GET" method, and I am listening for the response code. The code should be 200-399 to be "OK", but, on occasions, it might be 0 (e.g. www . thisisnotatallarealdomain . com), and, instead of returning false, it throws an error in the console, which is not what I want to happen, so my fetch() function fails to work in spite of "GET" and response code
To further the issue, I am using an absolutely fake URL for testing purposes, and while I should get a response code of 0, which should return false without complaint, I instead get this:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED
 
This is not only not the result I need, but that checkUrl() returns true, indicating that the fake URL is "good", even though it's not. That's a major problem for users unless they happen to check the console, which many do not
can you please post the relevant part of the code? let's see if it even is an issue on your end
 
JavaScript:
function checkUrl(url) {
    try {
        const controller = new AbortController();
        const timeout = setTimeout(() => { controller.abort(); }, 2000);
        const options = {
          method: 'GET',
          mode: 'no-cors',
          signal: controller.signal
        };
        fetch(url, options)
             .then((response) => {
                // BASED ON https://dmitripavlutin.com/timeout-fetch-request/ PUT clearTimeout() BEFORE THE return STATEMENT BLOCK
                clearTimeout(timeout);
                if (typeof response.status !== 'undefined' && response.status != null && !isNaN(response.status) &&
                    response.status >= 200 && response.status < 400
                   ) {
                    console.log(`GOOD response code = ${response.status}`);
                    return true;
                } else {
                    console.log(`BAD response code = ${response.status}`);
                    return false;
                }
             })
             .catch((e) => { console.log(`CATCH response code = ${response.status}`);return false; });
    } catch (e) {
        //console.error(`Unable to run catchUrl(): ${e.message}`);
        console.log(`ERROR response code = ${response.status}`);
        return false;
    }
}

JavaScript:
/**
 * Create a SetInterval Listener to detect the existence of the Resource URL Checker table before determining each cell's URL for reachability
 */
function checkResourceUrls() {
    try {
        const waitingForTable = setInterval(() => {
            if (typeof document.getElementById('resources_table') !== 'undefined' && document.getElementById('resources_table') != null) {
                clearInterval(waitingForTable);
                const anchors = Array.from(document.getElementsByTagName('A'));
                let resourceId = '';
                anchors.forEach(anchor => {
                    resourceId = (anchor.id.trim().startsWith('link_row_')) ? anchor.id.split('_')[2] : '';
                    console.log(`resourceId = ${resourceId}`);
                    if (resourceId.trim().length > 0 && checkUrl(anchor.href)) {
                        console.log(`resource_functions: GOOD for resourceId = ${resourceId}`);
                        document.getElementById(`col1_${resourceId}`).innerHTML += ` ${GOOD_URL_INDICATOR}`;
                    } else if (resourceId.trim().length > 0) {
                        console.log(`resource_functions: BAD for resourceId = ${resourceId}`);
                        document.getElementById(`col1_${resourceId}`).innerHTML += ` ${BAD_URL_INDICATOR}`;
                    }
                });
            }
        }, 100);
    } catch (e) {
        console.error(`Unable to run checkUrls(): ${e.message}`);
    }
}
 
I modified the code to even worse results; I am clearly seeing asynchronous errors throughout the entire code iteration, and I have absolutely no idea how to fix it anymore, or even if it's possible in Javascript to loop through an asynchronous function at all.

I based my latest code on this article

Errors:

screen.webp

Code:

JavaScript:
async function checkUrl(url) {
    try {
        const controller = new AbortController();
        const timeout = setTimeout(() => { controller.abort(); }, 2000);
        const options = {
          method: 'GET',
          mode: 'no-cors',
          signal: controller.signal
        };
        await fetch(url, options)
             .then((response) => {
                // BASED ON https://dmitripavlutin.com/timeout-fetch-request/ PUT clearTimeout() BEFORE THE return STATEMENT BLOCK
                clearTimeout(timeout);               
                if (response.status >= 200 && response.status < 400) {
                    console.log(`GOOD response code = ${response.status}`);
                    return true;
                } else {
                    console.log(`BAD response code = ${response.status}`);
                    return false;
                }
             })
             .catch((e) => { return false; });
    } catch (e) {
        //console.error(`Unable to run catchUrl(): ${e.message}`);
        return false;
    }
}

function checkResourceUrls() {
    try {
        const waitingForTable = setInterval(() => {
            if (typeof document.getElementById('resources_table') !== 'undefined' && document.getElementById('resources_table') != null) {
                clearInterval(waitingForTable);
                const anchors = Array.from(document.getElementsByTagName('A'));
                checkResourceUrlLinks(anchors);
            }
        }, 100);
    } catch (e) {
        console.error(`Unable to run checkResourceUrls(): ${e.message}`);
    }
}

async function checkResourceUrlLinks(anchors) {
    try {
        let resourceId = '';
        for await (let anchor of anchors) {
            let isOK = false;
            resourceId = (anchor.id.trim().startsWith('link_row_')) ? anchor.id.split('_')[2] : '';
            if (resourceId.trim().length > 0) {
                isOK = await checkUrl(anchor.href);
                if (isOK) {
                    console.log(`resource_functions: GOOD for resourceId = ${resourceId}`);
                    document.getElementById(`col1_${resourceId}`).innerHTML += ` ${GOOD_URL_INDICATOR}`;
                } else {
                    console.log(`resource_functions: BAD for resourceId = ${resourceId}`);
                    document.getElementById(`col1_${resourceId}`).innerHTML += ` ${BAD_URL_INDICATOR}`;
                }
            }
        }
    } catch (e) {
        console.error(`Unable to run checkResourceUrls(anchor): ${e.message}`);
    }
}
 
I modified the code to even worse results; I am clearly seeing asynchronous errors throughout the entire code iteration, and I have absolutely no idea how to fix it anymore, or even if it's possible in Javascript to loop through an asynchronous function at all.

I based my latest code on this article

Errors:

View attachment 3087

Code:

JavaScript:
async function checkUrl(url) {
    try {
        const controller = new AbortController();
        const timeout = setTimeout(() => { controller.abort(); }, 2000);
        const options = {
          method: 'GET',
          mode: 'no-cors',
          signal: controller.signal
        };
        await fetch(url, options)
             .then((response) => {
                // BASED ON https://dmitripavlutin.com/timeout-fetch-request/ PUT clearTimeout() BEFORE THE return STATEMENT BLOCK
                clearTimeout(timeout);              
                if (response.status >= 200 && response.status < 400) {
                    console.log(`GOOD response code = ${response.status}`);
                    return true;
                } else {
                    console.log(`BAD response code = ${response.status}`);
                    return false;
                }
             })
             .catch((e) => { return false; });
    } catch (e) {
        //console.error(`Unable to run catchUrl(): ${e.message}`);
        return false;
    }
}

function checkResourceUrls() {
    try {
        const waitingForTable = setInterval(() => {
            if (typeof document.getElementById('resources_table') !== 'undefined' && document.getElementById('resources_table') != null) {
                clearInterval(waitingForTable);
                const anchors = Array.from(document.getElementsByTagName('A'));
                checkResourceUrlLinks(anchors);
            }
        }, 100);
    } catch (e) {
        console.error(`Unable to run checkResourceUrls(): ${e.message}`);
    }
}

async function checkResourceUrlLinks(anchors) {
    try {
        let resourceId = '';
        for await (let anchor of anchors) {
            let isOK = false;
            resourceId = (anchor.id.trim().startsWith('link_row_')) ? anchor.id.split('_')[2] : '';
            if (resourceId.trim().length > 0) {
                isOK = await checkUrl(anchor.href);
                if (isOK) {
                    console.log(`resource_functions: GOOD for resourceId = ${resourceId}`);
                    document.getElementById(`col1_${resourceId}`).innerHTML += ` ${GOOD_URL_INDICATOR}`;
                } else {
                    console.log(`resource_functions: BAD for resourceId = ${resourceId}`);
                    document.getElementById(`col1_${resourceId}`).innerHTML += ` ${BAD_URL_INDICATOR}`;
                }
            }
        }
    } catch (e) {
        console.error(`Unable to run checkResourceUrls(anchor): ${e.message}`);
    }
}
Curious what line 69 is
 

Buy us a coffee!

Buy me a coffee.
Back
Top Bottom