title: Why throwing an error inside a function called from another function breaks the angular app
body: <p>I have a function in my component which calls an API like that</p>
  
  <pre><code>async func1() {
      this.isLoading = true;
      try {
        await this.api.callToApi();
      } catch (ex) {
        console.log(ex);
      }
    }
  </code></pre>
  
  <p>inside the API the function <code>callToApi</code> is defined as follows</p>
  
  <pre><code>try {
        // make a call to API and return result
      } catch (ex) {
        this.handleError(ex);
      }
  </code></pre>
  
  <p>and then the function <code>handleError</code></p>
  
  <pre><code>async handleError(er: any) {
        throw er;
    }
  </code></pre>
  
  <p>My problem is that when I make a call to the api from <code>func1</code> and then there is some error, then the function <code>handleError</code> throws the error and the <code>func1</code> doesn't catch it and thus, the whole app breaks. From my understanding, after throwing error in <code>handleError</code> then this error should be propagated to the called, in this case <code>func1</code>. Why is this not the case?</p>
  
  <p>Please note that I have only shown related code and that I can make it work as needed by removing the whole <code>try-catch</code> block from the <code>callToApi</code> function and don't use <code>handleError</code> at all but that is not the point.</p>
  
  <p>Edit1: To clarify what I want here is that I want the catch block from <code>func1</code> to be <strong>activated</strong>. </p>
  
  <p>It would look something like this:</p>
  
  <pre><code>func1()
  --&gt; callToApi()
  ----&gt; handleError() (on error propagate it back to func1)
  </code></pre>
  
  <p>Edit2: To clear confustion, the reason I have <code>handleError</code> at all is because there may be multiple errors which I need to handle inside it. However, there is 1 specific error which must be propagated back to func1 to handle it there. Is this going to be possible at all?</p>