assets/views/errors/400.njk

@@ -1,2 +0,0 @@
-{% extends 'errors/error.njk' %}
-{% import 'macros.njk' as macros %}

assets/views/errors/400.svelte

@@ -0,0 +1,5 @@
+<script>
+    import Error from "./Error.svelte";
+</script>
+
+<Error code={400} message="Bad request." />

assets/views/errors/401.njk

@@ -1,2 +0,0 @@
-{% extends 'errors/error.njk' %}
-{% import 'macros.njk' as macros %}

assets/views/errors/401.svelte

@@ -0,0 +1,5 @@
+<script>
+    import Error from "./Error.svelte";
+</script>
+
+<Error code={401} message="Unauthorized." />

assets/views/errors/403.njk

@@ -1,2 +0,0 @@
-{% extends 'errors/error.njk' %}
-{% import 'macros.njk' as macros %}

assets/views/errors/403.svelte

@@ -0,0 +1,5 @@
+<script>
+    import Error from "./Error.svelte";
+</script>
+
+<Error code={403} message="Forbidden" />

assets/views/errors/404.njk

@@ -1,2 +0,0 @@
-{% extends 'errors/error.njk' %}
-{% import 'macros.njk' as macros %}

assets/views/errors/404.svelte

@@ -0,0 +1,5 @@
+<script>
+    import Error from "./Error.svelte";
+</script>
+
+<Error code={404} message="Page not found." />

assets/views/errors/429.njk

@@ -1,2 +0,0 @@
-{% extends 'errors/error.njk' %}
-{% import 'macros.njk' as macros %}

assets/views/errors/429.svelte

@@ -0,0 +1,5 @@
+<script>
+    import Error from "./Error.svelte";
+</script>
+
+<Error code={429} message="Too many requests." />

assets/views/errors/500.njk

@@ -1,2 +0,0 @@
-{% extends 'errors/error.njk' %}
-{% import 'macros.njk' as macros %}

assets/views/errors/500.svelte

@@ -0,0 +1,5 @@
+<script>
+    import Error from "./Error.svelte";
+</script>
+
+<Error code={500} message="Internal server error." />

assets/views/errors/503.njk

@@ -1,2 +0,0 @@
-{% extends 'errors/error.njk' %}
-{% import 'macros.njk' as macros %}

assets/views/errors/503.svelte

@@ -0,0 +1,5 @@
+<script>
+    import Error from "./Error.svelte";
+</script>
+
+<Error code={503} message="Service unavailable." />

assets/views/errors/Error.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import {locals} from "../../ts/stores";
+
+    const previousUrl = $locals.getPreviousUrl();
+
+    export let code;
+    code = $locals.error_code || code;
+
+    export let message;
+    message = $locals.error_message || message;
+
+    export let instructions;
+    instructions = $locals.error_instructions || instructions;
+</script>
+
+<svelte:head>
+    <title>{code + ' - ' + message}</title>
+    <link rel="stylesheet" href="/css/error.css">
+</svelte:head>
+
+<div class="logo"><a href="/">{$locals.app.name}</a></div>
+
+<main>
+    <!--TODO: flash messages-->
+
+    <div class="error-code">{code}</div>
+    <div class="error-message">{message}</div>
+    {#if instructions}
+        <div class="error-instructions">{@html instructions}</div>
+    {/if}
+
+    <nav>
+        {#if previousUrl && previousUrl !== '/' && previousUrl !== $locals.url}
+            <a href={previousUrl} class="button"><i data-feather="arrow-left"></i> Go back</a>
+        {/if}
+
+        <a href="/" class="button"><i data-feather="home"></i> Go to homepage</a>
+    </nav>
+</main>
+
+<div class="contact">
+    <p>Error ID: {$locals.error_id || 'Request has no indentifier.'}</p>
+    <p>
+        If you think this isn't right, please contact us with the above error ID at
+        <a href="mailto:{$locals.app.contact_email}">{$locals.app.contact_email}</a>.
+    </p>
+</div>

assets/views/errors/error.njk

@@ -1,37 +0,0 @@
-{% extends 'layouts/barebone.njk' %}
-
-{% set title = error_code + ' - ' + error_message %}
-
-{% block _stylesheets %}
-    <link rel="stylesheet" href="/css/error.css">
-{% endblock %}
-
-{% block _body %}
-    <div class="logo"><a href="/">{{ app.name }}</a></div>
-
-    <main class="{% block class %}{% endblock %}">
-        {% if flash %}
-            {{ macros.messages(flash) }}
-        {% endif %}
-
-        <div class="error-code">{{ error_code }}</div>
-        <div class="error-message">{{ error_message }}</div>
-        <div class="error-instructions">{{ error_instructions|safe }}</div>
-
-        <nav>
-            {% set previousUrl = getPreviousUrl() %}
-            {% if previousUrl and previousUrl != '/' and previousUrl != url %}
-                <a href="{{ previousUrl }}" class="button"><i data-feather="arrow-left"></i> Go back</a>
-            {% endif %}
-
-            <a href="/" class="button"><i data-feather="home"></i> Go to homepage</a>
-        </nav>
-    </main>
-
-    <div class="contact">
-        Error ID: {{ error_id | default('Request has no indentifier.') }}
-        <br>
-        If you think this isn't right, please contact us with the above error ID at
-        <a href="mailto:{{ app.contact_email }}">{{ app.contact_email }}</a>.
-    </div>
-{% endblock %}

src/Application.ts

@@ -182,11 +182,18 @@ export default abstract class Application implements Extendable<ApplicationCompo
             res.status(httpError.errorCode);
             res.format({
                 html: () => {
-                    res.render('errors/' + httpError.errorCode + '.njk', {
+                    const locals = {
                         error_code: httpError.errorCode,
                         error_message: httpError.message,
                         error_instructions: httpError.instructions,
                         error_id: errorId,
+                    };
+                    res.render('errors/' + httpError.errorCode, locals, (err: Error | undefined, html) => {
+                        if (err) {
+                            res.render('errors/Error', locals);
+                        } else {
+                            res.send(html);
+                        }
                     });
                 },
                 json: () => {