Debugging Ember Concurrency tasks

Use the debug modifier to find out why a task isn't running.


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}}
    on-delete=(action (mut postToDelete) null)
    on-cancel=(action (mut postToDelete) null)
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();

    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*() {
  // ...  

👋 Hey there, Ember dev!

We hope you enjoyed this free video 🙂

If you like it and want to keep learning with us, we've written a free 6-lesson email course about the fundamental patterns of modern component design in Ember.

To get the first lesson now, enter your best email address below:

You can also check out more details about the course by clicking here.


Send us a tweet:

Or ask us in Inside EmberMap, our private Slack workspace for subscribers.