ember.js - application level handling

I have a Ember.js 3.8 app in which I would like application level error handling. I've read what seems to be the relevant part of the documentation but it doesn't work as I expected.

I have a component to test this with :

exception-creator.hbs

<div class="panel panel-info">
  <div class="panel-heading">Development Only - Exception Creator</div>
  <div class="panel-body">
    <p>Press the button below to create an exception</p>
    <button >Throw an Exception</button>
  </div>
</div>

exception-creator.js

import Component from '@ember/component';

export default Component.extend({
  actions: {
    throw(){
      alert("About to throw an exception");
      throw new Error('Whoops!');
    }
  }
});

And (as per my reading of the doco) I have created a route application-error

application-error.hbs

<h1>Error Handler</h1>
<p>This is the error handler</p>

application-error.js

import Route from '@ember/routing/route';

export default Route.extend({
});

When the button is pressed I expected (after the alert) to be re-routed to the application-error template ... but I'm not. What does happen is that the debug console shows "Uncaught Error: Whoops!".

Would someone tell me where I'm going wrong please ?