title: TypeScript: Error inside Promise not being caught
body: <p>I am developing a SPFx WebPart using TypeScript.</p>
  <p>I have a function to get a team by name (get() returns also a promise):</p>
  <pre><code>  public getTeamChannelByName(teamId: string, channelName: string) {
      return new Promise&lt;MicrosoftGraph.Channel&gt;(async (resolve, reject) =&gt; {
        this.context.msGraphClientFactory
          .getClient()
          .then((client: MSGraphClient) =&gt;{
            client
              .api(`/teams/${teamId}/channels`)
              .filter(`displayName eq '${channelName}'`)
              .version(&quot;beta&quot;)
              .get((error, response: any) =&gt; {
                if ( response.value.length == 1) {
                  const channels: MicrosoftGraph.Channel[] = response.value;
                  resolve(channels[0]);
                } else if (response.value.length &lt; 1) {
                  reject(new Error(&quot;No team found with the configured name&quot;));
                } else {
                  reject(new Error(&quot;Error XY&quot;));
                }
              });
            })
          .catch(error =&gt; {
            console.log(error);
            reject(error);
          });
      });
    }
  </code></pre>
  <p>I call this function like this:</p>
  <pre><code>  public getConversations(teamName: string, channelName: string, messageLimitTopics: number = 0, messageLimitResponses: number = 0) {
      return new Promise&lt;any&gt;(async (resolve, reject) =&gt; {
        try {
          this.getTeamGroupByName(teamName)
            .then((teamGroup: MicrosoftGraph.Group) =&gt; {
              const teamId: string = teamGroup.id;
              this.getTeamChannelByName(teamId, channelName)
                .then((teamChannel: MicrosoftGraph.Channel) =&gt; {
                  const channelId: string = teamChannel.id;
                  this.getChannelTopicMessages(teamId, channelId, messageLimitTopics)
                    .then((messages: MicrosoftGraph.Message[]) =&gt; {
                      const numberOfMessages = messages.length;
                      ... // omitted
                    });
                });
            });
        } catch(error) {
          reject(error);
        }
      });
    }
  </code></pre>
  <p>And this <code>getConversations()</code> function itself is called from my webpart code:</p>
  <pre><code>  public getConversations() {
      if (this.props.teamName &amp;&amp; this.props.teamName.length &gt; 0 &amp;&amp;
          this.props.channelName &amp;&amp; this.props.channelName.length &gt; 0) {
        GraphService.getConversations(this.props.teamName, this.props.channelName, this.props.messageLimitTopics, this.props.messageLimitResponses)
            .then((conversations) =&gt; {
                .. // omitted
            })
            .catch((err: Error) =&gt; {
              console.log(err);
              this.setState({errorMessage: err.message});
            });
      } else {
        // Mandatory settings are missing
        this.setState({errorMessage: strings.MandatorySettingsMissing});
      }
    }
  </code></pre>
  <p>So, as you can see, above, I want to write out the error (message) I receive from the <code>reject</code> inside  the <code>getConversations()</code> functions. The problem is, that I don't receive this rejection with the error, but in the console I see the following:</p>
  <pre><code>Uncaught Error: No team found with the configured name
  </code></pre>
  <p>I added the <code>.catch()</code> blocks you see above inside <code>getTeamChannelByName()</code> but this doesn't get hit during debugging.</p>
  <p>Haven't worked much with promises and I am still confused a bit about them, so I guess that I probably have constructed the promise chain wrongly, maybe placed the catch block(s) in the wrong position(s)?</p>