chore: throw error when response in fetchJson() is not json (@nadalaba) (monkeytypegame#6459)

because vite dev server does not throw a 404 when fetching a non
existing json document, but responds with an html document and a 200
status code

Author: nadalaba

frontend/src/ts/controllers/quotes-controller.ts

@@ -65,7 +65,11 @@ class QuotesController {
           `quotes/${normalizedLanguage}.json`
         );
       } catch (e) {
-        if (e instanceof Error && e?.message?.includes("404")) {
+        if (
+          e instanceof Error &&
+          (e?.message?.includes("404") ||
+            e?.message?.includes("Content is not JSON"))
+        ) {
           return defaultQuoteCollection;
         } else {
           throw e;

frontend/src/ts/utils/json-data.ts

@@ -12,6 +12,9 @@ async function fetchJson<T>(url: string): Promise<T> {
     if (!url) throw new Error("No URL");
     const res = await fetch(url);
     if (res.ok) {
+      if (res.headers.get("content-type") !== "application/json") {
+        throw new Error("Content is not JSON");
+      }
       return (await res.json()) as T;
     } else {
       throw new Error(`${res.status} ${res.statusText}`);