Ember error pages

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
    location: config.locationType,
    rootURL: config.rootURL
});

Router.map(function() {
    // app routes
    // ...

    this.route('403'); // 403 Forbidden
    this.route('404', { path: '*path' }); // 404 Not Found
});

export default Router;

routes-application.js

import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
        error(error, transition) {
            if (error.errors) {
                switch (parseInt(error.errors[0].status)) {
                    case 401:
                        // Redirect to login page
                        this.transitionTo('login');
                        return false;
                    case 403:
                        // Show forbidden error page
                        this.intermediateTransitionTo('403');
                        return false;
                    case 404:
                        // Show page not found error page
                        this.intermediateTransitionTo('404', '');
                        return false;
                    case 500:
                        // Log error and show default error page
                        return true;
                }
            }

            return true;
        }
    }
});

templates-403.hbs

<h1>403 Forbidden</h1>
<p>You don't have permission to access this page.</p>

{{outlet}}

templates-404.hbs

<h1>404 Not Found</h1>
<p>Sorry, we couldn't find that page.</p>

{{outlet}}

templates-error.hbs

<h1>Error</h1>
<p>Uh-oh. We ran into a problem processing your request.</p>

{{outlet}}