implement this.error

test/app/routes/4xx.html

@@ -3,8 +3,8 @@
 </:Head>
 
 <Layout page='home'>
-	<h1>{{status}}</h1>
-	<p>{{message}}</p>
+	<h1>Not found</h1>
+	<p>{{error.message}}</p>
 </Layout>
 
 <script>

test/app/routes/5xx.html

@@ -1,9 +1,9 @@
 <:Head>
-	<title>{{status}}</title>
+	<title>Internal server error</title>
 </:Head>
 
 <Layout page='home'>
-	<h1>{{status}}</h1>
+	<h1>Internal server error</h1>
 	<p>{{error.message}}</p>
 </Layout>
 

test/app/routes/_components/Nav.html

@@ -4,6 +4,8 @@
 		<li><a href='/about'>about</a></li>
 		<li><a href='/slow-preload'>slow preload</a></li>
 		<li><a href='/redirect-from'>redirect</a></li>
+		<li><a href='/blog/nope'>broken link</a></li>
+		<li><a href='/blog/throw-an-error'>error link</a></li>
 		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='/blog'>blog</a></li>
 	</ul>
 </nav>

test/app/routes/blog/[slug].html

@@ -59,8 +59,21 @@
 			// is called [slug].html
 			const { slug } = params;
 
-			return fetch(`/api/blog/${slug}`).then(r => r.json()).then(post => {
-				return { post };
+			if (slug === 'throw-an-error') {
+				return this.error(500, 'something went wrong');
+			}
+
+			return fetch(`/api/blog/${slug}`).then(r => {
+				if (r.status === 200) {
+					return r.json().then(post => ({ post }));
+					this.error(r.status, '')
+				}
+
+				if (r.status === 404) {
+					this.error(404, 'Not found');
+				} else {
+					throw new Error('Something went wrong');
+				}
 			});
 		}
 	};