I have an embedded Typeform that request users data, the script will call an external lambda function to execute the logic and reroute them to a specific url based on slug in the response. The issue is some of the TypeForm submissions were not triggering the onSubmit callback. I added this clause to see if Typeform has any response data but it’s NOT being called: 

else {

console.error('No typeform response ID or form ID');

// call the cloud function to log the error

await callCloudFunction({typeform_response_id: typeformResponseId, typeform_form_id: formId});

}

I know my set up is mostly correct because 90% of the submissions are behaving correctly. And, all of the submissions with this issue were the first time submissions. I am wondering if anyone has experienced similar issue and if there’s a way to fix it.

Thank you!

The code looks like this:

<script src="//embed.typeform.com/next/embed.js"></script>
<script>
	async function callCloudFunction(inputData) {
    const functionUrl =
      "https://external-function-call.domain";
    try {
      const response = await fetch(functionUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(inputData),
      });

      const responseData = await response.json();
      return responseData;
    } catch (error) {
      console.error("Error calling Cloud Function:", error);
    }
  }

  function redirectToUrl(url) {
  	window.location.href = url;
  }

  async function onTypeformSubmit(data) {

    const typeformResponseId = data.responseId;
   	const formId = data.formId;

    if (typeformResponseId && formId) {
        document.getElementById('typeform-form-block').style.display = 'none';
        document.getElementById('loader').style.display = 'flex';

        const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
        const maxRetries = 2;
        let retries = 0;

        await delay(3000);

        while (retries < maxRetries) {
          try {
            const responseData = await callCloudFunction({typeform_response_id: typeformResponseId, typeform_form_id: formId});

            if (responseData.slug) {
              redirectToUrl(`REDIRECT_URL/events/${responseData.slug}`);
              return;
            }

            if (responseData.error && responseData.error_code === "invalid_typeform_response") {
              retries++;
              if (retries < maxRetries) {
                await delay(1000); // Wait 1 second before retrying
                continue;
              }
            }

            // If we reach here, no slug was found after all retries
            console.log('No slug found');
            document.getElementById('loader').style.display = 'none';
            document.getElementById('typeform-form-block').style.display = 'block';
            return;
          } catch (error) {
            console.error("Error in onTypeformSubmit:", error);
            document.getElementById('loader').style.display = 'none';
            document.getElementById('typeform-form-block').style.display = 'block';
            break;
          }
        }
    } else {
      console.error('No typeform response ID or form ID');
      // call the cloud function to log the error
      await callCloudFunction({typeform_response_id: typeformResponseId, typeform_form_id: formId});
    }
  }
</script>