Question T10901
Visible to All Users

Problem with multiple events in parallel?

created 2 years ago (modified 2 years ago)

We use Survey.js component in our application. This is how we use it:

JavaScript
const survey = new Model(surveyJson); const Home = () => { // More codes useEffect(() => { survey.set('name', customer.name); }, [customer]); const onCurrentPageChanged = () => { // Code to handle the event }; const onCompleting = () => { // Code to handle the event // Make API request to the backend. }; <Survey model={survey} onCurrentPageChanged={onCurrentPageChanged} onCompleting={onCompleting} /> };

We are passing the data from the Survey component to our backend through API. We have experienced few cases where we have sent duplicate data for 2 different forms at the same time to backend. One set of data from a form that was filled out by the user hours before and the other set of data from a new session / form from the same user. It seems like the old form data has not been cleared out and that we somehow are triggering multiple events with two different sets of data. This is a critical issue for us as we are dealing with different customer data, and end up mixing those and sending customer data to the wrong customer.

We suspect that a reason for this could be that the survey variable is defined as a global variable. Could that be the reason, or could it be something else? Do you see any issues with the code snippet above? Is there a way to make sure we always have maximum one event and not having multiple events in parallel?

Answers approved by surveyjs Support

created 2 years ago

Hello,
How and where do your store your data? If you have a client id, then before running a new survey for the same customer you have to tell your customer that she has already executed the survey or show her previous entered data. It is up to you and your business logic.

Thank you,
Andrew
SurveyJS Team

    Comments (2)

      Thanks for the reply.

      This is the flow and how we store/load data:

      1. User search on a customer ID to load the customer details from backend. Any previous redux is cleared. Backend response with customer details as well as any previously answered questions
      2. Store the data from backend in Redux, and pass the data to SurveyJS with survey.setValue (survey is a global variable)
      3. We update Redux and backend on onCurrentPageChanged event, if any changes are made by the user.
        4.onCompleting triggered when user completes the Survey. Backend updated. If backend response is successful, method survey.clear is used

      In one specific scenario, the admin user loaded customer A and worked on it. This user did not complete the Survey. It either failed or timed out at some point. Few hours later the same admin user loaded Customer B. When filling out the form for Customer B, the app was sending 2 API calls for each onCurrentPageChanged and OnCompleting, for both Customer A and B. For some reason, the previous unfinished session was still in the memory.

      We suspect that the app somehow have triggered multiple events with two different sets of data, one which should have been cleared/replaced. We have tried to reproduce this issue by rerendering pages with different events but could not reproduce it.

      This bug has happened several times for our users. Do you have any recommendations or suggestions on how to avoid this?

        Hello,
        When you are talking about session, what "session" do you mean? Do you mean client?
        The issue is strange indeed.
        So you have customerId stored in survey as a value in survey.data.
        On loading customer B, you set survey.data with survey responses filled by customer B and then call survey.setValue("customerId", customerBValue);.
        Do you have any triggers in the survey? You may need to call "survey.clear" function before setting the data.
        Some events on setting data and setValue will be called. Do you do anything onValueChanged event or others?

        Thank you,
        Andrew
        SurveyJS Team