How to Detect Broken Links Using JavaScript

document.querySelectorAll('a[href]:not([href=""])').forEach(anchor => {
  fetch(anchor.href, { method: 'HEAD' })
    .then(res => {
      if (res.status >= 400) {
        console.warn('Broken link:', anchor.href, 'Status:', res.status);
      }
    })
    .catch(err => {
      console.error('Failed to fetch:', anchor.href, err);
    });
});

async function checkLink(url, timeout = 10000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeout);

  try {
    let res = await fetch(url, {
      method: 'HEAD',
      signal: controller.signal,
      redirect: 'follow'
    });

    // Some servers reject HEAD, fall back to GET
    if (res.status === 405 || res.status === 403) {
      res = await fetch(url, {
        method: 'GET',
        signal: controller.signal,
        redirect: 'follow'
      });
    }

    clearTimeout(timer);
    return {
      url,
      status: res.status,
      ok: res.ok,
      redirected: res.redirected,
      finalUrl: res.url
    };
  } catch (err) {
    clearTimeout(timer);
    return {
      url,
      status: 0,
      ok: false,
      error: err.name === 'AbortError' ? 'timeout' : err.message
    };
  }
}

async function checkAllLinks() {
  const links = [...new Set(
    Array.from(document.querySelectorAll('a[href]'))
      .map(a => a.href)
      .filter(href => href.startsWith('http'))
  )];

  const results = await Promise.all(links.map(url => checkLink(url)));
  const broken = results.filter(r => !r.ok);

  console.table(broken);
  return broken;
}

checkAllLinks();

const allLinkHrefs = Array.from(document.querySelectorAll('a[href]')).map(a => a.href);

const validHrefs = [...new Set(allLinkHrefs)].filter(href =>
  href &&
  !href.startsWith('mailto:') &&
  !href.includes('#')
);

console.log(`Checking ${validHrefs.length} unique links...`);

import { parseStringPromise } from 'xml2js';

async function checkSitemap(sitemapUrl) {
  const response = await fetch(sitemapUrl);
  const xmlData = await response.text();
  const result = await parseStringPromise(xmlData);
  const urls = result.urlset.url.map(entry => entry.loc[0]);

  const broken = [];

  for (const url of urls) {
    try {
      const res = await fetch(url, { method: 'HEAD' });
      if (res.status >= 400) {
        broken.push({ url, status: res.status });
      }
    } catch (error) {
      broken.push({ url, status: 0, error: error.message });
    }
  }

  console.log(`Checked ${urls.length} URLs, found ${broken.length} broken.`);
  return broken;
}

checkSitemap('https://example.com/sitemap.xml');