Component usage on live pages

[vasgurug]

Hi Team,

Is there any way to extract the all the  components report which used on only live pages no test pages from author. In  AEM provides an option to see the component details  under tools -->components which provides live usage for each component based on sling resource type of the component. but is there any way to extract complete report for all components and pages? looked ACS-commons also but there are extracting all but only from author not from live usage 

[arunpatidar · Accepted solution]

Hi @vasgurug 
Please check 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/component-report-acs-aem-c...

I had to write a temporary javscript for me, and ran from browser console.

function checkLiveUsage(url, componentName) {
  return new Promise((resolve, reject) => {
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4) {
        if (this.status == 200) {
          // Convert responseText to DOM to query `tr` elements
          let parser = new DOMParser();
          let doc = parser.parseFromString(this.responseText, 'text/html');
          let pageList = doc.querySelectorAll('tr[data-foundation-collection-item-id]');

          // Extract page URLs from the `data-foundation-collection-item-id` attribute
          let pages = Array.from(pageList).map((row) => row.getAttribute('data-foundation-collection-item-id'));
          
          if (pages.length > 0) {
            console.log(`Pages where ${componentName} is used:`, pages);
            resolve(pages);
          } else {
            console.log(`No usage found for ${componentName}`);
            resolve([]);
          }
        } else {
          console.error(`Error fetching URL: ${url} - Status: ${this.status}`);
          reject(this.status);
        }
      }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
  });
}

// The domain URL
const domain = "http://localhost:14502/mnt/overlay/wcm/core/content/sites/components/details/liveusage.0.40.html";

// A delay (in ms) between each request to avoid overloading the server
const DELAY = 1000;

// Get the list of components to check for
const checkArr = getComponentList();

// Array to hold promises
let promises = [];

// Iterate over each component and check its usage
checkArr.forEach((componentName, index) => {
  setTimeout(() => {
    let url = `${domain}${componentName}`;
    
    // Add the check to the promises array
    promises.push(checkLiveUsage(url, componentName));
  }, index * DELAY); // Use index to space out requests over time
});

// When all checks are complete, log the results
Promise.all(promises)
  .then((results) => {
    let allPages = results.flat(); // Flatten the results to get a combined list of all pages
    console.log('All pages where components are used:', allPages);
  })
  .catch((error) => {
    console.error('An error occurred while checking usage:', error);
  });

// Function to get the list of components
function getComponentList() {
  return [
    "/apps/aemlab/oneweb/components/accordion",
    "/apps/aemlab/oneweb/components/text",
    // Add more components as needed
  ];
}