Better handling of API server errors

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();