title: SOLVED: Getting onTurnError when sending adaptive card to MS Teams using Bot Framework SDK 4
body: <p>I'm developing a bot using <strong>Bot Framework SDK 4</strong> with <strong>Node.js</strong> as an <strong>MS-Teams</strong> app. The bot is properly registered in Azure but hosted locally with Ngrok forwarding for testing purposes.</p>
  <p>The goal of the bot is to do external requests to an api and then populate an adaptive card template from the response of the api for a more engaging interface than text.</p>
  <p>This template was created with the Adaptive Card Designer, where it rendered just fine. Testing the bot with the Emulator works too. Same with the Web Chat channel, <strong>see screenshots</strong>.
  However when installed in teams, the card is not shown and an error is thrown.</p>
  <p><a href="https://i.stack.imgur.com/Th3HQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Th3HQ.png" alt="Emulator Output" /></a></p>
  <p><a href="https://i.stack.imgur.com/Xjnkp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xjnkp.png" alt="WebChat Output" /></a></p>
  <p><strong>The Errors I get when chatting in Teams:</strong></p>
  <ul>
  <li>Instead of the card, I get a message &quot;The bot encountered an error or bug. To continue to run this bot, please fix the bot source code.&quot; This is thrown by adapter.onTurnError, which is integrated in all Microsoft samples, which this bot is based on too.</li>
  <li>In the console where the bot is running it says: &quot;[onTurnError] unhandled error: Error: Unknown&quot;.</li>
  <li>In the channel overview on Azure there appears a timestamp and the message: &quot;Unknown&quot; for the Teams channel.</li>
  </ul>
  <p>All other dialog and messages work just fine, this error just happens when I send the adaptive card as an attachment to an activity.</p>
  <p>Next I'll paste some code snippets to give some context to what I tried to do</p>
  <p><strong>The template I created:</strong></p>
  <pre><code>{
      &quot;type&quot;: &quot;AdaptiveCard&quot;,
      &quot;$schema&quot;: &quot;https://adaptivecards.io/schemas/1.2.0/adaptive-card.json&quot;,
      &quot;version&quot;: &quot;1.2&quot;,
      &quot;contentType&quot;: &quot;application/vnd.microsoft.card.adaptive&quot;,
      &quot;speak&quot;: &quot;not set&quot;,
      &quot;body&quot;: [
          {
              &quot;type&quot;: &quot;ColumnSet&quot;,
              &quot;columns&quot;: [
                  {
                      &quot;type&quot;: &quot;Column&quot;,
                      &quot;width&quot;: &quot;auto&quot;,
                      &quot;items&quot;: [
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;size&quot;: &quot;Large&quot;,
                              &quot;text&quot;: &quot;${title}&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;
                          }
                      ]
                  },
                  {
                      &quot;type&quot;: &quot;Column&quot;,
                      &quot;width&quot;: &quot;stretch&quot;,
                      &quot;items&quot;: [
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;text&quot;: &quot;${type}&quot;,
                              &quot;color&quot;: &quot;Accent&quot;,
                              &quot;height&quot;: &quot;stretch&quot;,
                              &quot;fontType&quot;: &quot;Default&quot;,
                              &quot;size&quot;: &quot;Large&quot;,
                              &quot;weight&quot;: &quot;Lighter&quot;
                          }
                      ]
                  },
                  {
                      &quot;type&quot;: &quot;Column&quot;,
                      &quot;width&quot;: &quot;stretch&quot;,
                      &quot;items&quot;: [
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;text&quot;: &quot;Private&quot;,
                              &quot;horizontalAlignment&quot;: &quot;Right&quot;,
                              &quot;height&quot;: &quot;stretch&quot;,
                              &quot;size&quot;: &quot;Large&quot;,
                              &quot;color&quot;: &quot;Warning&quot;,
                              &quot;$when&quot;: &quot;${$root.private == '1'}&quot;
                          }
                      ]
                  }
              ]
          },
          {
              &quot;type&quot;: &quot;TextBlock&quot;,
              &quot;spacing&quot;: &quot;None&quot;,
              &quot;text&quot;: &quot;Created: {{DATE(${createdUtc},SHORT)}}&quot;,
              &quot;isSubtle&quot;: true,
              &quot;size&quot;: &quot;Small&quot;,
              &quot;weight&quot;: &quot;Lighter&quot;,
              &quot;wrap&quot;: true,
              &quot;$when&quot;: &quot;${$root.createdSet == '1'}&quot;
              
          },
          {
              &quot;type&quot;: &quot;ColumnSet&quot;,
              &quot;columns&quot;: [
                  {
                      &quot;type&quot;: &quot;Column&quot;,
                      &quot;width&quot;: &quot;auto&quot;,
                      &quot;items&quot;: [
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;text&quot;: &quot;Creator&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;color&quot;: &quot;Accent&quot;
                          },
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;text&quot;: &quot;${creator.name}&quot;,
                              &quot;wrap&quot;: true,
                              &quot;spacing&quot;: &quot;None&quot;
                          }
                      ],
                      &quot;spacing&quot;: &quot;Medium&quot;
                  },
                  {
                      &quot;type&quot;: &quot;Column&quot;,
                      &quot;width&quot;: &quot;auto&quot;,
                      &quot;items&quot;: [
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;text&quot;: &quot;Assignee&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;color&quot;: &quot;Accent&quot;
                          },
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;wrap&quot;: true,
                              &quot;spacing&quot;: &quot;None&quot;,
                              &quot;text&quot;: &quot;${$root.assignee.name}&quot;
                          }
                      ],
                      &quot;spacing&quot;: &quot;Medium&quot;
                  },
                  {
                      &quot;type&quot;: &quot;Column&quot;,
                      &quot;width&quot;: &quot;auto&quot;,
                      &quot;spacing&quot;: &quot;Medium&quot;,
                      &quot;items&quot;: [
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;text&quot;: &quot;Priority&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;color&quot;: &quot;Accent&quot;
                          },
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;text&quot;: &quot;${priority}&quot;,
                              &quot;wrap&quot;: true,
                              &quot;spacing&quot;: &quot;None&quot;
                          }
                      ]
                  },
                  {
                      &quot;type&quot;: &quot;Column&quot;,
                      &quot;width&quot;: &quot;auto&quot;,
                      &quot;spacing&quot;: &quot;Medium&quot;,
                      &quot;items&quot;: [
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;color&quot;: &quot;Accent&quot;,
                              &quot;text&quot;: &quot;Status&quot;
                          },
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;text&quot;: &quot;${status}&quot;,
                              &quot;wrap&quot;: true,
                              &quot;spacing&quot;: &quot;None&quot;
                          }
                      ]
                  },
                  {
                      &quot;type&quot;: &quot;Column&quot;,
                      &quot;width&quot;: &quot;stretch&quot;,
                      &quot;items&quot;: [
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;text&quot;: &quot;Due Date&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;color&quot;: &quot;Accent&quot;
                          },
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;text&quot;: &quot;{{DATE(${dueUTC},SHORT)}}&quot;,
                              &quot;wrap&quot;: true,
                              &quot;spacing&quot;: &quot;None&quot;
                          }
                      ],
                      &quot;spacing&quot;: &quot;Medium&quot;,
                      &quot;$when&quot;: &quot;${$root.status!= 'Done' &amp;&amp; ${$root.dueSet == '1'}}&quot;
                  },
                  {
                      &quot;type&quot;: &quot;Column&quot;,
                      &quot;width&quot;: &quot;stretch&quot;,
                      &quot;items&quot;: [
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;text&quot;: &quot;Done Date&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;color&quot;: &quot;Accent&quot;
                          },
                          {
                              &quot;type&quot;: &quot;TextBlock&quot;,
                              &quot;weight&quot;: &quot;Bolder&quot;,
                              &quot;text&quot;: &quot;{{DATE(${doneUTC},SHORT)}}&quot;,
                              &quot;wrap&quot;: true,
                              &quot;spacing&quot;: &quot;None&quot;
                          }
                      ],
                      &quot;spacing&quot;: &quot;Medium&quot;,
                      &quot;$when&quot;: &quot;${$root.status== 'Done' &amp;&amp; ${$root.doneSet == '1'}}&quot;
                  }
              ],
              &quot;spacing&quot;: &quot;Small&quot;,
              &quot;separator&quot;: true
          },
          {
              &quot;type&quot;: &quot;TextBlock&quot;,
              &quot;text&quot;: &quot;${description}&quot;,
              &quot;wrap&quot;: true,
              &quot;separator&quot;: true
          }
      ],
      &quot;actions&quot;: [
          {
              &quot;type&quot;: &quot;Action.OpenUrl&quot;,
              &quot;title&quot;: &quot;View&quot;,
              &quot;url&quot;: &quot;${viewUrl}&quot;
          }
      ]
      
  }
  </code></pre>
  <p><strong>I populate the template variables like this in my issueCardGenerator class:</strong></p>
  <p>(&quot;issue&quot; is an object containing information I'd like to send to the user as an adaptive card.
  &quot;issueCard&quot; is a reference to the json template. The specifics on how I parse the information does not matter too much here. &quot;translate&quot; for example translates some enum's of the issue object to natural language.)</p>
  <pre><code>generateIssueCard(issue){
          //render card
          var template = new Template(issueCard);
              
          var cardPayload = template.expand({
              $root: {
                  title: issue.title==null ? &quot;No Title available&quot; : issue.title,
                  description: issue.description==null ? &quot;&quot;: issue.description, 
                  creator: {
                      name: issue.creator==null ? &quot;Not Set&quot; : issue.creator.username 
                  },
                  assignee: {
                      name: issue.assignee==null ? &quot;Not Set&quot; : issue.assignee.username 
                  },
                  type: issue.type==null ? &quot;&quot; : this.translate(issue.type.value),
                  status: issue.status==null ? &quot;No Status&quot; : this.translate(issue.status.value),
                  priority: issue.priority==null ? &quot;No Priority&quot; : this.translate(issue.priority.value),
  
                  //only display times when they are set
                  dueSet: issue.due_date==null ? &quot;0&quot; : &quot;1&quot;,
                  doneSet: issue.done_date==null ? &quot;0&quot; : &quot;1&quot;,
                  createdSet: issue.created==null ? &quot;0&quot; : &quot;1&quot;,
  
                  //convert time format
                  dueUtc: issue.due_date==null ? &quot;No Due Date&quot; : moment(issue.due_date).format('YYYY-MM-DD')+'T06:08:39Z',
                  createdUtc: issue.created==null ? &quot;No Creation Time&quot; : moment(issue.created).format('YYYY-MM-DD')+'T06:08:39Z',
                  doneUtc: issue.done_date==null ? &quot;No Done Date&quot; : moment(issue.done_date).format('YYYY-MM-DD')+'T06:08:39Z',
  
                  viewUrl: &quot;https://www.some-url.com&quot;,
                  private: issue.private==null ? &quot;0&quot; :issue.private
              }
           });
  
          var adaptiveCard = new AdaptiveCard();
          adaptiveCard.parse(cardPayload);
          return(CardFactory.adaptiveCard(adaptiveCard))
  
      }
  </code></pre>
  <p><strong>And then send it like this in my dialog-step, which is part of a waterfall dialog:</strong></p>
  <p>(The user inputs an &quot;idInput&quot; to sepcify the id of the issue which is then requested and saved in &quot;issue&quot;)</p>
  <pre><code>async summaryStep(stepContext) {
  
      const idInput = stepContext.result;
      if (idInput) {
          var issue;
  
          //do request and set issue variable here. This works fine and shows proper in the logs
          issue= await this.doRequest(url,accessToken,&quot;GET&quot;);
          
          var cardGenerator=new IssueCardGenerator();
  
          var activity= {
              text: 'This is your requested issue with the id ' +idInput +': ',
              attachments: [cardGenerator.generateIssueCard(issue)]
          }
  
          await stepContext.context.sendActivity(activity);
  
      }
      return await stepContext.endDialog();
  </code></pre>