Handle errors in the application route

This is the only way to preserve the URL in all cases.

ui/app/controllers/application.js

@@ -0,0 +1,35 @@
+import Ember from 'ember';
+
+const { Controller, computed } = Ember;
+
+export default Controller.extend({
+  error: null,
+
+  errorStr: computed('error', function() {
+    return this.get('error').toString();
+  }),
+
+  errorCodes: computed('error', function() {
+    const error = this.get('error');
+    const codes = [error.code];
+
+    if (error.errors) {
+      error.errors.forEach(err => {
+        codes.push(err.status);
+      });
+    }
+
+    return codes
+      .compact()
+      .uniq()
+      .map(code => '' + code);
+  }),
+
+  is404: computed('errorCodes.[]', function() {
+    return this.get('errorCodes').includes('404');
+  }),
+
+  is500: computed('errorCodes.[]', function() {
+    return this.get('errorCodes').includes('500');
+  }),
+});

ui/app/routes/application.js

@@ -3,9 +3,19 @@ import Ember from 'ember';
 const { Route } = Ember;
 
 export default Route.extend({
+  resetController(controller, isExiting) {
+    if (isExiting) {
+      controller.set('error', null);
+    }
+  },
+
   actions: {
     didTransition() {
       window.scrollTo(0, 0);
     },
+
+    error(error) {
+      this.controllerFor('application').set('error', error);
+    },
   },
 });

ui/app/templates/application.hbs

@@ -1,2 +1,19 @@
 {{partial "svg-patterns"}}
-{{outlet}}
+{{#unless error}}
+  {{outlet}}
+{{else}}
+  <div class="error-container">
+    <div class="error-message">
+      {{#if is500}}
+        <h1 class="title is-spaced">Server Error</h1>
+        <p class="subtitle">A server error prevented data from being sent to the client.</p>
+      {{else if is404}}
+        <h1 class="title is-spaced">Not Found</h1>
+        <p class="subtitle">What you're looking for couldn't be found. It either doesn't exist or you are not authorized to see it.</p>
+      {{/if}}
+      {{#if (eq config.environment "development")}}
+        <pre class="error-stack-trace"><code>{{errorStr}}</code></pre>
+      {{/if}}
+    </div>
+  </div>
+{{/unless}}