TransitionAborted when performing a full route transition with changed query params

[skoryky]

Why does a TransitionAborted error get thrown when performing a full route transition when changing query params?

I am working off of the "Opt-in to full transition via refresh()" example provided at the bottom of the query parameters Ember guide (http://emberjs.com/guides/routing/query-params/).

The only change I made was to log errors:

Ember.RSVP.configure('onerror', function(error) {
  Ember.Logger.assert(false, error);
});

Here is an updated JS Bin: http://jsbin.com/kinajoginedo/1/edit?console,output

If you click the "Change it" button, you'll see a TransitionAborted error thrown in the console.

I've been trying to upgrade Ember in my app from 1.7.0-beta.1+canary for some time now, but many of my QUnit tests fail when I run them all together. Most of my tests are fine if I run them in isolation. I suspect the TransitionAborted errors may be causing the test failures. However, I'm not sure if TransitionAborted exceptions are normal when performing full transitions. If anyone can confirm one way or the other, that would be very helpful in getting to the root cause of my problems, whatever they might be.

[wagenet]

@machty thoughts?

[mewben]

I'm having this problem too...

[rhinon]

Hi guys, any update on this issue? Anything more we can provide?

[Keoven]

same here -- I'm getting this error

[elidupuis]

I am also seeing this error. It's worth noting that RSVP's configure method is deprecated, however the result is the same using RSVP.on.

Ember.RSVP.on('error', function(error) {
  Ember.Logger.assert(false, error);
});

[skoryky]

Is this error materially affecting your guys' apps or just your tests?

[elidupuis]

I'm seeing it in my main app. I was just testing it out—and based on this error I've just taken it out and moved on for now.

[thedoktor]

I am also seeing this TransitionAborted error being reported for some users via our error tracking service after adding

Ember.RSVP.on('error', function(error) {
  Ember.Logger.assert(false, error);
});

It seems to be triggered by a route whose model is being updated every 2 seconds.

[skoryky]

I did some investigating, and it looks like the second call to fireQueryParamsDidChange in getTransitionByIntent (transitionByIntent in my copy of Ember.js 1.7.1) in the router.js library causes the TransitionAborted error (the first call is made in the queryParamsTransition call earlier in the function):

https://github.com/tildeio/router.js/blob/03810a915789549c4798c8eeb7d23e64b9789c75/lib/router/router.js#L64

When I comment out that line, my app seems to work normally and without errors. Seemed like a bug to me, as transitionByIntent is notifying of query param changes twice. However, the second call was implemented by @raytiley for a specific reason:

tildeio/router.js@9a07446

I'm not entirely sure I understand the reason, but is it duplicating the behavior of setting refreshModel to true?

My QUnit tests failing was due to something else entirely (was setting a query param to null in the route deactivate callback, which caused the next test to fail while a transition due to the query param change was attempted).

[mutewinter]

Experiencing this on Ember 1.8.1.

Edit

I can confirm that commenting the line mentioned by @skoryky fixes the problem.

[shripathee]

In my case I have to change multiple query params. I am still getting the console errors even after commenting out the line as suggested by @skoryky . However, other than the console errors, the app is behaving as it should.
JSBin: http://jsbin.com/kekowabazi/1/edit
Ember version: 1.8.1

[skoryky]

@shripathee, I also encountered your issue. Turns out the fireQueryParamsDidChange callback is called once for each query param you set to refreshModel: true. I'm not really sure when you'd want that kind of behavior (instead of a single notice that any query param changed), so I replaced the queryParams options hash with:

actions: {
  queryParamsDidChange: function() {
    this.refresh();
  }
}

[shripathee]

@skoryky Yes, this works pretty fine. Thank you.

[kamalaknn]

I am also facing this issue,

[axsuul]

Can also confirm this on 1.8.1 as well in a situation where I have multiple query params having set like

queryParams:
    page:
      refreshModel: true
    query:
      refreshModel: true

[voltidev]

I'm seeing the same error.

[jspavlick]

I'm also having this issue. (Ember 1.9.0) Only on refreshModel: true though. refreshModel: false does not cause the error. Doesn't seem to be fatal, though.

[UmaSarma]

I'm also facing the same issue. Any updates?

[wagenet]

I'm putting this on the agenda for our next core team meeting.

[btecu]

I'm running into this issue with Ember 1.11.0-beta.4. Updates?

[gorandev]

Facing this issue too. It only bugs me because it gets logged as an error -- works fine otherwise (I'm doing pagination and the pages change and everything works fine).

EDIT: using Ember 1.7.0

[tim-evans]

Seeing this on 1.11.0-beta.1+canary.26c1084c.

[r4m]

I'm facing this issue to and as @gorandev it is only logged but it does not compromise the app flow.
A workaround can be:

      Ember.RSVP.on 'error', (error) ->
        if error && error.message == "TransitionAborted"
          return

[tim-evans]

Hmm...

This is the behavior that I'm trying to implement (which I'm not able to do at the moment):

A user can type (normally) in a search box, which refreshes the model of a route. Currently, if I swallow the TransitionAborted errors, the typing UI doesn't respond well and will replace the text box with the finished transition. I would prefer to discard requests that pile up rather than wait for them to resolve.

export default Ember.Route.extend({
  queryParams: {
    q: { replace: true, refreshModel: true },
    sort: { replace: true, refreshModel: true },
    filter: { replace: true, refreshModel: true }
  },

  model: function(params) {
     return this.store.find('user', params);
  }
}

[richmolj]

Looks like @piotrze's Ember.run.once solution worked for me on Ember 1.13, but no longer works on 2.2

[gerry3]

@richmolj the @r4m workaround above still works on 2.2

[izelnakri]

Please reopen this issue. It still occurs on Ember 2.6 when the queryParams have refreshModel: true

[medokin]

Ember 2.7

queryParamsDidChange fires multiple time even if nothing has changed, thats why I additionally compare old and new queryParams values.

    queryParamsDidChange: function(a,b) {
      // Compare to prevent refresh if nothing has changed
      if(
        a.page === b.page &&
        a.selectionId === b.selectionId &&
        a.sort === b.sort &&
        a.sortDirection === b.sortDirection
      ){
        return;
      }

      Ember.run.next(this, 'refresh');
    }

[jesseditson]

FYI - still seeing this in 2.8.1, I worked around it by debouncing the refresh calls - here's a Mixin that you can add to routes that use refreshModel: true:

import Ember from 'ember';

/**
 * Debounce Refresh
 * Ember routes with queryParams that have refreshModel double-trigger a refresh:
 * see: https://github.com/emberjs/ember.js/issues/5566
 *
 * Mix this in to routes that define queryParams[param].refreshModel to avoid the TransitionAborted error thrown when double-triggering refreshes.
 */
export default Ember.Mixin.create({
  refreshDebounceThreshold: 100,
  _lastRefresh: null,
  _doRefresh() {
    if (this._lastRefresh) {
      this._lastRefresh();
      this._lastRefresh = null;
    }
  },
  refresh() {
    this._lastRefresh = this._super.bind(this, ...arguments);
    Ember.run.debounce(this, '_doRefresh', this.get('refreshDebounceThreshold'));
  }
});

[supersabillon]

@jesseditson thanks for the Mixin. There's one issue, when you change the query params of a route, transition to a different page, and then come back to the page with the query params the refresh happens again and causes the error.

[jesseditson]

@supersabillon ah, when resuming with "sticky" QPs? I've disabled those in the app I'm using, I wonder if that's why I didn't come across that case.

[vlascik]

still happening in 2.11.0-beta.2.

[denzo]

Yes, is still happening to me also in 2.10.0 :(

[aaxelb]

Was this silently fixed in 2.12.0? (commit cee49a3)

[wagenet]

@aaxelb not intentionally, but possibly it did fix it. Is the behavior correct in 2.12?

[rwjblue]

I reproduced the JSBin (with current Ember versions) and it does indeed seem to be fixed.

https://jsbin.com/cajiji/edit?html,js,output

closing....

[cluis13915]

This error is throwing too on doing this in a route:

return this.transitionTo(my_route)

Removing return keyword, fix it.

[cadeParade]

This was happening to me in a test only, specifically after upgrading tests to the new(ish) RFC. As @cesarluis13915 said, removing return before a transitionTo fixed my test.

[enspandi]

Occured in our project with the Ember 3.11.1 upgrade.
return this.replaceWith(null, id); makes the test fail with TransitionAborted
this.replaceWith(null, id); succeeds 🤷‍♂️

[KalachevDev]

#18177 is this the same?

[allthesignals]

I'm seeing this appear in error tracking service, Sentry

[wagenet]

@rwjblue ping

[mehulkar]

Ran into this in 3.11.1. Re-opened in #18416 with a repro. Was able to workaround with @skoryky's solution (thanks!), except that queryParamsDidChange isn't an action now, it's just a method.