Getting We had some trouble connecting. Try again? after updating a view. Using EKS

[tusharwagh-mdsol]

Hi Team, Need some urgent help on slack bolt JS. I am developing a slack application where user can approve/reject tasks. Platform used to run this code is EKS.

Below is the code I am using to open a modal to provide comment for the action.

const { App } = require('@slack/bolt');
const axios = require("axios");

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,

});

(async () => {
  await app.start(process.env.PORT || 8080);
  console.log("⚡️ Bolt Task Viewer app is running!");
})();

// Handle selection of a pending task in the static select
app.action(
  { type: "block_actions", action_id: /^pending_task_action_(\d+)$/ },
  async ({ ack, body, client }) => {
    await ack();

    const selectedOption = body.actions[0].selected_option.value;
    const selectedApplicationId = body.actions[0].block_id;
    const userEmail = body.user.name + "@mdsol.com";

    try { 
      const selectedCategory = body.view.private_metadata;

      // Open a modal with a text input for reasonm
      await client.views.open({
        trigger_id: body.trigger_id,
        view: {
          type: "modal",
          callback_id: "reason_modal",
          private_metadata: JSON.stringify({
            selectedOption,
            selectedApplicationId,
            selectedCategory,
            userEmail,
          }),
          title: {
            type: "plain_text",
            text: ":wave: Please comment",
          },
          blocks: [
            {
              type: "input",
              block_id: "reason_input",
              element: {
                type: "plain_text_input",
                action_id: "reason",
                multiline: true,
              },
              label: {
                type: "plain_text",
                text: "Please provide comment for your action:",
              },
            },
          ],
          submit: {
            type: "plain_text",
            text: "Submit",
          },
        },
      });
    } catch (error) {
      console.error("Error handling pending task action:", error);
    }
  }
);

And to handle this comment I wrote below code.

// Handle submission of the reason modal
app.view('reason_modal', async ({ ack, body, view, client }) => {

  await ack({ response_action: "update", view: view})
  const viewId = view.id;
   // Open a quick loading modal
   await client.views.update({
    view_id: viewId,
    "response_action": "update",
    view: {
      type: "modal",
      title: {
        type: "plain_text",
        text: ":man-biking:Processing..",
      },
      blocks: [
        {
          type: "section",
          text: {
            type: "plain_text",
            text: ":hourglass_flowing_sand: Please wait while we process your request...",
          },
        },
      ], 
    },
  });
}
);

But getting an error as below.

[srajiang]

Hi @tusharwagh-mdsol, Your code mostly looks in order, but I notice that you are making your ack call in the handling for the view submission of reason_model by submitting view again, instead of the newly composed view. I'm wondering whether instead of calling the views update method, you instead pass the body of your new view.

[tusharwagh-mdsol]

Hi @srajiang, Thanks for the quick response. Yes in later part I realised that and I removed that and made only ack() But afterwards I am trying to open a new modal (After one API call) which will confirm if the task is completed or not and this is giving me the same error.

Please note I will need this aprovalresponse to compare the status received from api so I cannot make this api async.

Below is the code for the same.

// Handle submission of the reason modal
app.view('reason_modal', async ({ ack, body, view, client }) => {

  await ack()
  const viewId = view.id;
   // Open a quick loading modal
   await client.views.update({
    view_id: viewId,
    "response_action": "update",
    view: {
      type: "modal",
      title: {
        type: "plain_text",
        text: ":man-biking:Processing..",
      },
      blocks: [
        {
          type: "section",
          text: {
            type: "plain_text",
            text: ":hourglass_flowing_sand: Processing your request... ",
          },
        },
      ], 
    },
  });

  **//Making One api call here**

  // Ensure the post request is awaited
    const approvalResponse = await axios.post(approvalUrl, payload, {
      headers: {
        "Content-Type": "application/json",
        "x-api-key": process.env.X_API_KEY,
      },
    });

    **//Below Modal is returning same error.**

    // Update the modal with the final content
    await client.views.update({
      view_id: viewId,
      "response_action": "update",
      view: {
        type: "modal",
        callback_id: "modal-1",
        title: {
          type: "plain_text",
          text: "completed",
        },
        blocks: [
          {
            type: "section",
            block_id: "section-1",
            text: {
              type: "mrkdwn",
              text:"task is completed",
            },
          },
        ],
      },
    });

[srajiang]

Okay so in the latest code sample, you are acknowledging the request from slack ack but not including any response action in the acknowledgement.

It looks like the approach you are taking is to update the view after submission event via API (e.g. https://api.slack.com/surfaces/modals#updating_apis), but please note that response_action isn't a supported property for this method. https://api.slack.com/methods/views.update

Just a couple of troubleshooting questions:

• Confirm that the value of the view.id is the same value as the ID returned in the success response of your original views.open call?
• Can you try including a hash property in your views.update payload? https://api.slack.com/surfaces/modals#handling_race_conditions

Have you tried adding a hash field? See: https://tools.slack.dev/bolt-js/concepts/updating-pushing-views