[WIP] Basic flash messaging on error

app/app.js

@@ -11,6 +11,7 @@
   require('./components/common/core/core');
   require('./components/homePageModule/homePage');
   require('./components/appMainModule/appMain');
+  require('./components/common/error');
   require('./components/common/page_metadata');
   require('./components/common/scroll_top');
 
@@ -24,6 +25,7 @@
       'coreModules',
       'homePageModule',
       'appMainModule',
+      'odca.error',
       'odca.page_metadata',
       'odca.scroll_top'
     ])

app/app.less

@@ -19,6 +19,7 @@ body .main {
 @import "components/common/candidate/candidate";
 @import "components/common/committeeListing/committeeListing";
 @import "components/common/contributionsCategoryTable/contributionsCategoryTable";
+@import "components/common/error/error";
 @import "components/common/globalSearchBar/globalSearchBar";
 @import "components/common/linkList/linkList";
 @import "components/common/localityListing/localityListing";

app/components/common/error/error.less

@@ -0,0 +1,36 @@
+odca-error-message {
+  display: block;
+  padding: 1rem;
+  position: fixed;
+  width: 100%;
+  z-index: 1;
+}
+
+.odca-error-message {
+  &:extend(.text-xsmall);
+  background-color: @color-gold-bg;
+  border: 3px solid @color-gold;
+  border-radius: 4px;
+  color: @core-grey-4;
+  font-style: italic;
+  padding-bottom: 2rem;
+  padding-top: 2rem;
+  position: relative;
+
+  a[ng-click] {
+    cursor: pointer;
+  }
+}
+
+.odca-error-message__alert {
+  color: @color-gold;
+  font-size: 300%;
+  text-align: center;
+  width: 100%;
+}
+
+.odca-error-message__close {
+  font-style: normal;
+  font-weight: bold;
+  text-align: right;
+}

app/components/common/error/error_message.html

@@ -0,0 +1,17 @@
+<div ng-if="$ctrl.isError" class="odca-error-message">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-xs-2 col-sm-1">
+        <div class="odca-error-message__alert fa fa-exclamation-triangle"></div>
+      </div>
+      <div class="col-xs-8 col-sm-10">
+        <span>Sorry, something went wrong.</span>
+        <span ng-if="$ctrl.message" class="odca-error-message__message">{{ $ctrl.message }}</span>
+        <span>You can try <a ng-click="$ctrl.refresh()">refreshing</a> the page or <a ng-click="$ctrl.home()">start over</a>.</span>
+      </div>
+      <div class="col-xs-2 col-sm-1">
+        <div class="odca-error-message__close"><a ng-click="$ctrl.close()">X</a></div>
+      </div>
+    </div>
+  </div>
+</div>

app/components/common/error/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+angular.module('odca.error', [])
+  .run(['$window', 'error', function ($window, error) {
+    $window.onerror = onError;
+
+    function onError (message, url, lineNo, columnNo, err) {
+      error(err, message, true);
+    }
+  }])
+  .directive('odcaErrorMessage', function () {
+    return {
+      restrict: 'E',
+      controller: ErrorMessageController,
+      controllerAs: '$ctrl',
+      bindToController: true,
+      template: require('./error_message.html')
+    };
+  })
+  .decorator('$exceptionHandler', ['error', function (error) {
+    return exceptionHandler;
+
+    function exceptionHandler (err, cause) {
+      error(err, cause);
+    }
+  }])
+  .factory('error', ['$injector', '$log', function ($injector, $log) {
+    return error;
+
+    function error (err, cause, fatal) {
+      var $rootScope = $injector.get('$rootScope'); // avoids a circular dependency with the $exceptionHandler
+      var $location = $injector.get('$location'); // avoids a circular dependency with the $rootScope
+      var messages = [err];
+      if (cause) {
+        messages.unshift(cause);
+      }
+
+      $log.error.apply(null, messages);
+      $rootScope.$emit('odca.error-message', cause);
+
+      if ($location.host().indexOf('localhost') === -1) {
+        ga('send', 'exception', {
+          exDescription: cause || err.message || err,
+          exFatal: !!fatal,
+        });
+      }
+    }
+  }]);
+
+
+function ErrorMessageController ($rootScope, $state) {
+  var ctrl = this;
+  ctrl.close = close;
+  ctrl.home = home;
+  ctrl.refresh = refresh;
+
+  $rootScope.$on('odca.error-message', function (e, message) {
+    ctrl.message = message; // optional message
+    ctrl.isError = true;
+  });
+
+  function close () {
+    ctrl.message = null;
+    ctrl.isError = false;
+  }
+
+  function home () {
+    close();
+
+    $state.go('home', {reload: true});
+  }
+
+  function refresh () {
+    close();
+
+    // Don't want to take chances on $location, just reload as best we can
+    window.location.reload();
+  }
+}
+
+ErrorMessageController.$inject = ['$rootScope', '$state'];
+
+
+module.exports = 'odca.error';

app/components/common/styles/colors.less

@@ -15,6 +15,7 @@
 
 @color-blue: #006ea3;
 @color-gold: #ffdd1f;
+@color-gold-bg: #ffffcc;
 @color-green: #0fc48b;
 @color-red: #e95300;
 

app/index.html

@@ -30,6 +30,7 @@
 
     <!--<body ng-class="bodyClasses" ng-controller="MainCtrl">-->
     <body ng-class="bodyClasses">
+      <odca-error-message></odca-error-message>
 
       <campaign-finance-app></campaign-finance-app>