"Network request failed" only when using network shared from iPhone 4G/LTE hotspot

[jotshin]

I ran into this problem only when I use network shared from my iPhone 4G/LTE hotspot. This won't be seen when connecting to a WiFi AP. Could anyone help? Here's the detailed error message:

 stack: 
  Request.fetch.xhr.onload                                  index.ios.bundle:11123
  XMLHttpRequestBase.$XMLHttpRequestBase_sendLoad           index.ios.bundle:11569
  XMLHttpRequestBase.callback                               index.ios.bundle:11549
  XMLHttpRequest.<anonymous>                                index.ios.bundle:11330
  MessageQueueMixin._invokeCallback                         index.ios.bundle:7446
  Object.ErrorUtils.applyWithGuard                          index.ios.bundle:873
  guardReturn                                               index.ios.bundle:7277
  MessageQueueMixin.invokeCallbackAndReturnFlushedQueue     index.ios.bundle:7459
  messageHandlers.executeJSCall:method:arguments:callback:  debugger-ui:54
  WebSocket.ws.onmessage                                    debugger-ui:80

[brentvatne]

@josephtsng - does this always happen when using it from your iPhone 4G/LTE hotspot? Could you post the code that caused this as well?

[jotshin]

@brentvatne Yes it always happens. The code is mostly from React Native tutorial app with minor editing.

var fetch = require('fetch');
var DetailPage = require('./details')

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

  getInitialState: function() { 
    return {
      //movies: {},
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  },

  componentDidMount: function() {
    this.fetchData();
  },

  fetchData: function() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        });
      })
      .done();
  },

  getDataSource: function(movies: Array<any>): ListView.DataSource {
    return this.state.dataSource.cloneWithRows(movies);
  },

  renderLoadingView: function() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  },

  render: function() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }
    return (
      <View style={styles.container}>
        <TextInput style={styles.searchbox}
          placeholder="Search a movie..." 
        />
        <ListView styles={styles.separator}
          dataSource={this.state.dataSource}
          renderRow={this._renderMovie}
        />
      </View>
    );
  },

  _renderMovie: function(movie){
    return(
      <View>
        <TouchableHighlight onPress={() => this.selectMovie(movie)}>
          <View style={styles.movieRow}>
            <Image
              source={{uri: movie.posters.thumbnail}}
              style={styles.movieImg}
            />
            <View style={styles.rightContainer}>
              <Text style={styles.movieTitle} numberOfLines={2}>
                {movie.title}
              </Text>
            </View>
          </View>
        </TouchableHighlight>
        <View style={styles.cellBorder} />
      </View>
    );
  },

  selectMovie: function(movie){
    this.props.navigator.push({
      title: movie.title,
      component: DetailPage,
      passProps: {movie: movie}
    });
  },
});

[frantic]

@josephtsng what's the error message? You posted just stack trace. Try this simplified example:

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var fetch = require('fetch');
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';


var TestFetch = React.createClass({
  componentDidMount: function() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((stuff) => console.log(stuff))
      .done();
  },

  render: function() {
    return (
      <View  />
    );
  }
});

[jotshin]

@frantic I tried with your simplified example and got the same message as below:

message: Network request failed
ExceptionsManager.js:30 handleException
InitializeJavaScriptAppEngine.js:71 handleErrorWithRedBox
error-guard.js:32 ErrorUtils.applyWithGuard
MessageQueue.js:95 guardReturn
MessageQueue.js:302 MessageQueueMixin.callFunctionReturnFlushedQueue
debugger-ui:54 messageHandlers.executeJSCall:method:arguments:callback:
debugger-ui:80 ws.onmessage

[ide]

You could try resetting the simulator which sometimes fixes network issues: http://stackoverflow.com/questions/2763733/how-to-reset-iphone-simulator. Could there be something wrong with the URL or your setup (ex: try not using the Chrome debugger, make sure all URLs have hosts publicly accessible from the internet)?

[jotshin]

@ide It works (resetting the simulator)! Thanks for giving me a hand. Previously I also encountered another issue that was solved by the same mean. Could you know why it is caused?

[jotshin]

@ide Unfortunately after resetting the simulator running either the simple app frantic suggests or the one I posted will freeze. Occasionally I saw the same error messages in the Xcode console, but now I could see the data info (JSON or the ListView) before it hangs. I'll try to switch to the WiFi router to test this and report. However I think it might be some system issue of my own.

[jotshin]

Solved after restarting Xcode. It seems there's something wrong with the resource management on my laptop.