Better handling of API server errors

framework/core/js/forum/src/components/discussion-list.js

@@ -47,7 +47,10 @@ export default class DiscussionList extends Component {
     this.loading(true);
     this.discussions([]);
     m.endComputation();
-    this.loadResults().then(this.parseResults.bind(this));
+    this.loadResults().then(this.parseResults.bind(this), response => {
+      this.loading(false);
+      m.redraw();
+    });
   }
 
   onunload() {

framework/core/js/lib/model.js

@@ -36,7 +36,7 @@ export default class Model {
 
     this.pushData(data);
 
-    return m.request({
+    return app.request({
       method: this.exists ? 'PUT' : 'POST',
       url: app.config['api_url']+'/'+this.data().type+(this.exists ? '/'+this.data().id : ''),
       data: {data},
@@ -51,7 +51,7 @@ export default class Model {
   delete() {
     if (!this.exists) { return; }
 
-    return m.request({
+    return app.request({
       method: 'DELETE',
       url: app.config['api_url']+'/'+this.data().type+'/'+this.data().id,
       background: true,

framework/core/js/lib/store.js

@@ -36,7 +36,7 @@ export default class Store {
       endpoint += '/'+id
       params = query
     }
-    return m.request({
+    return app.request({
       method: 'GET',
       url: app.config['api_url']+'/'+endpoint,
       data: params,

framework/core/js/lib/utils/app.js

@@ -1,10 +1,12 @@
 import ItemList from 'flarum/utils/item-list';
 import Alert from 'flarum/components/alert';
+import ServerError from 'flarum/utils/server-error';
 
 class App {
   constructor() {
     this.initializers = new ItemList();
     this.cache = {};
+    this.serverError = null;
   }
 
   boot() {
@@ -15,6 +17,26 @@ class App {
     document.title = (title ? title+' - ' : '')+this.config['forum_title'];
   }
 
+  request(options) {
+    options.extract = options.extract || function(xhr, xhrOptions) {
+      if (xhr.status === 500) {
+        throw new ServerError;
+      }
+      return xhr.responseText;
+    };
+
+    return m.request(options).then(response => {
+      this.alerts.dismiss(this.serverError);
+      return response;
+    }, response => {
+      this.alerts.dismiss(this.serverError);
+      if (response instanceof ServerError) {
+        this.alerts.show(this.serverError = new Alert({ type: 'warning', message: 'Oops! Something went wrong on the server. Please try again.' }))
+      }
+      throw response;
+    });
+  }
+
   handleApiErrors(response) {
     this.alerts.clear();
 

framework/core/js/lib/utils/server-error.js

@@ -0,0 +1,2 @@
+export default class ServerError {
+}