Route Transition Error

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('standalone');
  this.route('parent', function() {
    this.route('child');
  });
});

export default Router;

routes.parent.child.js

import Ember from 'ember';
import somethingAsync from '../../utils/something-async';

export default Ember.Route.extend({
  model() {
    // WORKS: Only transition error:
    // return Ember.RSVP.Promise.reject();
    
    // DOESN'T WORK 2.0+: Throws additional error.
    // Works in 1.13.
    // Appears to have autorun in scope, is the default error handler.
    return somethingAsync('child', 'reject');
  }
});

routes.parent.js

import Ember from 'ember';
import somethingAsync from '../utils/something-async';

export default Ember.Route.extend({
  model() {
    return somethingAsync('parent', 'resolve');
  }
});

routes.standalone.js

import Ember from 'ember';
import somethingAsync from '../utils/something-async';

export default Ember.Route.extend({
  model() {
    // DOESN'T WORK: Same story as parent.child.
    return somethingAsync('standalone', 'reject');
  }
});

templates.application.hbs

<h1>Route Transition Error</h1>
<p>Currently inside of a route transition which has a promise rejection it rethrows the error from the default handler. This can results in errors during tests where rejecting a promise doesn't imply actually reaching an error state. The behavior has changed in the 2.X series and is also different based upon how the promise is rejected (immediate vs. later).</p>

<h2>Test #1</h2>

<p>Open your console and then visit these two routes. Notice that both of them throw two errors. Modify twiddle.json to notice that this is not the bahavior in 1.13</p>
<ul>
  <li>{{#link-to 'standalone'}}Standalone{{/link-to}}</li>
  <li>{{#link-to 'parent.child'}}Child{{/link-to}}</li>
</ul>

<h2>Test #2</h2>

<p>Reset twiddle.json to 2.X and modify routes/parent/child.js to instead return the immediately rejected promise. You'll notice that only one error is thrown.</p>

<ul>
  <li>{{#link-to 'parent.child'}}Child{{/link-to}}</li>
</ul>

<h2>Conclusion</h2>

<p>Something is fishy.</p>
<ol>
  <li>We need to decide what the "correct" behavior should be.</li>
  <li>Once that is decided I can implement it.</li>
</ol>

{{outlet}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  }
}

utils.something-async.js

import Ember from 'ember';

export default function somethingAsync(label, resolution) {
  return new Ember.RSVP.Promise(function(resolve, reject) {
    console.log(label, 'invoked');
    setTimeout(() => {
      console.log(label, resolution);
      if (resolution === 'resolve') { resolve('success'); }
      if (resolution === 'reject') { reject('error'); }
    }, 2000);
  });
}