Fix to error handling mechanism: fail only on promise rejections

client/.babelrc

@@ -1,4 +1,10 @@
 {
   "presets": ["es2015", "stage-2"],
-  "plugins": ["angularjs-annotate", "transform-object-assign"]
+  "plugins": [
+    "angularjs-annotate",
+    "transform-object-assign",
+    ["babel-plugin-transform-builtin-extend", {
+      "globals": ["Error"]
+    }]
+  ]
 }

client/app/components/app-view/error-handler.js

@@ -1,3 +1,5 @@
+import PromiseRejectionError from '@/lib/promise-rejection-error';
+
 // eslint-disable-next-line import/prefer-default-export
 export class ErrorHandler {
   constructor() {
@@ -10,18 +12,17 @@ export class ErrorHandler {
   }
 
   process(error) {
-    if (!(error instanceof Error)) {
-      if (error.status && error.data) {
-        switch (error.status) {
-          case 403: error = new Error(''); break;
-          default: error = new Error(error.data.message); break;
-        }
-      }
-    }
-    this.error = error;
+    this.reset();
     if (this.logToConsole) {
+      // Log raw error object
       // eslint-disable-next-line no-console
       console.error(error);
     }
+    if (
+      (error === null) ||
+      (error instanceof PromiseRejectionError)
+    ) {
+      this.error = error;
+    }
   }
 }

client/app/components/app-view/index.js

@@ -1,4 +1,5 @@
 import debug from 'debug';
+import PromiseRejectionError from '@/lib/promise-rejection-error';
 import { ErrorHandler } from './error-handler';
 import template from './template.html';
 
@@ -19,6 +20,7 @@ export default function init(ngModule) {
       this.handler = handler;
 
       $rootScope.$on('$routeChangeStart', (event, route) => {
+        this.handler.reset();
         if (route.$$route.authenticated) {
           // For routes that need authentication, check if session is already
           // loaded, and load it if not.
@@ -38,12 +40,8 @@ export default function init(ngModule) {
         }
       });
 
-      $rootScope.$on('$routeChangeSuccess', () => {
-        handler.reset();
-      });
-
       $rootScope.$on('$routeChangeError', (event, current, previous, rejection) => {
-        throw rejection;
+        throw new PromiseRejectionError(rejection);
       });
     },
   });

client/app/lib/promise-rejection-error.js

@@ -0,0 +1,11 @@
+export default class PromiseRejectionError extends Error {
+  constructor(rejection) {
+    let message;
+    switch (rejection.status) {
+      case 403: message = 'You have no permissions to view this page.'; break;
+      default: message = rejection.data.message; break;
+    }
+    super(message);
+    this.rejection = rejection;
+  }
+}

client/app/pages/dashboards/dashboard.js

@@ -1,4 +1,5 @@
 import * as _ from 'underscore';
+import PromiseRejectionError from '@/lib/promise-rejection-error';
 import template from './dashboard.html';
 import shareDashboardTemplate from './share-dashboard.html';
 import './dashboard.less';
@@ -164,15 +165,15 @@ function DashboardCtrl(
     this.dashboard = Dashboard.get({ slug: $routeParams.dashboardSlug }, (dashboard) => {
       Events.record('view', 'dashboard', dashboard.id);
       renderDashboard(dashboard, force);
-    }, (error) => {
-      const statusGroup = Math.floor(error.status / 100);
+    }, (rejection) => {
+      const statusGroup = Math.floor(rejection.status / 100);
       if (statusGroup === 5) {
         // recoverable errors - all 5** (server is temporarily unavailable
         // for some reason, but it should get up soon).
         this.loadDashboard();
       } else {
         // all kind of 4** errors are not recoverable, so just display them
-        throw error;
+        throw new PromiseRejectionError(rejection);
       }
     });
   }, 1000);