Debugging Ember Concurrency tasks

An Ember Concurrency task will be cancelled if the component it lives on is ever un-rendered. This can lead to unexpected bugs in tasks that send out actions that cause their components to be destroyed.

For example, the flash message in the deletePost task will never be displayed since the {{confirm-delete-post}} component is destroyed as soon as a post has been deleted.

{{#if postToDelete}}
  {{confirm-delete-post
    on-delete=(action (mut postToDelete) null)
    on-cancel=(action (mut postToDelete) null)
    post=postToDelete}}
{{/if}}

import Component from '@ember/component';
import { task, timeout } from 'ember-concurrency';
import { inject as service } from '@ember/service';

export default Component.extend({
  post: null,

  'on-delete'() {},
  'on-cancel'() {},

  flashMessages: service(),

  deletePost: task(function*() {
    let post = this.get('post');

    yield post.destroyRecord();
    this.get('on-delete')();

    yield timeout(1000);
    this.get('flashMessages').success('Post successfully deleted!');
  })
});

Since these bugs can be hard to track down, Ember Concurrency ships with a debug modifier that will alert you if when a task is cancelled before completing.

To turn this on, call .debug() on your task definition.

deletePost: task(function*() {
  // ...  
}).debug()