topic Issue with Custom Module Fetching "Member Spotlight" Data on Belong.naifa.org in CMS Development

Issue with Custom Module Fetching "Member Spotlight" Data on Belong.naifa.org

soorajvtrio — Mon, 28 Apr 2025 06:00:06 GMT

On the website https://belong.naifa.org, the "Member Spotlight" section located above the footer is sometimes not loading properly.

We've developed a custom module that fetches data from : https://members.naifa.org/member-spotlights, but occasionally it displays an error message (please see the attached screenshot).

Here the code that we have used in the custom module:

const url = "https://api.allorigins.win/raw?url=" + encodeURIComponent("https://members.naifa.org/member-spotlights");

fetch(url)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const events = doc.querySelectorAll(".main-box");

if (events.length === 0) {
loader.innerHTML = "<p>No spotlight content available.</p>";
return;
}

spotlightContainer.innerHTML = "";

events.forEach((event, index) => {
if (index >= 3) return;

const image = event.querySelector(".hs_cos_wrapper img")?.src || "";
let strongs = event.querySelectorAll("p strong");
let name = strongs[0]?.innerHTML || "";
let subtitle = strongs.length > 1 ? strongs[1].innerHTML : "";

let title = `<span class="name">${name}</span><span class="subtitle">${subtitle}</span>`;

let anchor = event.querySelector("a[href*='member-spotlight']");
let link = "#";
if (anchor) {
let rawHref = anchor.getAttribute("href") || "#";
try {
link = new URL(rawHref, "https://at.naifa.org").href;
} catch (err) {
console.warn("Invalid link:", rawHref);
}
}

spotlightContainer.innerHTML += `
<div class="article-card">
<div class="article-image">
<img src="${image}" alt="${name}">
</div>
<div class="article-text">
<h2>${title}</h2>
<a href="${link}" class="read-more" rel="noopener">Read More →</a>
</div>
</div>
`;
});

loader.style.display = "none";
spotlightContainer.style.display = "flex";
})
.catch(error => {
console.error('Error loading spotlight content:', error);
loader.innerHTML = '<p>Spotlight content is currently unavailable. Please check back later.</p>';
});
});
</script>

Could you please help in resolving this issue.

Re: Issue with Custom Module Fetching "Member Spotlight" Data on Belong.naifa.org

Jaycee_Lewis — Mon, 28 Apr 2025 17:13:58 GMT

Hey, @soorajvtrio 👋 Thanks for your post and for including your details. This one is tough to troubleshoot. I'd like to offer a few high-level suggestions and troubleshooting steps. Hopefully, this will help get you unstuck and give our community members more information.

Suggestions:

Implement Content Caching

store successfully fetched content in `localStorage` with an expiration time
fall back to cached content when new fetches fail
to provide a better experience during temporary outages

Error Handling

add timeouts to prevent indefinite loading states

CORS issues

do we have any way to know if the allorigins.win service experiencing reliability issues
Serverless functions might be a more reliable proxy

Troubleshooting:

Check Browser Console

is there anything unexpected or interesting here when the content fails to load?

Patterns

does the error occur at specific times of day?
is it happening on particular browsers or devices?

Validate

has the source page structure at members.naifa.org has changed?
can you manually navigate to the source page works when the error occurs?

Remember that with community troubleshooting, providing more details about when and how the error occurs will help others provide more targeted assistance.

Talk soon! — Jaycee

Re: Issue with Custom Module Fetching "Member Spotlight" Data on Belong.naifa.org

nickdeckerdevs1 — Mon, 05 May 2025 14:04:02 GMT

Adding the code here in a code block so that it is readable

<div class="spotlight-wrapper"> <div class="spotlight-title">Member Spotlights</div> <div id="loader" class="loader"> <div class="spinner"></div> </div> <div id="spotlight-list" class="article-cards spotlights-container" style="display: none;">  </div> </div> <script> document.addEventListener("DOMContentLoaded", function () { const spotlightContainer = document.getElementById('spotlight-list') const loader = document.getElementById('loader') const url = "https://api.allorigins.win/raw?url=" + encodeURIComponent("https://members.naifa.org/member-spotlights") fetch(url) .then(response => response.text()) .then(html => { const parser = new DOMParser() const doc = parser.parseFromString(html, "text/html") const events = doc.querySelectorAll(".main-box") if (events.length === 0) { loader.innerHTML = "<p>No spotlight content available.</p>" return } spotlightContainer.innerHTML = "" events.forEach((event, index) => { if (index >= 3) return const image = event.querySelector(".hs_cos_wrapper img")?.src || "" let strongs = event.querySelectorAll("p strong") let name = strongs[0]?.innerHTML || "" let subtitle = strongs.length > 1 ? strongs[1].innerHTML : "" let title = `<span class="name">${name}</span><span class="subtitle">${subtitle}</span>` let anchor = event.querySelector("a[href*='member-spotlight']") let link = "#" if (anchor) { let rawHref = anchor.getAttribute("href") || "#" try { link = new URL(rawHref, "https://at.naifa.org").href } catch (err) { console.warn("Invalid link:", rawHref) } } spotlightContainer.innerHTML += ` <div class="article-card"> <div class="article-image"> <img src="${image}" alt="${name}"> </div> <div class="article-text"> <h2>${title}</h2> <a href="${link}" class="read-more" rel="noopener">Read More →</a> </div> </div> ` }) loader.style.display = "none" spotlightContainer.style.display = "flex" }) .catch(error => { console.error('Error loading spotlight content:', error) loader.innerHTML = '<p>Spotlight content is currently unavailable. Please check back later.</p>' }) }) </script>

Re: Issue with Custom Module Fetching "Member Spotlight" Data on Belong.naifa.org

nickdeckerdevs1 — Mon, 05 May 2025 14:18:27 GMT

Unfortunatly we can't determine what the acutal error is..

You would need to understan the error that is being ouput from the fetch call -- you can debug this in the console in dev tools, you could also add the following to your catch to improve what you need to look at.

console.error('Error details:') console.log(error) console.log('message') console.log(error.message) console.log('name') console.log(error.name) console.log('stack') console.log(error.stack) console.log('url') console.log(url) console.log('new Date().toISOString()') console.log(new Date().toISOString())

Depending on the error, you may want to have it retry if there is an error -- so having some sort of variable for calls made to the api

If this is just some random failure, it might be worth counting the errors, and recalling the function to fetch the data. That would take some reworking of your code to make it so that the functions are seperated out....

let me know how else I can help and where you are getting stuck at

Re: Issue with Custom Module Fetching "Member Spotlight" Data on Belong.naifa.org

nickdeckerdevs1 — Mon, 05 May 2025 14:24:16 GMT

All the code below is AI generated, making sure to include the console errors in it after three attempts. I'd review the code before implementing, but basically what it is doing is trying every 800ms and checkint to see if teh max retries have happened, if after the three attempts happens, then it reports the error to the screen and the error details to the console

You will only be able to understand what the actual error is if you are on the page when the error happens

<div class="spotlight-wrapper"> <div class="spotlight-title">Member Spotlights</div> <div id="loader" class="loader"> <div class="spinner"></div> </div> <div id="spotlight-list" class="article-cards spotlights-container" style="display: none;">  </div> </div> <script> document.addEventListener("DOMContentLoaded", function () { const spotlightContainer = document.getElementById('spotlight-list') const loader = document.getElementById('loader') const delay = ms => new Promise(resolve => setTimeout(resolve, ms)) async function fetchWithRetry(url, maxRetries = 3, delayMs = 800) { let lastError for (let attempt = 1; attempt <= maxRetries; attempt++) { try { const response = await fetch(url) return await response.text() } catch (error) { lastError = error if (attempt < maxRetries) { await delay(delayMs) } } } throw lastError } async function loadSpotlights() { const url = "https://api.allorigins.win/raw?url=" + encodeURIComponent("https://members.naifa.org/member-spotlights") try { const html = await fetchWithRetry(url) const parser = new DOMParser() const doc = parser.parseFromString(html, "text/html") const events = doc.querySelectorAll(".main-box") if (events.length === 0) { loader.innerHTML = "<p>No spotlight content available.</p>" return } spotlightContainer.innerHTML = "" events.forEach((event, index) => { if (index >= 3) return const image = event.querySelector(".hs_cos_wrapper img")?.src || "" let strongs = event.querySelectorAll("p strong") let name = strongs[0]?.innerHTML || "" let subtitle = strongs.length > 1 ? strongs[1].innerHTML : "" let title = `<span class="name">${name}</span><span class="subtitle">${subtitle}</span>` let anchor = event.querySelector("a[href*='member-spotlight']") let link = "#" if (anchor) { let rawHref = anchor.getAttribute("href") || "#" try { link = new URL(rawHref, "https://at.naifa.org").href } catch (err) { console.warn("Invalid link:", rawHref) } } spotlightContainer.innerHTML += ` <div class="article-card"> <div class="article-image"> <img src="${image}" alt="${name}"> </div> <div class="article-text"> <h2>${title}</h2> <a href="${link}" class="read-more" rel="noopener">Read More →</a> </div> </div> ` }) loader.style.display = "none" spotlightContainer.style.display = "flex" } catch (error) { console.error('Error details:') console.log(error) console.log('message') console.log(error.message) console.log('name') console.log(error.name) console.log('stack') console.log(error.stack) console.log('url') console.log(url) console.log('new Date().toISOString()') console.log(new Date().toISOString()) console.error('Error loading spotlight content:', error) loader.innerHTML = '<p>Spotlight content is currently unavailable. Please check back later.</p>' } } loadSpotlights() }) </script>

Re: Issue with Custom Module Fetching "Member Spotlight" Data on Belong.naifa.org

Jaycee_Lewis — Tue, 06 May 2025 16:06:16 GMT

Thank you @nickdeckerdevs1 🙌 — Jaycee

Re: Issue with Custom Module Fetching "Member Spotlight" Data on Belong.naifa.org

soorajvtrio — Thu, 08 May 2025 03:34:20 GMT

Hi @nickdeckerdevs1 , thanks for the updated code. I’ll test the code and let you know how it goes. Appreciate your support!