502 Bad Gateway (Reasons)

Question:
When I click the box in the repeater I call some functions and reason for that when I click this box it changes the section of course. And every data is connected to a database with code and in database datas are all arrays when I click box it’s increase or decrease the number currentSection and arrays index is connected to currentSection number in this way I can go next section just change a number from frontend and call it again. But problem is when I click these boxes too fast it gives me 502 bad gateway error for 1-2 minute.

Database:

What is the reason for that? (Is because of calling functions too fast or because of the what functions do)

And how can I optimize this and resolve this problem.

This is the repeater code.

function setupSectionRepeater() {
    $w("#sectionRepeater").data = courseContents.sectionTitle;
    setupRepeater();

    function setupRepeater() {
        $w("#sectionRepeater").onItemReady(($item, itemData, index) => {
            $item("#sectionTitleRepeater").text = itemData.title

            $w("#sectionRepeater").forEachItem(($item, itemData, index) => {
                if (index === currentSection) {
                    $item("#styleBoxRepeater").style.backgroundColor = "#00A5FF"
                } else {
                    $item("#styleBoxRepeater").style.backgroundColor = "#80D2FF"
                }
            })

            $item("#styleBoxRepeater").onClick((event) => {
                currentSection = index;
                reloadData("bypass");
            })
        })
    }
}

And here is the reloadData() function

async function reloadData(bypass) {
    if (bypass) {
        await getUserData();
        await setupUserDatas();
        await setupSectionRepeater();
        await setupPageFundamental();
        await setupGiftAndCertificate();
        await disableButtons(); //this side will be called
    } else {
        await getUserData();
        await setupUserDatas();
        await setupSectionRepeater();
        await setupPageFundamental();
        await setupGiftAndCertificate();
        await checkVideoDuration();
        await disableButtons();
    }
}

And here is the functions that called by reloadData() function

function getUserData() {
    return wixData.query("academyUserDatas")
        .eq("userId", userId)
        .eq("courseId", courseId)
        .find()
        .then((data) => {
            return userData = data.items[0]
        })
}
function setupUserDatas() {
    let statusImages = {
        "certificateImage": 'wix:image://v1/510eca_a3b8082dd72a4118a8fd9eb085b103e9~mv2.png/sertifika-al%C4%B1nmam%C4%B1%C5%9F.png#originWidth=128&originHeight=128',
        "certificatedImage": 'wix:image://v1/510eca_c47008f8a5c143228d540d38a73475ec~mv2.png/sertifika-al%C4%B1nm%C4%B1%C5%9F.png#originWidth=128&originHeight=128',
        "certificateReady": 'wix:image://v1/510eca_5f0a3c3e326544d8b09a3a029da078e5~mv2.png/sertifika-al%C4%B1nmaya-haz%C4%B1r.png#originWidth=128&originHeight=128',
        "giftImage": 'wix:image://v1/510eca_6ae6cbc6a4d0420cb4bde3ad423d736c~mv2.png/hediye-al%C4%B1nmam%C4%B1%C5%9F.png#originWidth=128&originHeight=128',
        "giftedImage": 'wix:image://v1/510eca_e0e7b9721d834db3819d26bc51f8a228~mv2.png/hediye-al%C4%B1nm%C4%B1%C5%9F.png#originWidth=128&originHeight=128',
        "giftReady": 'wix:image://v1/510eca_cbdf556e381d42e4935b3620796b7e21~mv2.png/hediye-al%C4%B1nmaya-haz%C4%B1r.png#originWidth=128&originHeight=128'
    }

    $w("#completePercentageSlider").value = userData.completedPercentage;
    $w("#sectionStatus").text = `${courseContents.sectionVideo.length} Bölüm %${userData.completedPercentage.toFixed(0)} Tamamlandı!`

    if (userData.certificated === true) {
        $w("#certificatedImage").src = statusImages.certificatedImage;
    } else {
        if (userData.completedPercentage >= 100) {
            $w("#certificatedImage").src = statusImages.certificateReady;
        } else {
            $w("#certificatedImage").src = statusImages.certificateImage;
        }
    }

    if (userData.gifted === true) {
        $w("#giftedImage").src = statusImages.giftedImage;
    } else {
        if (userData.completedPercentage >= 100) {
            $w("#giftedImage").src = statusImages.giftReady;
        } else {
            $w("#giftedImage").src = statusImages.giftImage;
        }
    }
}

function setupSectionRepeater() {
    $w("#sectionRepeater").data = courseContents.sectionTitle;
    setupRepeater();

    function setupRepeater() {
        $w("#sectionRepeater").onItemReady(($item, itemData, index) => {
            $item("#sectionTitleRepeater").text = itemData.title

            $w("#sectionRepeater").forEachItem(($item, itemData, index) => {
                if (index === currentSection) {
                    $item("#styleBoxRepeater").style.backgroundColor = "#00A5FF"
                } else {
                    $item("#styleBoxRepeater").style.backgroundColor = "#80D2FF"
                }
            })

            $item("#styleBoxRepeater").onClick((event) => {
                currentSection = index;
                reloadData("bypass");
            })
        })
    }
}

function setupPageFundamental() {
    $w("#headerTitle").text = `${currentCourse.courseTitle} | ${courseContents.sectionTitle[currentSection].title} | ${currentSection + 1}. Bölüm`
    $w("#sectionTitle").text = courseContents.sectionTitle[currentSection].title
    $w("#courseVideo").src = courseContents.sectionVideo[currentSection]
    $w("#downloadSources").link = courseContents.sectionSources[currentSection]
    $w("#downloadSources").target = "_blank"
    $w("#notesText").text = courseContents.sectionNote[currentSection]
}

function setupGiftAndCertificate() {
    let percentage = userData.completedPercentage;
    let gift = userData.gifted;

    if (percentage >= 100) {
        $w("#certificatedImage").onClick((event) => {
            let data = {
                "courseId": courseId,
                "courseTitle": currentCourse.courseTitle
            }

            wixWindow.openLightbox("Academy Certificate", data)
                .catch((err) => {
                    console.error("Err:", err)
                })
        })
    }

    if (percentage >= 100 && gift != true) {
        $w("#giftedImage").onClick((event) => {
            let data = {
                "courseId": courseId
            }

            wixWindow.openLightbox("Academy Gift", data)
                .catch((err) => {
                    console.error("Err:", err)
                })
        })
    }
}

function disableButtons() {
    if (currentSection === courseContents.totalSectionCount - 1) {
        $w("#goNext").hide()
    } else {
        $w("#goNext").show()
    }

    if (currentSection === 0) {
        $w("#goBack").hide()
    } else {
        $w("#goBack").show()
    }
}

You can use a debounce which will avoid the same routine repeatedly being called too quickly. Something like this (not tested):

$item("#styleBoxRepeater").onClick((event) => {
    if (debounceTimer) {
       clearTimeout(debounceTimer);
       debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
       currentSection = index;
       reloadData("bypass");
    }, 500);
})

Do you think 750ms is okay for that?

@loeix Not sure, you’ll need to play with it. Probably depends on how heavy the called function is.

Not even sure it will solve your problem. You might need to make this one routine which determines which element was clicked. See Retrieve Repeater Item Data When Clicked .

@yisrael-wix I will try to create new function to call just needed things also I will add timeout. I don’t need repeater Item Data because it’s connected to a part of database with .data API so it will not work for me

1 Like

I think I fixed it @yisrael-wix I added 750ms timer (same code that you wrote) and there was no, not needed things I just removed .data() API it was doing it again and again (no need it’s just for one time) and that’s all after this it’s working very good now no errors or bugs I really try hard tested it clicked every button but there was no problem.

1 Like