How to debug a failing Ember Data JSON API save() operation?

Question

I'm creating an Ember Data object with this action in a route:

    createProfile: function() {
        var profile = this.store.createRecord('profile', {
            username: 'bob',
            orientation: 'straight',
            gender: 'male',
            firstname: 'kevin',
            lastlogin: 'today'
        });
        profile.save().then(function() {
            this.transitionTo('welcome');
        });
    }

On the server side I've handling the POST request and returning a response that looks like this:

Request URL: http://0.0.0.0/api/1/profiles
Request Method: POST
Status Code: 201 Created  <-- It has got the "Green Dot" in Ember Inspector

Response headers:
Access-Control-Allow-Headers: x-requested-with, Content-Type, origin, authorization, accept, client-security-token
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 1000
Connection: Keep-Alive
Content-Length: 164
Content-Type: application/vnd.api+json; charset=UTF-8
Date: Wed, 07 Oct 2015 07:17:06 GMT
Keep-Alive: timeout=5, max=100
Location: http://localhost/api/1/profiles/2
Server: waitress
access-control-allow-credentials: true

And the body of the response looks like this:

{'data': {'type': 'profiles', 'attributes': {'firstname': 'kevin', 'lastlogin': 'today', 'username': 'bob', 'orientation': 'straight', 'gender': 'male'}, 'id': '2'}}

As far as I can tell, this all looks good. I've done another operation that successfully does a GET method on this model type. I can see the model appear in the Ember Inspector under the Ember Data panel and see it is correctly given an Id of 2.

But then when the server returns the response the error message is:

createProfile/<@http://localhost/assets/emberpd.js:324:6
tryCatch@http://localhost/assets/vendor.js:60951:14
invokeCallback@http://localhost/assets/vendor.js:60966:15
publish@http://localhost/assets/vendor.js:60934:9
@http://localhost/assets/vendor.js:40181:7
Queue.prototype.invoke@http://localhost/assets/vendor.js:11532:9
Queue.prototype.flush@http://localhost/assets/vendor.js:11596:11
DeferredActionQueues.prototype.flush@http://localhost/assets/vendor.js:11392:11
Backburner.prototype.end@http://localhost/assets/vendor.js:10720:9
Backburner.prototype.run@http://localhost/assets/vendor.js:10842:13
run@http://localhost/assets/vendor.js:29679:12
ember$data$lib$adapters$rest$adapter$$RESTAdapter<.ajax/</hash.success@http://localhost/assets/vendor.js:66323:15
jQuery.Callbacks/fire@http://localhost/assets/vendor.js:3350:10
jQuery.Callbacks/self.fireWith@http://localhost/assets/vendor.js:3462:7
done@http://localhost/assets/vendor.js:9516:5
.send/callback@http://localhost/assets/vendor.js:9920:8

At which point I feel pretty stuck. I'm using Ember 2.0.2 with Ember Data 2.0.1.

Any idea if there is something obvious I'm missing?

Am I doing something wrong in the .then() function? Or is this an Ember Data problem? Any idea where I start going in to debug that kind of error?

Is there an errors array? Can you sprinkle Ember.Logger.log(error) into the error() hook of your route or the application route? What if you just POST that JSON directly to the server? (I assume that works fine?) — elithrar
Is the error message complete? it usually has a header describing the problem... — Henry Vonfire
profile.save().then(() => this.transitionTo('welcome')).catch(console.log.bind(console)); Do you get anything in the console? — Patsy Issa
I think your problem here is this.transitionTo('welcome'); since you don't pass this — Patsy Issa

vikram7 vikram7 · Accepted Answer · 2015-10-07T13:56:32

The this in your promise has a different scope from the this you are expecting. You can rewrite it as follows (where you set _this to this before handling the promise):

createProfile: function() {
  var profile = this.store.createRecord('profile', {
    username: 'bob',
    orientation: 'straight',
    gender: 'male',
    firstname: 'kevin',
    lastlogin: 'today'
  });

  var _this = this;
  profile.save().then(function() {
    _this.transitionTo('welcome');
  });
}

In ES6, you can rewrite this to avoid having to set _this at all:

createProfile() {
  const profile = this.store.createRecord('profile', {
    username: 'bob',
    orientation: 'straight',
    gender: 'male',
    firstname: 'kevin',
    lastlogin: 'today'
  });

  profile.save().then(() => {
    this.transitionTo('welcome');
  });
}

How to debug a failing Ember Data JSON API save() operation?

2 Answers