'Index out of range' error when transitioning between routes #10343

kimroen · 2015-02-02T21:39:59Z

The most common error in our Ember application is this one, which presumably happens when the user transitions out of one of our routes. This happens often in production, but much rarer in development, which tells me it might be due to the number of elements in the array(?).

I thought maybe it was this bug: #9278, but it still happens with the newest version of Ember (v1.9.1).

I don't have a reliable way of triggering the error, I just have to switch back and forth a lot.

Here is a stack trace:

Error while processing route: product Index out of range Error: Index out of range
    at new Error (native)
    at Error.r (https://pam.no/assets/vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:7:26)
    at Array.s.default.f.create.removeAt (https://pam.no/assets/vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:10:31342)
    at M.removedItem (https://pam.no/assets/vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:10:11031)
    at Object.m.flushChanges (https://pam.no/assets/vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:10:4481)
    at Object.m.itemPropertyDidChange (https://pam.no/assets/vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:10:4126)
    at Object.m.createPropertyObserver.e.observer (https://pam.no/assets/vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:10:2031)
    at _ (https://pam.no/assets/vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:8:7181)
    at f (https://pam.no/assets/vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:7:2509)
    at v (https://pam.no/assets/vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:7:27420)vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:9 wvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:9 Q.errorvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:9 Cvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 lvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 i.triggervendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 (anonymous function)vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 yvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 bvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 gvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 dvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:10 (anonymous function)vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 r.invokeWithOnErrorvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 r.flushvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 n.flushvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 o.endvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 o.runvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:7 lvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:17 yt.extend.ajax.Ember.RSVP.Promise.s.successvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:2 J.Callbacks.cvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:2 J.Callbacks.h.fireWithvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:3 rvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:3 J.ajaxTransport.X.cors.e.crossDomain.send.tXMLHttpRequest.send (async)vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:3 J.ajaxTransport.X.cors.e.crossDomain.sendvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:3 J.extend.ajaxvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:17 yt.extend.ajaxvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 _vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 hvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:17 yt.extend.ajaxvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:17 yt.extend.findvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:16 $vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:18 Ember.Object.extend.fetchRecordvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:18 rvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:18 Ember.Object.extend._flushPendingFetchForTypevendor-9f8fee9a7deaea9585c549a5c2cddb91.js:7 h.forEach.tvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:7 c.forEachvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:7 h.forEachvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:18 Ember.Object.extend.flushAllPendingFetchesvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 r.invokeWithOnErrorvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 r.flushvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 n.flushvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 o.endvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 o.runvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:7 lwebclient-7cb8831e571b29c1360aa0fb53e1aa73.js:4 u.extend.modelvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:8 _vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:8 rvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:9 U.extend.deserializevendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 pvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:13 n.runSharedModelHookvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 a.getModelvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 rvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 yvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 bvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:14 gvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:10 (anonymous function)vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 r.invokeWithOnErrorvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 r.flushvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 n.flushvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 o.endvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 o.runvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:4 o.joinvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:7 l.joinvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:12 d.default.y.extend._bubbleEventvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:12 (anonymous function)vendor-9f8fee9a7deaea9585c549a5c2cddb91.js:2 J.event.dispatchvendor-9f8fee9a7deaea9585c549a5c2cddb91.js:2 J.event.add.g.handlevendor-9f8fee9a7deaea9585c549a5c2cddb91.js:23 e.bugsnag

I'm not sure where to start looking with this one.

The text was updated successfully, but these errors were encountered:

e00dan · 2015-02-03T00:18:17Z

I had same issue. I loaded my Status objects, sorted them, displayed them using components and then when I changed route I had Index out of range error. I'm not sure how I solved this. This had to do with ArrayProxy in my case if I remember good.

kimroen · 2015-02-03T09:49:20Z

Going over and re-doing everywhere we're using an ArrayController is certainly a potential way forward in my particular case.

e00dan · 2015-02-03T10:25:17Z

ArrayController will be deprecated anyway so maybe it's better to refactor your application now than later.

kimroen · 2015-02-03T10:28:45Z

That is the plan, but I'd like to make sure that is actually the problem for other people's sake. I'm not super-familiar with the functions mentioned in the stack trace, but it looks pretty generic to reduce computed. (https://github.com/emberjs/ember.js/blob/beta/packages/ember-runtime/lib/computed/reduce_computed.js#L332)

andrewbranch · 2015-02-03T15:13:01Z

@kuzirashi, where are you seeing/hearing that ArrayController will be deprecated? I’ve fought tooth-and-nail with it in the past so this is interesting to me, but I can’t find anything about it on emberjs.com or otherwise.

e00dan · 2015-02-03T15:16:08Z

@andrewbranch https://gist.github.com/Kuzirashi/7f6016e426005146f593 I gathered some resources and created a gist.

stefanpenner · 2015-02-03T15:31:36Z

@kimroen can get an isolated example? Can you try on canary?

kimroen · 2015-02-03T15:35:03Z

@stefanpenner Like I said, I can't reliably reproduce it, so it's a bit tricky to tell if I've been able to isolate the problem. I can certainly try it with canary, but again I won't really be able to tell if it works.

stefanpenner · 2015-02-03T15:48:09Z

@kimroen not sure what time zone you are in, but I'll try to carve out some time to screen share with you.

kimroen · 2015-02-03T15:51:39Z

@stefanpenner I'll move mountains to make it work ;) Ping me on IRC or something?

stefanpenner · 2015-02-03T15:59:01Z

@kimroen [email protected]

andrewbranch · 2015-02-03T18:58:39Z

@kuzirashi Thanks!

krisselden · 2015-02-04T09:57:15Z

@stefanpenner I'm fairly certain this has to do with async property changes that come from setProperties + array proxies + reduce computed and is a duplicate of other issues.

courthead · 2015-02-05T14:48:48Z

Are you using any reduce computed functions? If you're using Ember.computed.sort(someArr) then you want to be careful to only change one item at a time in someArr.

stefanpenner · 2015-02-05T15:16:28Z

@stefanpenner I'm fairly certain this has to do with async property changes that come from setProperties + array proxies + reduce computed and is a duplicate of other issues.

ya that is also my suspicion.
Once we get diffing in {{each we should pluginize RC + AR

elidupuis · 2015-02-06T18:10:18Z

I'm coming across this error as well. I think my situation is pretty similar to @kimroen's. I'm using Ember 1.9.1.

Here's my stack trace:

Error while processing route: account.teachers.add Index out of range Error: Index out of range
    at new Error (native)
    at Error.EmberError (http://localhost:4200/assets/vendor.js:27294:23)
    at Array.__exports__.default.Mixin.create.removeAt (http://localhost:4200/assets/vendor.js:45975:19)
    at arrayComputed.removedItem (http://localhost:4200/assets/vendor.js:42236:17)
    at Object.DependentArraysObserver.flushChanges (http://localhost:4200/assets/vendor.js:40913:40)
    at Object.DependentArraysObserver.itemPropertyDidChange (http://localhost:4200/assets/vendor.js:40897:16)
    at Object.DependentArraysObserver.createPropertyObserver.observerContext.observer (http://localhost:4200/assets/vendor.js:40764:41)
    at apply (http://localhost:4200/assets/vendor.js:33209:27)
    at sendEvent (http://localhost:4200/assets/vendor.js:27666:13)
    at notifyObservers (http://localhost:4200/assets/vendor.js:31033:9)

stefanpenner · 2015-02-06T18:15:00Z

@elidupuis smells like RC/AC 🈂️
Im pairing with @kimroen this weekend, hopefully we confirm the situation.

elidupuis · 2015-02-06T18:19:23Z

@stefanpenner awesome, thanks! Glad it's not just me hitting this error 😉

drogus · 2015-02-06T19:35:07Z

Just for the reference, the bug that is referred to above might be #5558

kalmanh · 2015-03-17T04:37:22Z

I believe I am getting this as well using the latest ember-cli...

The scenario is as follows:

I have a "master"-type route for members. I filter it down to one member. Click on the member to go to the "detail" route. When I click back - I get the error.

import Ember from 'ember';

export default Ember.ArrayController.extend({

  primaryMembers: Ember.computed.filterBy('model', 'primaryFlag', true),
  filtered: function(){
    var model = this.get('primaryMembers');
    var searchTerm = this.get('searchTerm');

    if(searchTerm){
      model = model.filter(function(person){
        var lastName = person.get('lastName');
        return lastName.toLowerCase().indexOf(searchTerm) !== -1;
      });
    }

    return model;
  }.property('[email protected]', 'searchTerm'),

  pplSorting: ['lastName:asc', 'gender:desc'],
  sorted: Ember.computed.sort('filtered', 'pplSorting'),
  limited: function(){
    return this.get('sorted').slice(0, 20);
  }.property('[email protected]')
});

kalmanh · 2015-03-17T04:42:34Z

The error went away when I did the following instead

  filtered: function(){
    var model = this.get('primaryMembers');
    var searchTerm = this.get('searchTerm');

    if(searchTerm){
      model = model.filter(function(person){
        var lastName = person.get('lastName');
        return lastName.toLowerCase().indexOf(searchTerm) !== -1;
      });
    }

    return model;
  }.property('primaryMembers.@each', 'searchTerm'),

Kerrick · 2015-04-30T02:24:33Z

This bit us too, on Ember 1.10.0. We have an array of models we are using Ember.computed.sort on, and updating a property on many of them at once. This causes the Index out of Range error. We worked around it by switching to:

Ember.computed('[email protected]', function() {
  return this.get('ourModels').sortBy('thatProperty');
})

srsgores · 2015-04-30T21:50:45Z

Just encountered this too. In my case, I was using Ember.computed.oneWay:

    ownsOtherRealEstate: Ember.computed.oneWay("model.applicant.otherProperties.length"),
    otherPropertiesToggled: function() {
        if (this.get("ownsOtherRealEstate") === 0) {
            this.send("addProperty");
        }
    }.observes("ownsOtherRealEstate"),

Not proxying out ownsOtherRealEstate allowed the page to load again, but the error still persisted, though it visibly did not affect functionality of the app:

    ownsOtherRealEstate: false,
    otherPropertiesToggled: function() {
        if (this.get("ownsOtherRealEstate") && this.get("model.applicant.otherProperties.length") === 0) {
            this.send("addProperty");
        }
    }.observes("ownsOtherRealEstate"),

I noted, in particular, that my model for Property was using {async: true}:

export default DS.Model.extend({
    properties: DS.hasMany("property", {async: true}),
    otherProperties: Ember.computed.filterBy("properties", "isCurrent", false)
});

Thus, other models that did not use async were able to use the above aliasing technique.

@wagenet

#9492, #5319, #5268, #4831] Move away from AC/RC instead use the simpler naive enumerable methods, and rely on glimmers stable rendering for efficiency. For more complex scenarios, custom solutions should be used. @wagenet & @stefanpenner

@wagenet

…rjs#9462, emberjs#4919, emberjs#4231, emberjs#3706, emberjs#5596, emberjs#9485, emberjs#9492, emberjs#5319, emberjs#5268, emberjs#4831, emberjs#5558] Move away from AC/RC instead use the simpler naive enumerable methods, and rely on glimmers stable rendering for efficiency. For more complex scenarios, custom solutions should be used. @wagenet & @stefanpenner

@wagenet

#5596, #9485, #9492, #5319, #5268, #4831, #5558] Move away from AC/RC instead use the simpler naive enumerable methods, and rely on glimmers stable rendering for efficiency. For more complex scenarios, custom solutions should be used. @wagenet & @stefanpenner (cherry picked from commit 0dc1a6c)

epicmonkey mentioned this issue Apr 19, 2015

Pages are not opened when links are clicked pepyatka/pepyatka-html#147

Closed

stefanpenner mentioned this issue Jun 20, 2015

Move away from ArrayComputed/ReduceComputed #11513

Merged

5 tasks

rwjblue closed this as completed in #11513 Jun 26, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

'Index out of range' error when transitioning between routes #10343

'Index out of range' error when transitioning between routes #10343

kimroen commented Feb 2, 2015

e00dan commented Feb 3, 2015

kimroen commented Feb 3, 2015

e00dan commented Feb 3, 2015

kimroen commented Feb 3, 2015

andrewbranch commented Feb 3, 2015

e00dan commented Feb 3, 2015

stefanpenner commented Feb 3, 2015

kimroen commented Feb 3, 2015

stefanpenner commented Feb 3, 2015

kimroen commented Feb 3, 2015

stefanpenner commented Feb 3, 2015

andrewbranch commented Feb 3, 2015

krisselden commented Feb 4, 2015

courthead commented Feb 5, 2015

stefanpenner commented Feb 5, 2015

elidupuis commented Feb 6, 2015

stefanpenner commented Feb 6, 2015

elidupuis commented Feb 6, 2015

drogus commented Feb 6, 2015

kalmanh commented Mar 17, 2015

kalmanh commented Mar 17, 2015

Kerrick commented Apr 30, 2015

srsgores commented Apr 30, 2015

'Index out of range' error when transitioning between routes #10343

'Index out of range' error when transitioning between routes #10343

Comments

kimroen commented Feb 2, 2015

e00dan commented Feb 3, 2015

kimroen commented Feb 3, 2015

e00dan commented Feb 3, 2015

kimroen commented Feb 3, 2015

andrewbranch commented Feb 3, 2015

e00dan commented Feb 3, 2015

stefanpenner commented Feb 3, 2015

kimroen commented Feb 3, 2015

stefanpenner commented Feb 3, 2015

kimroen commented Feb 3, 2015

stefanpenner commented Feb 3, 2015

andrewbranch commented Feb 3, 2015

krisselden commented Feb 4, 2015

courthead commented Feb 5, 2015

stefanpenner commented Feb 5, 2015

elidupuis commented Feb 6, 2015

stefanpenner commented Feb 6, 2015

elidupuis commented Feb 6, 2015

drogus commented Feb 6, 2015

kalmanh commented Mar 17, 2015

kalmanh commented Mar 17, 2015

Kerrick commented Apr 30, 2015

srsgores commented Apr 30, 2015