使用Circuit SDK发送表单：提交事件正常但UI报错的原因咨询

Problem Description #

I'm using the Circuit SDK to send a form with buttons to a conversation using this code:

client.addTextItem(item.convId, { 
  content: 'Form test', 
  form: { 
    id: 'form123', 
    title: 'Form test', 
    controls: [{ 
      type: 'BUTTON', 
      name: 'fruit', 
      options: [
        { text: 'Apple', value: '1' }, 
        { text: 'Banana asd asd asd asdsa das asd', value: '2' }, 
        { text: "Strawberry", value: '3' }
      ] 
    }] 
  }
});

I've also subscribed to the formSubmission event to handle user selections:

client.addEventListener('formSubmission', function (event) { 
  var formData = event.form; 
  console.log(event); 
  console.log(formData); 
});

When I click a button in the bot conversation, the event fires as expected—here's the output:

{ 
  type: 'formSubmission', 
  itemId: '44469462-6d79-49ac-8439-3a1a57a9d6d2', 
  form: { id: 'form123', data: [ [Object] ] }, 
  submitterId: '81cb8c4d-2706-4c03-8d82-20081b9399e4' 
} 
{ id: 'form123', data: [ { name: 'fruit', value: '1' } ] }

However, the Circuit UI shows a top notification saying "An error occurred submitting the form." even though everything else works. Why is this happening?

Answer #

Great question! That error notification is a common gotcha when working with Circuit SDK forms—even though your formSubmission event is firing correctly, the Circuit UI needs an explicit signal that you've processed the submission successfully.

Why the error happens

Circuit's web UI expects an acknowledgment that the form submission was handled properly. When you send a form via the SDK and process submissions through the formSubmission event, the UI doesn't automatically know your bot has received and handled the data. Without that acknowledgment, it defaults to showing an error message, assuming something went wrong during submission.

How to fix it

All you need to do is call the acknowledge() method on the event object inside your listener. This tells the Circuit UI that the submission was processed successfully, and it will suppress the false error notification.

Here's your updated event listener code:

client.addEventListener('formSubmission', function (event) { 
  var formData = event.form; 
  console.log(event); 
  console.log(formData); 

  // Acknowledge the submission to clear the error notification
  event.acknowledge();
});

Once you add that line, the error message will disappear, and your form flow will work exactly as expected: your bot still receives the form data, and the user doesn't see any confusing error alerts.

内容的提问来源于stack exchange，提问作者Andrey Klenchischev