Handling network connectivity and discarding promises in Ember

Question

I am trying to implement an application level error handler to catch unsuccessful promises in my application. Most of the suggestions that I saw on this subject are related to error logging, but I really want to call up a modal window so that my users know that they are no longer connected to the Internet +, can only read data.

I would like to call an action from a handler RSVP.onerror. The only way I managed to do this is with something like this:

Ember.RSVP.configure('onerror', function(e) {
  window.App.__container__
    .lookup('controller:application')
    .send('showModal', 'disconnected');
});

but it seems a bit hacked to me.

Is there anything more suitable for writing this code? More generally, are there any recommendations for notifying users of a lost internet connection?

Answer 1

Ember ( ).

, , views/error.js willInsertElement , , , true, showModal .

, promises - , , :

this.set('thing').then(function() {
  // Success
}, this.offlineError()); // Failure

( ember-cli):

export default {
  name: 'offline-error',

  initialize: function(container, app) {
    var offlineError = function() {
      // or something like this
      container.lookup('controller:application').send('showModal', 'disconnected');
    };

    app.register('offlineError', offlineError, { instantiate: false });

    // Inject into routes, controllers, and views.
    Em.A(['route', 'controller', 'view']).forEach(function(place) {
      app.inject(place, 'offlineError', 'offlineError:main');
    });
  }
};

offlineError , , , .

Answer 2

. ember-cli.

// services/connection.js

/* global Offline */
import Ember from 'ember';

// Configure Offline.js. In this case, we don't want to retry XHRs.
Offline.requests = false;

export default Ember.Object.extend({

  setup: function() {
    if (Offline.state === 'up') {
      this._handleOnline();
    } else {
      this._handleOffline();
    }

    Offline.on('down', this._handleOffline, this);
    Offline.on('up', this._handleOnline, this);
  }.on('init'),

  _handleOffline: function() {
    this.set('isOffline', true);  
    this.set('isOnline', false);  
  },

  _handleOnline: function() {
    this.set('isOnline', true);  
    this.set('isOffline', false);  
  }

});

:

// initializers/connection.js

export default {
  name: 'connection',
  initialize: function(container, app) {
    app.inject('controller', 'connection', 'service:connection');
    app.inject('route', 'connection', 'service:connection');
  }
};

:

{{#if connection.isOffline}}
  <span class="offline-status">
    <span class="offline-status__indicator"></span>
    Offline
  </span>
{{/if}}

( .js , - ).

, , , , .

---

- , !