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,27 +1,26 @@
+import { EventEmitter } from 'events';
+
 // eslint-disable-next-line import/prefer-default-export
-export class ErrorHandler {
+export class ErrorHandler extends EventEmitter {
   constructor() {
+    super();
     this.logToConsole = true;
     this.reset();
   }
 
   reset() {
     this.error = null;
+    this.emit('change');
   }
 
   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);
     }
+    this.error = error;
+    this.emit('change');
   }
 }

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';
 
@@ -13,12 +14,27 @@ export default function init(ngModule) {
 
   ngModule.component('appView', {
     template,
-    controller($rootScope, $route, Auth) {
+    controller($rootScope, $scope, $route, Auth) {
       this.showHeaderAndFooter = false;
 
-      this.handler = handler;
+      this.error = null;
+
+      const handleError = () => {
+        if (
+          (handler.error === null) ||
+          (handler.error instanceof PromiseRejectionError)
+        ) {
+          this.error = handler.error;
+        }
+      };
+
+      handler.addListener('change', handleError);
+      $scope.$on('$destroy', () => {
+        handler.removeListener('change', handleError);
+      });
 
       $rootScope.$on('$routeChangeStart', (event, route) => {
+        handler.reset();
         if (route.$$route.authenticated) {
           // For routes that need authentication, check if session is already
           // loaded, and load it if not.
@@ -38,12 +54,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/components/app-view/template.html

@@ -1,6 +1,6 @@
 <app-header ng-if="$ctrl.showHeaderAndFooter"></app-header>
-<div ng-if="$ctrl.handler.error" class="container-fluid">
-  <div class="alert alert-danger">{{ $ctrl.handler.error.message }}</div>
+<div ng-if="$ctrl.error" class="container-fluid">
+  <div class="alert alert-danger">{{ $ctrl.error.message }}</div>
 </div>
-<div ng-if="!$ctrl.handler.error" ng-view></div>
+<div ng-if="!$ctrl.error" ng-view></div>
 <footer ng-if="$ctrl.showHeaderAndFooter"></footer>

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