ui: simplify network error handling (#23431)

Previously error to string conversion was split in two different files,
with one converting errors into strings, and another function analyzing
those strings to generate yet another string.

Now the the error handling for network fetches has been centralised and
uses directly HTTP error codes whereas possible to generate the
human-readable error strings.

It also fixes an issue where all JSON errors reported from the backend,
such as "Invalid API key", would get turned incorrectly in to
"Failed to connect to server" due to poor matching logic in the
now-gone getErrorMessage function.

tools/ui/src/lib/utils/api-fetch.ts

@@ -1,6 +1,7 @@
 import { base } from '$app/paths';
 import { getJsonHeaders, getAuthHeaders } from './api-headers';
 import { UrlProtocol } from '$lib/enums';
+import { ERROR_MESSAGES, HTTP_CODE_TO_STRING } from '$lib/constants/error';
 
 /**
  * API Fetch Utilities
@@ -54,10 +55,15 @@ export async function apiFetch<T>(path: string, options: ApiFetchOptions = {}):
 			? path
 			: `${base}${path}`;
 
-	const response = await fetch(url, {
-		...fetchOptions,
-		headers
-	});
+	let response;
+	try {
+		response = await fetch(url, {
+			...fetchOptions,
+			headers
+		});
+	} catch (e) {
+		throw new Error(beautifyNetworkError(e));
+	}
 
 	if (!response.ok) {
 		const errorMessage = await parseErrorMessage(response);
@@ -101,10 +107,15 @@ export async function apiFetchWithParams<T>(
 	const baseHeaders = authOnly ? getAuthHeaders() : getJsonHeaders();
 	const headers = { ...baseHeaders, ...customHeaders };
 
-	const response = await fetch(url.toString(), {
-		...fetchOptions,
-		headers
-	});
+	let response;
+	try {
+		response = await fetch(url.toString(), {
+			...fetchOptions,
+			headers
+		});
+	} catch (e) {
+		throw new Error(beautifyNetworkError(e));
+	}
 
 	if (!response.ok) {
 		const errorMessage = await parseErrorMessage(response);
@@ -154,5 +165,37 @@ async function parseErrorMessage(response: Response): Promise<string> {
 		// JSON parsing failed, use status text
 	}
 
-	return `Request failed: ${response.status} ${response.statusText}`;
+	const httpErrorStr = HTTP_CODE_TO_STRING[response.status];
+	if (httpErrorStr) {
+		return httpErrorStr;
+	}
+
+	return `${ERROR_MESSAGES.HTTP.GENERIC}: ${response.status} ${response.statusText}`;
+}
+
+/**
+ * Converts a network issue into a human-readable message.
+ * @param throwable - The throwable raised during fetch operation
+ * @returns Error in an human-readable format
+ */
+function beautifyNetworkError(throwable: unknown): string {
+	let message;
+	if (throwable instanceof Error) {
+		message = throwable.message;
+		if (throwable.name === 'TypeError' && message.includes('fetch')) {
+			return ERROR_MESSAGES.NETWORK.UNREACHABLE;
+		}
+	} else {
+		message = String(throwable);
+	}
+
+	if (message.includes('ECONNREFUSED')) {
+		return ERROR_MESSAGES.NETWORK.REFUSED;
+	} else if (message.includes('ENOTFOUND')) {
+		return ERROR_MESSAGES.NETWORK.NXDOMAIN;
+	} else if (message.includes('ETIMEDOUT')) {
+		return ERROR_MESSAGES.NETWORK.TIMEOUT;
+	}
+
+	return `${ERROR_MESSAGES.NETWORK.GENERIC} (${message})`;
 }