Skip to content

Instantly share code, notes, and snippets.

@eviltester eviltester/linkchecker.js
Last active Jul 2, 2019

Embed
What would you like to do?
link checking from snippets
var links = document.querySelectorAll("a");
var linkReport = [];
var linksChecked=0;
links.forEach(function(link){
var reportLine = {url: link.getAttribute('href'), status:0, redirectedTo: "", message : "", element : link};
linkReport.push(reportLine);
console.log("HEAD " + reportLine.url);
fetch(reportLine.url, {
method: 'HEAD',
mode: 'cors',
//mode: 'no-cors',
redirect: 'follow'
})
.then(function(response) {
linksChecked++;
reportLine.status=response.status;
reportLine.message= response.statusText + " | " +
response.type + " | " +
(response.message || "") + " | " +
JSON.stringify(response.headers) ;
if(response.redirected){
reportLine.redirectedTo = response.url;
}
console.table(response);
}
)
.catch(function(error){
reportLine.message = error;
console.table(error);
linksChecked++;
});
});
function imgreport(links){
links.forEach(function(link){
if(link.status==0){
// trigger error messages with status
// to the console for status of 0
var img = new Image();
img.src = link.url;
}
}
);
}
var finishReport = setInterval(
function(){if(linksChecked>=linkReport.length){
console.table(linkReport);
imgreport(linkReport);
clearInterval(finishReport);
}}
, 3000);
@eviltester

This comment has been minimized.

Copy link
Owner Author

commented Jul 1, 2019

Run this as a snippet - status 0 is probably a cors or mixed content error

@eviltester

This comment has been minimized.

Copy link
Owner Author

commented Jul 2, 2019

var links = document.querySelectorAll("a");
var linkReport = [];
var linksChecked=0;
links.forEach(function(link){
    
    var reportLine = {url: link.getAttribute('href'), status:0, message : "", element : link};
    linkReport.push(reportLine);

    fetch(reportLine.url, {
      method: 'HEAD'
    })
    .then(function(response) {
        linksChecked++;
        reportLine.status=response.status;
        reportLine.message= response.statusText + " | " + response.type + " | " + 
                            (response.message || "") + " | " + (response.redirected ? "redirected | " : "") +
                            JSON.stringify(response.headers) ;
        console.table(response);
        }
    )
    .catch(function(error){
        reportLine.message = error;
        console.table(error);
        linksChecked++;
    });

});
var finishReport = setInterval(
                        function(){if(linksChecked>=linkReport.length){console.table(linkReport);
                        clearInterval(finishReport)}}, 3000);
@eviltester

This comment has been minimized.

Copy link
Owner Author

commented Jul 2, 2019

Two versions - one using XHTTP and one using Fetch.

I added console.table logging for each response to help analysis.

I added the element into the report, because it shows a basic CSS locator when output, but it also means that if there is a problem with a specific link in the report then I can...

e.g. say link 94 has a problem

I can scroll it into view:

linkReport[94].element.scrollIntoView()

and I can highlight it on screen using console code completion

linkReport[94].element

or a little more persistently:

linkReport[94].element.style.backgroundColor = "red"
@eviltester

This comment has been minimized.

Copy link
Owner Author

commented Jul 2, 2019

I think the 'fetch' report and console output is a little more useful.

@eviltester

This comment has been minimized.

Copy link
Owner Author

commented Jul 2, 2019

For a little extra information I can add another function:

function imgreport(links){    
    links.forEach(function(link){
            if(link.status==0){
                // trigger error messages with status 
                // to the console for status of 0
                var img = new Image();
                img.src = link.url;
            }
        }
    );
}

Then call this during the reporting process:

var finishReport = setInterval(
                        function(){if(linksChecked>=linkReport.length){
                                               console.table(linkReport);
                                               imgreport(linkReport);
                                               clearInterval(finishReport)}}, 3000);

This will do a secondary check on the urls that provided a status of 0 with possibly extra information.

@eviltester

This comment has been minimized.

Copy link
Owner Author

commented Jul 2, 2019

The XML HTTP Request version:

var links = document.querySelectorAll("a");
var linkReport = [];
var linksChecked=0;
links.forEach(function(link){
    var http = new XMLHttpRequest();
    var reportLine = {url: link.getAttribute('href'), status:0, message : "", element : link};

        http.open('HEAD', reportLine.url);
        linkReport.push(reportLine);
        
        http.onreadystatechange = (function(line,xhttp) {
            return function(){
                if (xhttp.readyState == xhttp.DONE) {
                    line.status = xhttp.status;
                    linksChecked++;
                    line.message = xhttp.responseText + xhttp.statusText;
                    console.table(xhttp);
                }
            }
        })(reportLine, http);
        http.send();
});
var finishReport = setInterval(
                        function(){
                              if(linksChecked>=linkReport.length){
                                  console.table(linkReport);
                                  clearInterval(finishReport);
                                  }
                               }
                        , 3000);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.