Working Fine Preview, but errors shown in Live Site Event Monitor.

Discussion Ask a question
, ,
1

First of all, I’m a newbie who loves to discover coding by myself, I usually pretty shy to look for help, so I would go through the whole web to find my possible solution. But this issue has been bothering me and is beyond my troubleshoot skill & learning ability:

2570×628 62.8 KB

Details as below:

"root":{

"insertId":"..........E.0PZXwF05EdJ5WTHI8un3"
"timestamp":"2022-04-28T08:34:34.009Z"
"severity":"ERROR"

"namespace":"Velo"
"tenantId":"36177c99-db91-47a3-a4d6-233098593bdf"
"viewMode":"Site"
"revision":"1514"
}

"operation":{"id":"..........BnXx2wEr0CtuH5YBf_V89j"

"first":false
"last":false
}

"sourceLocation":{}

"jsonPayload":{"message":"There was an error in your script at Object.error (https://static.parastorage . com/services/wix-thunderbolt/dist/feature-telemetry-wix-code-sdk.ff326b11.chunk.min.js:1:9267) at eval (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:25:4967) at Array.map (<anonymous>) at runUserCode (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:25:4825) at eval (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:3:12830) at eval (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:3:13092) at Object.eval [as traceSync] (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:3:17507) at Object.createControllers (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:3:12549) at G.p.withReportingAndErrorHandling.appDefinitionId (https://www.grandpride . com/_partials/wix-thunderbolt/dist/clientWorker.8907dc00.bundle.min.js:6:77655) at Object.withReportingAndErrorHandling (https://www.grandpride . com/_partials/wix-thunderbolt/dist/clientWorker.8907dc00.bundle.min.js:6:238949)" } 

"receiveTimestamp":"2022-04-28T08:34:39.009Z" }

"root":{

"insertId":"..........I.0PZXwF05EdJ5WTHI8un3"
"timestamp":"2022-04-28T08:34:34.010Z"
"severity":"ERROR"

"namespace":"Velo"
"tenantId":"36177c99-db91-47a3-a4d6-233098593bdf"
"viewMode":"Site"
"revision":"1514"
}

"operation":{"id":"..........FnXx2wEr0CtuH5YBf_V89j"

"first":false
"last":false
}

"sourceLocation":{}

"jsonPayload":{"message":"TypeError: $w(...).onClick is not a function at https://bundler.wix-code . com/36177c99-db91-47a3-a4d6-233098593bdf/f9fabb25-08ff-45f6-9a70-acb010539005/a545c4ad-2d32-476b-9b5f-e397203f6754/pages/xyzzf.js?wix-data-as-namespace=true&replace-console=true&dependencies-token=3938:1:1857 at https://bundler.wix-code . com/36177c99-db91-47a3-a4d6-233098593bdf/f9fabb25-08ff-45f6-9a70-acb010539005/a545c4ad-2d32-476b-9b5f-e397203f6754/pages/xyzzf.js?wix-data-as-namespace=true&replace-console=true&dependencies-token=3938:1:3884 at eval (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:25:4930) at Array.map (<anonymous>) at runUserCode (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:25:4825) at eval (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:3:12830) at eval (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:3:13092) at Object.eval [as traceSync] (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:3:17507) at Object.createControllers (https://static.parastorage . com/services/wix-code-viewer-app/1.1479.523/app.js:3:12549) at G.p.withReportingAndErrorHandling.appDefinitionId (https://www.grandpride . com/_partials/wix-thunderbolt/dist/clientWorker.8907dc00.bundle.min.js:6:77655)" } 

"receiveTimestamp":"2022-04-28T08:34:39.009Z" }

After a few days of trouble shooting and testing, I found that this two errors randomly appears, with a 70% appearing in desktop (Windows, Chrome & Firefox), 10% on tablet (iPad).
Whenever this two errors appear, my buttons “#nextButton1” doesn’t works:

1381×1117 208 KB

This is my front end code:


import {byTheHour} from 'public/chauffeur.js';
import wixData from 'wix-data';
import {distance2} from 'backend/gapi';

function showOneWay() {
            $w('#secondText').text = `Where To?`;
            $w('#addressInput1').enable();
            $w('#addressInput1').show();
            $w('#byTheHourBox').disable();
            $w('#byTheHourBox').hide();
            $w("#nextButton1").expand();
}

function showByTheHour() {
            $w('#byTheHourBox').options = byTheHour;
            $w('#secondText').text = `Hire Duration`;
            $w('#byTheHourBox').enable();
            $w('#byTheHourBox').show();
            $w('#addressInput1').disable();
            $w('#addressInput1').hide();
            $w("#nextButton1").expand();
}

function showSlide2_Loading() {
    $w('#slideshow').changeSlide(1);
}

function showSlide3_Details() {
    $w('#slideshow').changeSlide(2);
    $w("#anchor2").scrollTo();
    $w("#columnStrip63").expand();
}

function showSlide4_Request() {
    $w('#slideshow').changeSlide(3);
    $w("#columnStrip63").collapse();
}

function showSlide5_Thanks() {
    $w('#slideshow').changeSlide(4);
}

function showBookingForSomeonBox() {
    $w("#box2").expand();
}

function calculateJourneyPrice_BeforeSlide3() {
    if ($w('#radioGroup1').value === 'ONE WAY') {
        let b = $w("#firstBox").value;
        let c = $w("#addressInput1").value;

        distance2(b.formatted, c.formatted)
        .then(function (resp) {
            let distanceInKM = parseFloat(resp.rows[0].elements[0].distance["text"]);
            let duration = resp.rows[0].elements[0].duration["text"];
            let miles = resp.rows[0].elements[0].distance["text"];
            // printing the result on the screen
            //$w("#result").value = distanceInKM;
            $w("#duration").value = duration;
            $w("#textboxMiles").value = miles;

            var vellfireJourneyPrice = vellfireHourly + (vellfirePerKM * distanceInKM);
            var alphardJourneyPrice = alphardHourly + (alphardPerKM * distanceInKM);
            var sclassJourneyPrice = sclassHourly + (sclassPerKM * distanceInKM);
            var bentaygaJourneyPrice = bentaygaHourly + (bentaygaPerKM * distanceInKM);
            var ghostJourneyPrice = ghostHourly + (ghostPerKM * distanceInKM);

            $w('#vellfireText1,#vellfireText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${vellfireJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
            $w('#alphardText1,#alphardText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${alphardJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
            $w('#mercedesSText1,#mercedesSText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${sclassJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
            $w('#bentaygaText1,#bentaygaText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${bentaygaJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
            $w('#ghostText1,#ghostText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${ghostJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
        });

    } else {
        let c = $w("#byTheHourBox").value;
        var vellfireJourneyPrice = vellfireHourly * Number(c);
        var alphardJourneyPrice = alphardHourly * Number(c);
        var sclassJourneyPrice = sclassHourly * Number(c);
        var bentaygaJourneyPrice = bentaygaHourly * Number(c);
        var ghostJourneyPrice = ghostHourly * Number(c);

        $w('#vellfireText1,#vellfireText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${vellfireJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
        $w('#alphardText1,#alphardText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${alphardJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
        $w('#mercedesSText1,#mercedesSText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${sclassJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
        $w('#bentaygaText1,#bentaygaText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${bentaygaJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
        $w('#ghostText1,#ghostText2').html = `<p style=text-align:left><span style="letter-spacing:0em;font-size:17px;font-family:wf_db45210f17be42e48bd460ac5">RM ${ghostJourneyPrice.toFixed(2)}  </span><span style="letter-spacing:0.04em;font-size:10px;font-family:wf_db45210f17be42e48bd460ac5">Prices including GST</span></p>`;
    }

    setTimeout(() => {
        showSlide3_Details();
        }, 4200);
}

  ///////// Chauffeur Price Formula
    // Hourly Price
    var vellfireHourly = 150;
    var alphardHourly = 200;
    var sclassHourly = 300;
    var bentaygaHourly = 800;
    var ghostHourly = 700;
    
    // Per KM Price
    var vellfirePerKM = 3.2;
    var alphardPerKM = 5;
    var sclassPerKM = 6;
    var bentaygaPerKM = 34;
    var ghostPerKM = 30;

    let b = $w("#firstBox").value;
    let c = $w("#addressInput1").value;

$w.onReady(function() {

    //// Choose One-Way or By Hours ////
    $w('#radioGroup1,#firstBox').onClick(() => {
        if ($w('#radioGroup1').value === 'ONE WAY') {
        showOneWay();
        }
        else {
        showByTheHour();
        }
    });

    //// SLIDE 1 VALIDATE SUBMIT ////
    $w('#nextButton1').onClick(()=>{console.log("Clicked")
        showSlide2_Loading();
        calculateJourneyPrice_BeforeSlide3();
    });

    //// SLIDE 3 VALIDATE SUBMIT ////
    $w('#slide3SubmitButton').onClick(() => {
        if (validateForm4()) {
            //showSlide4();
        } else {
            updateForm4Validation();
        }
    });

    //// SLIDE 4 VALIDATE SUBMIT ////
    $w('#slide4SubmitButton').onClick(() => {
        if (validateForm5()) {
            $w('#slideshow').changeSlide(4);
        } else {
            updateForm5Validation();
        }
    });
/*
    $w('#slide4SubmitButton').onClick(() => {
            $w('#slideshow').changeSlide(4);

    }); */

    $w('#backToSlide0Button').onClick(() => {
        $w('#slideshow').changeSlide(0);
        $w("#columnStrip63").collapse();
    });

})

function validateForm1() {
    if ($w('#radioGroup1').value === 'ONE WAY') {
        return $w('#radioGroup1').valid &&
        $w('#firstBox').valid &&
        $w('#addressInput1').valid;
    }

    else {
        return $w('#radioGroup1').valid &&
        $w('#firstBox').valid &&
        $w('#byTheHourBox').valid;
    }
}

function updateForm1Validation() {
    if ($w('#radioGroup1').value === 'ONE WAY') {
        $w('#radioGroup1').updateValidityIndication();
        $w('#firstBox').updateValidityIndication();
        $w('#addressInput1').updateValidityIndication();
    }

    else {
        $w('#radioGroup1').updateValidityIndication();
        $w('#firstBox').updateValidityIndication();
        $w('#byTheHourBox').updateValidityIndication();
    }
}

function validateForm4() {
        return $w('#dateInput').valid &&
        $w('#vehicleInput').valid &&
        $w('#firstNameInput').valid &&
        $w('#lastNameInput').valid &&
        $w('#contactInput').valid &&
        $w('#emailInput').valid &&
        $w('#passengerCountInput').valid;
}

function updateForm4Validation() {
        $w('#dateInput').updateValidityIndication();
        $w('#vehicleInput').updateValidityIndication();
        $w('#firstNameInput').updateValidityIndication();
        $w('#lastNameInput').updateValidityIndication();
        $w('#contactInput').updateValidityIndication();
        $w('#emailInput').updateValidityIndication();
        $w('#passengerCountInput').updateValidityIndication();
}

function validateForm5() {
        return $w('#dateInput').valid &&
        $w('#vehicleInput').valid &&
        $w('#firstNameInput').valid &&
        $w('#lastNameInput').valid &&
        $w('#contactInput').valid &&
        $w('#emailInput').valid &&
        $w('#passengerCountInput').valid;
}

function updateForm5Validation() {
        $w('#dateInput').updateValidityIndication();
        $w('#vehicleInput').updateValidityIndication();
        $w('#firstNameInput').updateValidityIndication();
        $w('#lastNameInput').updateValidityIndication();
        $w('#contactInput').updateValidityIndication();
        $w('#emailInput').updateValidityIndication();
        $w('#passengerCountInput').updateValidityIndication();
}

$w('#bookingForSomeoneCheckbox').onChange((event) => {
  if ($w('#bookingForSomeoneCheckbox').checked) {
    $w('#box2').expand();
    $w("#passengerFirstNameInput").required = true;
    $w("#passengerLastNameInput").required = true;
    $w("#passengerContactInput").required = true;

  } else {
    $w('#box2').collapse();
    $w("#passengerFirstNameInput").required = false;
    $w("#passengerLastNameInput").required = false;
    $w("#passengerContactInput").required = false;
  }
});

function submitForm() {
    //const numGuests = Number($w('#numGuestsInput').value);

    const formData = {
        oneWayOrByHour: $w('#radioGroup1').value,
        origin: $w('#firstBox').value,
        destination: $w('#addressInput1').value,
        hour: $w('#byTheHourBox').value,
        needDate: $w('#dateInput').value,
        firstName: $w('#vehicleInput').value,
        lastName: $w('#firstNameInput').value,
        contactNumber: $w('#contactInput').value,
        email: $w('#emailInput').value,
        numberOfPassenfer: $w('#passengerCountInput').value,
        flightNumberOption: $w('#flightNumberInput').value,
        nameBoardOption: $w('#nameboardInput').value,
        additionalRequirementOption: $w('#additionalInput').value,
        bookingForSomeoneElseOption: $w('#bookingForSomeoneCheckbox').value,
        passengerFirstName: $w('#passengerFirstNameInput').value,
        passengerLastName: $w('#passengerLastNameInput').value,
        passengerContactNumebr: $w('#passengerContactInput').value,
        finalPrice: $w('#price').value,
    };

    $w('#successMessage').hide();
    $w('#errorMessage').hide();
    wixData.insert('SubmittionOfChauffeur', formData).then(() => {
        $w('#successMessage').show();
    }).catch(() => {
        $w('#errorMessage').show();
    });
}

I believe it’s a simple error, but I couldn’t figure it out, would be great if any sempai or code ninja able to point out what had I done wrong, do let me know if any further details / a.k.a my velo code needed.
Thanks in advanced :slight_smile:

2

You’re using $w element selectors outside the $w.onReady scope.
For example:

 let b = $w("#firstBox").value;
 let c = $w("#addressInput1").value;

This breaks your code.
Move these lines to the $w.onReady block.

3

Appreciate that! That solved my issue completely! Thanks J.D. you’re hero!