catch-all: Prepare for showing generic errors too

Author: Turbo87

app/controllers/catch-all.js

@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class CatchAllController extends Controller {
+  @action reload(event) {
+    event.preventDefault();
+    this.model.transition.retry();
+  }
+}

app/routes/catch-all.js

@@ -0,0 +1,73 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+/**
+ * This is a weird route... but let me explain.
+ *
+ * This is the default route that gets used if no other matching route is found.
+ *
+ * This route is *also* used as a generic error page via:
+ *
+ * ```js
+ * this.router.replaceWith('catch-all', { transition, title: 'Something failed' });
+ * ```
+ *
+ * Ideally we would use the `error` substate/routes of Ember.js, but those don't
+ * update the URL when an error happens. This causes the native back button of the
+ * browser to behave in strange way, so we avoid using the broken built-in error
+ * routes.
+ */
+export default class CatchAllRoute extends Route {
+  @service router;
+
+  /**
+   * If `transitionTo('catch-all', 'foo')` is used, this hook will not get called.
+   * If the second argument is an object, then the second object will be the `model`
+   * of this route, and the `serialize()` hook gets called to figure out what the
+   * URL of this route should be. The URL is automatically assembled from the passed-in
+   * transition object.
+   */
+  serialize({ transition }) {
+    return { path: this.pathForRouteInfo(transition.to) };
+  }
+
+  /**
+   * This internal method takes a `RouteInfo` object from Ember.js (e.g. `transition.to`)
+   * and returns the corresponding `:path` route parameter for this `catch-all` route.
+   * @return {string}
+   */
+  pathForRouteInfo(routeInfo) {
+    let routeName = routeInfo.name;
+    let params = paramsForRouteInfo(routeInfo);
+    let queryParams = routeInfo.queryParams;
+    return this.router.urlFor(routeName, ...params, { queryParams }).slice(1);
+  }
+}
+
+/**
+ * Returns all route parameters for the passed-in `RouteInfo` object.
+ *
+ * These can be used in `router.urlFor(...)` calls.
+ */
+function paramsForRouteInfo(routeInfo) {
+  let routeInfos = [...allRouteInfos(routeInfo)].reverse();
+
+  let params = [];
+  for (let routeInfo of routeInfos) {
+    for (let paramName of routeInfo.paramNames) {
+      params.push(routeInfo.params[paramName]);
+    }
+  }
+  return params;
+}
+
+/**
+ * Iterates upwards through the `RouteInfo` "family tree" until the top-most
+ * `RouteInfo` is reached.
+ */
+function* allRouteInfos(routeInfo) {
+  yield routeInfo;
+  while ((routeInfo = routeInfo.parent)) {
+    yield routeInfo;
+  }
+}

app/templates/catch-all.hbs

@@ -2,10 +2,12 @@
   <div local-class="content">
     {{svg-jar "cuddlyferris" local-class="logo"}}
 
-    <h1 local-class="title" data-test-title>Page not found</h1>
+    <h1 local-class="title" data-test-title>{{or @model.title "Page not found"}}</h1>
 
-    <a href="javascript:history.back()" local-class="link">
-      Go Back
-    </a>
+    {{#if @model.tryAgain}}
+      <a href="javascript:location.reload()" local-class="link" data-test-try-again {{on "click" this.reload}}>Try Again</a>
+    {{else}}
+      <a href="javascript:history.back()" local-class="link" data-test-go-back>Go Back</a>
+    {{/if}}
   </div>
 </div>

tests/acceptance/404-test.js

@@ -13,6 +13,8 @@ module('Acceptance | 404', function (hooks) {
     assert.equal(currentURL(), '/unknown-route');
     assert.dom('[data-test-404-page]').exists();
     assert.dom('[data-test-title]').hasText('Page not found');
+    assert.dom('[data-test-go-back]').exists();
+    assert.dom('[data-test-try-again]').doesNotExist();
 
     await percySnapshot(assert);
   });