Slack Bolt JS应用更新模态框时遇连接错误求助

问题场景 #

开发支持任务审批/拒绝的Slack Bolt JS应用，提交评论模态框后，先将模态框更新为加载状态，调用API后再次更新模态框显示任务完成，此时出现错误提示："Getting We had some trouble connecting. Try again?"。由于需要根据API返回状态处理审批响应，无法异步执行API调用。

核心原因 #

Slack要求视图提交的处理逻辑必须在3秒内完成。原代码中先执行await ack()确认提交，再执行耗时的API调用，此时Slack已经认为会话处理完成，后续的views.update会因为上下文超时失败，触发连接错误。

修复方案 #

使用Slack的**延迟响应（defer）**机制，通过ack返回response_action: "defer"告诉Slack需要延长处理时间，同时在ack中直接返回加载状态的视图更新，后续API调用完成后再执行最终的视图更新。

修正后的代码 #

// Handle submission of the reason modal
app.view('reason_modal', async ({ ack, body, view, client }) => {
  // 第一步：返回延迟响应，同时更新为加载状态
  await ack({
    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... "
          }
        }
      ]
    }
  });

  const viewId = view.id;
  // 执行API调用
  try {
    const approvalResponse = await axios.post(approvalUrl, payload, {
      headers: {
        "Content-Type": "application/json",
        "x-api-key": process.env.X_API_KEY
      }
    });

    if (approvalResponse.status === 200) {
      // API调用成功后，更新模态框为完成状态
      await client.views.update({
        view_id: viewId,
        view: {
          type: "modal",
          callback_id: "modal-1",
          title: {
            type: "plain_text",
            text: "Action Update!"
          },
          blocks: [
            {
              type: "section",
              block_id: "section-1",
              text: {
                type: "mrkdwn",
                text: "task is completed"
              }
            }
          ]
        }
      });
    }
  } catch (apiError) {
    // 处理API调用失败的情况，更新模态框提示错误
    await client.views.update({
      view_id: viewId,
      view: {
        type: "modal",
        title: {
          type: "plain_text",
          text: "Action Failed!"
        },
        blocks: [
          {
            type: "section",
            text: {
              type: "mrkdwn",
              text: "Failed to process your request, please try again later."
            }
          }
        ]
      }
    });
    console.error("API call failed:", apiError);
  }
});

关键修改点 #

1. 替换直接ack为延迟响应：通过ack({ response_action: "update", ... })一次性完成确认和加载视图更新，避免会话超时。
2. 添加错误捕获：处理API调用失败的情况，及时更新模态框提示用户，提升体验。
3. 移除冗余参数：views.update不需要response_action参数，该参数仅用于ack响应中。

额外注意事项 #

• 确保API调用的耗时尽量控制在合理范围内，即使使用延迟响应，Slack也不会无限等待（建议不超过30秒）。
• 测试时可以在API调用处添加日志，确认响应时间是否过长，必要时优化API性能。

内容的提问来源于stack exchange，提问作者Tushar Wagh