I am developing an application that integrates with Slack using the @slack/web.js library to send messages with interactive components, specifically buttons that trigger actions like showing or hiding table rows. Recently, I encountered an issue where clicking the button resulted in a dispatch_failed error with the message “This app responded with status code 403”. Despite having correctly set up my Express server and ensured that my Slack app has the necessary permissions and scopes, I continue to face this issue.
Despite having correctly set up my Express server and ensured that my Slack app has the necessary permissions and scopes, I continue to face this issue.
Additionally, I have ensured that I added the** interactivity request URL** as “http://localhost:5000/view-submission” in my Slack app settings under the Interactivity section. However, despite this configuration, I still encounter the dispatch_failed error when attempting to handle button clicks.
also i have allowed the “command” and other required scope in oAuth& permission section
NOTE : I am(bot creator) but not a admin of workspace but bot has a access to send message.
is there any extra premission is need to be grant from workspace admin for interactvity request UR L
error in network tab of browser console :
{
“ok”: false,
“error”: “dispatch_failed”,
“message”: “This app responded with status code 403”
}
Code :
const webClient = new WebClient(
"xoxb-bot-token"
);
const initialMessage = {
channel: <ChannelID>,
text: "Table Data",
blocks: [
{
type: "section",
text: {
type: "mrkdwn",
text: "*Table Data*",
},
},
...createTableRows(tableData.slice(0, 5)),
{
type: "actions",
elements: [
{
type: "button",
text: {
type: "plain_text",
text: "Show More",
emoji: true,
},
action_id: "show_more",
},
],
},
],
};
function createTableRows(data) {
return data.map((item) => ({
type: "section",
fields: [
{
type: "mrkdwn",
text: `*${item.name}*`,
},
{
type: "plain_text",
text: `${item.age}`,
emoji: true,
},
],
}));
}
async function updateMessage(messageTs, showAll) {
const message = {
channel: <ChannelID>,
ts: messageTs,
blocks: [
{
type: "section",
text: {
type: "mrkdwn",
text: "*Table Data*",
},
},
...createTableRows(showAll ? tableData : tableData.slice(0, 5)),
{
type: "actions",
elements: [
{
type: "button",
text: {
type: "plain_text",
text: showAll ? "Show Less" : "Show More",
emoji: true,
},
action_id: showAll ? "show_less" : "show_more",
},
],
},
],
};
try {
const result = await webClient.chat.update(message);
console.log("Message updated successfully");
} catch (error) {
console.error(error);
}
}
app.post("/render-table-data", async (req, res) => {
try {
await webClient.chat.postMessage(initialMessage);
res.status(200).send("Message sent to Slack");
} catch (error) {
console.error(error);
res.status(500).send("Error sending message to Slack");
}
});
// Route to handle interactions
app.post("/view-submission", async (req, res) => {
const payload = JSON.parse(req.body.payload);
console.log("payload", payload);
const action = payload.actions[0];
if (action.action_id === "show_more" || action.action_id === "show_less") {
const showAll = action.action_id === "show_more";
await updateMessage(payload.message.ts, showAll);
res.status(200).send({ success: true });
} else {
res.status(400).send("Invalid action");
}
});
please confirm that is there specific permission need to be granted from the admin for interactivity request URL working ?
Tejas Thombare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.