babel es6 wrong exception location with react - ecmascript-6

Question

i think this is a babel problem (not completely sure). The errors my javascript console throws are always wrong... No matter where the error occurs in my code it points to my handleFailure(serviceName, error) block... for instance... Calling this.foo(); after hand success occurs or even in i move this.foo(); to my getItemById method.. it always throws an error in the same block... What am i doing wrong in my store....
if i remove the bogus code it works just fine... i would like the error shown to me to reference the bogus code..
this is the error:
AircraftLocationStore.js:40 Server call aircraftLocationRest failed with error: aircraftLocationRest!handleFailure # AircraftLocationStore.js:40(anonymous function) # RestServiceClient.js:20
class AircraftLocationStore extends EventEmitter {
constructor() {
super();
this._populateRestCallStatus = RestCallStatus.NOT_REQUESTED;
this._dataStore = Map({});
this.handleSuccess = this.handleSuccess.bind(this);
this.handleFailure = this.handleFailure.bind(this);
}
populate(){
RestService.fetchData(this.handleSuccess, this.handleFailure, 'aircraftLocationRest');
this._populateRestCallStatus = RestCallStatus.STARTED
}
handleSuccess(serviceName, jsonData){
UT.logMethod(TAG, `${serviceName} succeeded!`)
jsonData.forEach((entity) => {
let tempEntity = AircraftLocationHelper.createFromJson(entity);
this._dataStore = this._dataStore.merge(Map.of(tempEntity.id, tempEntity))
});
UT.log('isMap', Map.isMap(this._dataStore))
this.foo();
this._populateRestCallStatus = RestCallStatus.SUCCESS;
this.emitChange();
}
handleFailure(serviceName, error){
//Utils.logMethod(TAG, 'handleFailure');
this._populateRestCallStatus = RestCallStatus.FAILED
console.error(`Server call ${serviceName} failed with error: ${serviceName}!`)
}
...
export default new AircraftLocationStore();
if i try and change an immutablejs record on my display component in the onChange it tells me this...
just in case i will include the code that handles the callback that ALWAYS throws the error
class RestServiceClient{
/**
* #param successCB
* #param failureCB
* #param endPoint
*/
fetchData(successCB, failureCB, endPoint) {
const serverUrl = BASE_URL + endPoint;
UT.log('serverUrl', serverUrl);
fetch(serverUrl).then(r => r.json())
.then(data => successCB(endPoint, data))
.catch(e => failureCB(endPoint, e.toString()))
}
}
export default new RestServiceClient();
here is my webpack.config
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: "source-map",
entry: "./src/index.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
}]
}
};

Answer 1

the problem appeared to be in my anonymous function that was created by the fat arrows =>
i rewrote:
fetch(serverUrl).then(r => r.json())
.then(data => let foo = data; successCB(endPoint, data))
.catch(e => failureCB(endPoint, e.toString()));
as:
fetch(serverUrl)
.then(
function(response) {
if (response.status !== 200) {
failureCB(endPoint, 'Looks like there was a problem. Status Code: ' + response.status);
}
// Examine the text in the response
response.json().then(function(data) {
successCB(endPoint, data)
});
}
)
.catch(function(err) {
failureCB(endPoint, 'Looks like there was a problem. Status Code: ' + err);
});
and i once again have some meaningfull error messages...