Add error handling when fetch fails

When the rebuild API is not available or errors out, show a
notification.

dist/index.html

@@ -18,8 +18,8 @@
 				</div>
 			</div>
 		</section>
-		<section class="section">
-			<div id="bad" class="tile box has-background-danger">
+		<section id="bad" class="section">
+			<div class="tile box has-background-danger">
 				<div class="content">
 					<p class='title is-5 has-text-white'>Unreproducible packages</p>
 					<ul id="packagesul">

src/index.js

@@ -79,4 +79,13 @@ fetch(`${apiPrefix}/api/v0/pkgs/list`).then((response) => {
 
   displayStats(suites);
   displayBadPackages(suites);
+}).catch(() => {
+  const elem = document.getElementById('status');
+  const div = document.createElement('div');
+  div.textContent = 'An unexpected erorr occurred fetching the rebuild status';
+  div.className = 'notification is-danger';
+
+  elem.appendChild(div);
+  const bad = document.getElementById('bad');
+  bad.innerHTML = '';
 });

src/style.scss

@@ -8,6 +8,7 @@ $link: #212952;
 @import "../node_modules/bulma/sass/elements/container.sass";
 @import "../node_modules/bulma/sass/elements/box.sass";
 @import "../node_modules/bulma/sass/elements/title.sass";
+@import "../node_modules/bulma/sass/elements/notification.sass";
 @import "../node_modules/bulma/sass/layout/footer.sass";
 @import "../node_modules/bulma/sass/layout/hero.sass";
 @import "../node_modules/bulma/sass/layout/section.sass";