Add error substate

app/routes/version/show.js

@@ -10,25 +10,25 @@ export default Route.extend({
       return this.transitionTo('version.show', path.replace(/\/index$/, ''))
     }
 
-    let versionModel = this.modelFor('version');
+    const { version } = this.modelFor('version');
 
     let contentPromise = this.store.queryRecord('content', {
       path,
-      version: versionModel.version,
+      version
     })
     .catch((e) => {
       if (['404', '403'].includes(get(e, 'errors.0.status'))) {
         return this.store.queryRecord('content', {
           path: `${path}/index`,
-          version: versionModel.version,
+          version
         });
       }
       throw e;
     });
 
     return hash({
       content: contentPromise,
-      pages: get(this, 'store').query('page', { version: get(versionModel, 'version') })
+      pages: get(this, 'store').query('page', { version })
     })
   },
 });

app/styles/_error.scss

@@ -0,0 +1,4 @@
+.whoops {
+  margin: 3em auto 0 auto;
+  width: 54em;
+}

app/styles/app.scss

@@ -1,6 +1,8 @@
 @import 'main-header';
 @import 'main-footer';
 
+@import 'error';
+
 @font-face {
   font-family: 'fontello';
   src: url("../fonts/fontello.eot?60624967");

app/templates/error.hbs

@@ -0,0 +1,11 @@
+{{#if (eq model.errors.0.status '404')}}
+  <h1 class="whoops">Ack! 404 friend, you're in the wrong place</h1>
+
+  <p>
+    This page wasn't found. If you were looking for documentation, please try
+    the <a href="http://guides.emberjs.com">Guides</a> section of the site. If you expected
+    something else to be here, please <a href="https://github.com/emberjs/website/issues">file a ticket</a>.
+  </p>
+{{else}}
+  <p>An error occurred! Please try again.</p>
+{{/if}}

package.json

@@ -52,6 +52,7 @@
     "ember-prism": "^0.2.0",
     "ember-resolver": "^4.0.0",
     "ember-source": "~2.18.0",
+    "ember-truth-helpers": "^2.0.0",
     "ember-welcome-page": "^3.0.0",
     "eslint-plugin-ember": "^5.0.0",
     "loader.js": "^4.2.3",