Bolt-js: Getting started interactive message example does not work.

[sfroestl]

Description

Hey!
First, thanks for the great project. 🚀

I've tried the getting started interactive message example but I can't make it work so that the button_click listener is invoked. See the code here https://github.com/sfroestl/bolt-example/blob/master/src/app.js
I've configured both Interactive Components and Events API of my slack app to point to /slack/events.
The message listener works fine.

https://slack.dev/bolt/tutorial/getting-started

What type of issue is this?

• [x] bug

Requirements

• [x] I've read and understood the Contributing guidelines and have done my best effort to follow them.
• [x] I've read and agree to the Code of Conduct.
• [x] I've searched for any related issues and avoided creating a duplicate issue.

---

Bug Report

Filling out the following details about bugs will help us solve your issue sooner.

Reproducible code in:

https://github.com/sfroestl/bolt-example

package version: 1.0.0

node version: v10.15.1

OS version(s): MacOs 10.14.4

Steps to reproduce:

1. Clone repo https://github.com/sfroestl/bolt-example and $ npm i && npm start
2. Enter slack and send the bot a message with "Hi".
3. Click button.

Expected result:

Callback to be executed.

app.action('button_click', ({ action, say }) => {
  say(`@{action.user} clicked the button`);
});

Actual result:

The handler is not executed

Thanks a lot for your help!

[aoberoi]

I've been able to reproduce this issue with a simple button block action. Here is my code:

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

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

app.message('hello', ({ say }) => {
  say({
    blocks: [{
      type: 'section',
      text: {
        type: 'mrkdwn',
        text: 'You can add a button alongside text in your message. ',
      },
      accessory: {
        type: 'button',
        action_id: 'foo',
        text: {
          type: 'plain_text',
          text: 'Button',
          emoji: true,
        },
        value: 'click_me_123',
      },
    }],
  });
});

app.action('foo', ({ ack }) => {
  console.log('action listener called');
  ack();
});

(async () => {
  const server = await app.start(process.env.PORT || 3000);
  console.log('⚡️ Bolt app is running!', server.address());
})();

Here is the output:

⚡️ Bolt app is running! { address: '::', family: 'IPv6', port: 3000 }
[ERROR]   { Error: An incoming event was not acknowledged before the timeout. Ensure that the ack() argument is called in your listeners.
    at receiverAckTimeoutError (/Users/ankur/Developer/play/bolt-demos/first-release/node_modules/@slack/bolt/dist/ExpressReceiver.js:167:19)
    at Timeout.setTimeout [as _onTimeout] (/Users/ankur/Developer/play/bolt-demos/first-release/node_modules/@slack/bolt/dist/ExpressReceiver.js:39:32)
    at ontimeout (timers.js:436:11)
    at tryOnTimeout (timers.js:300:5)
    at listOnTimeout (timers.js:263:5)
    at Timer.processTimers (timers.js:223:10) code: 'slack_bolt_receiver_ack_timeout_error' }

Notice that the action listener called output never appears.

---

We had an issue with block action (or interactive message) detection. Specifically, the incoming action (potentially a block action, interactive message, dialog submission, or message action) is supposed to go through the following function, which is supposed to detect whether its of the two types we're trying to identify. In this case, this detection gives us the wrong answer.

https://github.com/slackapi/bolt/blob/1ed27bbfbf2bd196723aafeccdf299e6b26f4bac/src/App.ts#L481-L485

The action property that its checking should be actions.

This is the kind of issue that TypeScript's typechecker is supposed to help us ensure that it doesn't happen. It's the reason we went through a lot of effort to write types for all these objects. However, in this case we defeated ourselves by leaving many objects "open ended", using the StringIndexed interface in places where we weren't sure if there would be additional properties added later.

I'm starting to think that we should remove StringIndexed from usages that make it easy to shoot ourselves in the foot (like this one). I've got a PR to share shortly.

[shaydewael]

We just published v1.0.1 which should fix this @sfroestl 🎉

[sfroestl]

Great work @shanedewael, @aoberoi. Much appreciated! I saw you also fixed the body.user.id in the acknowledge sample code. 👍

app.action('button_click', ({ body, ack, say }) => {
  // Acknowledge the action
  ack();
  say(`<@${body.user.id}> clicked the button`);
});

[i-break-codes]

@sfroestl wow... thank you..

@shaydewael you guys should really consider upgrading the documentation. Just spent 3 hours trying to figure out how do I get the user details in the action payload. Had hacked it out by attaching the user id I found from the command via context until I came across the body import.

[MattB543]

@sfroestl

@i-break-codes

I also just spent an hour trying to get the user that clicked a button, couldn't see any documentation that showed how to get the payload of the block_action, only the payload of the action which doesn't have the user data. Maybe I missed it, it's possible, but this comment just saved me 🙏

[stevengill]

@MattB543 sorry about that! You are totally right that we don't have a section in our docs for this. We hope to add some reference docs to tackle this soon. We do have a section in the readme for it over at https://github.com/slackapi/bolt-js#making-things-happen