link checking from snippets

linkchecker.js

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);

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

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);

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"

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

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.

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);