Fix UI failing silently if init package is not found (#1014)

## Description

Fixes UI failing silently if init package is not found.

It is worth noting that this PR introduces some basic JSON error
messaging to the API + JSON error message handling in the UI's
`http.ts`.

## Related Issue

<!--- This project prefers to accept pull requests related to open
issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->

Fixes #1013 

## Type of change

<!-- Please delete options that are not relevant -->

- [X] Bug fix (non-breaking change which fixes an issue)

.hooks/ui-dev.sh

@@ -0,0 +1,15 @@
+#! /usr/bin/env sh
+# This script is called during `npm run dev`
+# It is used to start the Sveltekit frontend + Go Chi backend
+# It also injects the current CLI dev version similar to how the Makefile does
+
+CLI_VERSION=$(git describe --tags --always)
+BUILD_ARGS="-s -w -X 'github.com/defenseunicorns/zarf/src/config.CLIVersion=$CLI_VERSION'"
+
+API_DEV_PORT=5173 \
+    API_PORT=3333 \
+    API_TOKEN=insecure \
+    concurrently --names "ui,api" \
+    -c "gray.bold,yellow" \
+    "vite dev" \
+    "nodemon -e go -x 'go run -ldflags=\"$BUILD_ARGS\" main.go dev ui -l=trace || exit 1'"

package.json

@@ -4,7 +4,7 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "API_DEV_PORT=5173 API_PORT=3333 API_TOKEN=insecure concurrently --names \"ui,api\" -c \"gray.bold,yellow\" \"vite dev\" \"nodemon -e go -x 'go run main.go dev ui -l=trace || exit 1'\"",
+		"dev": ".hooks/ui-dev.sh",
 		"build": "vite build",
 		"test": "playwright test -x --reporter github,html",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

src/internal/api/packages/find.go

@@ -5,6 +5,7 @@
 package packages
 
 import (
+	"fmt"
 	"net/http"
 	"os"
 	"regexp"
@@ -40,9 +41,14 @@ func findPackage(pattern *regexp.Regexp, w http.ResponseWriter, setDir func() (s
 	targetDir, err := setDir()
 	if err != nil {
 		message.ErrorWebf(err, w, "Error getting directory")
+		return
 	}
 
-	// Intentionally ignore errors
-	files, _ := utils.RecursiveFileList(targetDir, pattern)
+	files, err := utils.RecursiveFileList(targetDir, pattern)
+	if err != nil || len(files) == 0 {
+		pkgNotFoundMsg := fmt.Sprintf("Package not found: %s", pattern.String())
+		message.ErrorWebf(err, w, pkgNotFoundMsg)
+		return
+	}
 	common.WriteJSONResponse(w, files, http.StatusOK)
 }

src/ui/lib/http.ts

@@ -96,7 +96,9 @@ export class HTTP {
 
 			// If the response is not OK, throw an error.
 			if (!response.ok) {
-				throw new Error('HTTP request failed: ' + response.statusText);
+				// all API errors should be 500s w/ a text body
+				const errMessage = await response.text();
+				throw new Error(errMessage);
 			}
 
 			// Return the response as the expected type

src/ui/routes/initialize/+layout.svelte

@@ -3,16 +3,31 @@
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors
  -->
 <script lang="ts">
-	import { Stepper } from '@ui';
+	import { Button, Stepper, Typography } from '@ui';
 	import { page } from '$app/stores';
 	import { Packages } from '$lib/api';
 	import { pkgComponentDeployStore, pkgStore } from '$lib/store';
 
-	Packages.findInit().then((initPackages) => {
-		if (initPackages.length > 0) {
-			Packages.read(initPackages[0]).then(pkgStore.set);
-		}
-	});
+	enum LoadingStatus {
+		Loading,
+		Success,
+		Error
+	}
+
+	let status: LoadingStatus = LoadingStatus.Loading;
+	let errMessage: string = '';
+
+	Packages.findInit()
+		.catch(async (err: Error) => {
+			errMessage = err.message;
+			status = LoadingStatus.Error;
+		})
+		.then((res) => {
+			if (Array.isArray(res)) {
+				Packages.read(res[0]).then(pkgStore.set);
+				status = LoadingStatus.Success;
+			}
+		});
 
 	let setupComplete = false;
 
@@ -34,29 +49,56 @@
 </script>
 
 <section class="page">
-	<Stepper
-		orientation="horizontal"
-		steps={[
-			{
-				title: 'Configure',
-				iconContent: $page.routeId === 'initialize/configure' ? '1' : undefined,
-				variant: 'primary'
-			},
-			{
-				title: 'Review',
-				iconContent: $page.routeId !== 'initialize/deploy' ? '2' : undefined,
-				disabled: $page.routeId === 'initialize/configure',
-				variant: 'primary'
-			},
-			{
-				title: 'Deploy',
-				iconContent: '3',
-				disabled: $page.routeId !== 'initialize/deploy',
-				variant: 'primary'
-			}
-		]}
-	/>
-	{#if $pkgStore}
-		<slot />
+	{#if status == LoadingStatus.Loading}
+		<!-- placeholder loading content -->
+		<div>loading...</div>
+	{:else if status == LoadingStatus.Error}
+		<!-- replace w/ error dialog -->
+		<div class="center">
+			<Typography variant="h1">Package Not Found</Typography>
+			<Typography variant="body2">
+				Make sure the following package is in the current working directory:
+			</Typography>
+			<Typography variant="code">{errMessage}</Typography>
+			<Button href="/" color="secondary" style="margin-top: 0.5rem;" variant="flat"
+				>Return Home</Button
+			>
+		</div>
+	{:else}
+		<Stepper
+			orientation="horizontal"
+			steps={[
+				{
+					title: 'Configure',
+					iconContent: $page.routeId === 'initialize/configure' ? '1' : undefined,
+					variant: 'primary'
+				},
+				{
+					title: 'Review',
+					iconContent: $page.routeId !== 'initialize/deploy' ? '2' : undefined,
+					disabled: $page.routeId === 'initialize/configure',
+					variant: 'primary'
+				},
+				{
+					title: 'Deploy',
+					iconContent: '3',
+					disabled: $page.routeId !== 'initialize/deploy',
+					variant: 'primary'
+				}
+			]}
+		/>
+		{#if $pkgStore}
+			<slot />
+		{/if}
 	{/if}
 </section>
+
+<style>
+	.center {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 1rem;
+	}
+</style>