feat: Add feedback for bad JSON in HTML-JSON page (#7956)

frontend/app/lang/messages/en-US.json

@@ -480,6 +480,7 @@
     "from-url": "Import a Recipe",
     "github-issues": "GitHub Issues",
     "google-ld-json-info": "Google ld+json Info",
+    "html-or-json-error-details": "Mealie could not find a recipe in the data you provided. Only ld+json or microdata containing a schema.org Recipe can be imported. If you're pasting JSON, make sure it declares both \"@context\": \"https://schema.org/\" and \"@type\": \"Recipe\".",
     "must-be-a-valid-url": "Must be a Valid URL",
     "paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list": "Paste in your recipe data. Each line will be treated as an item in a list",
     "recipe-markup-specification": "Recipe Markup Specification",

frontend/app/lib/api/user/recipes/recipe.ts

@@ -1,5 +1,5 @@
 import { SSE } from "sse.js";
-import type { SSEvent } from "sse.js";
+import type { ReadyStateEvent, SSEvent } from "sse.js";
 import { BaseCRUDAPI } from "../../base/base-clients";
 import { route } from "../../base";
 import { CommentsApi } from "./recipe-comments";
@@ -164,6 +164,16 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
         autoReconnect: false,
       });
 
+      let settled = false;
+      const settle = (result: RequestResponse<string>) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        sse.close();
+        resolve(result);
+      };
+
       if (onProgress) {
         sse.addEventListener(SSEDataEventStatus.Progress, (e: SSEvent) => {
           const { message } = JSON.parse(e.data) as SSEDataEventMessage;
@@ -173,18 +183,26 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
 
       sse.addEventListener(SSEDataEventStatus.Done, (e: SSEvent) => {
         const { slug } = JSON.parse(e.data) as SSEDataEventDone;
-        sse.close();
-        resolve({ response: { status: 201, data: slug } as any, data: slug, error: null });
+        settle({ response: { status: 201, data: slug } as any, data: slug, error: null });
       });
 
       sse.addEventListener(SSEDataEventStatus.Error, (e: SSEvent) => {
+        let message: string | undefined;
         try {
-          const { message } = JSON.parse(e.data) as SSEDataEventMessage;
-          sse.close();
-          resolve({ response: null, data: null, error: new Error(message) });
+          ({ message } = JSON.parse(e.data) as SSEDataEventMessage);
         }
         catch {
-          // Not a backend error payload (e.g. XHR connection-close event); ignore
+          // Not a backend error payload (e.g. an XHR failure carrying the raw response body)
+        }
+        settle({ response: null, data: null, error: new Error(message || "Recipe creation failed") });
+      });
+
+      // The stream can also close without ever emitting a done/error event, e.g. when the
+      // request fails before the route handler runs. Settle here so callers always get a
+      // response instead of waiting on a promise that never resolves.
+      sse.addEventListener("readystatechange", (e: ReadyStateEvent) => {
+        if (e.readyState === SSE.CLOSED) {
+          settle({ response: null, data: null, error: new Error("Recipe creation failed") });
         }
       });
 

frontend/app/pages/g/[groupSlug]/r/create/html.vue

@@ -100,6 +100,57 @@
           </v-card-text>
         </div>
       </v-card-actions>
+      <v-expand-transition>
+        <v-alert
+          v-if="state.error"
+          color="error"
+          class="mt-6 white--text"
+        >
+          <v-card-title class="ma-0 pa-0">
+            <v-icon
+              start
+              color="white"
+              size="x-large"
+            >
+              {{ $globals.icons.robot }}
+            </v-icon>
+            {{ $t("new-recipe.error-title") }}
+          </v-card-title>
+          <v-divider class="my-3 mx-2" />
+
+          <div class="force-url-white">
+            <p>
+              {{ $t("new-recipe.html-or-json-error-details") }}
+            </p>
+          </div>
+          <div class="d-flex row justify-space-around my-3 force-url-white">
+            <a
+              class="text-primary"
+              href="https://developers.google.com/search/docs/data-types/recipe"
+              target="_blank"
+              rel="noreferrer nofollow"
+            >
+              {{ $t("new-recipe.google-ld-json-info") }}
+            </a>
+            <a
+              class="text-primary"
+              href="https://github.com/mealie-recipes/mealie/issues"
+              target="_blank"
+              rel="noreferrer nofollow"
+            >
+              {{ $t("new-recipe.github-issues") }}
+            </a>
+            <a
+              class="text-primary"
+              href="https://schema.org/Recipe"
+              target="_blank"
+              rel="noreferrer nofollow"
+            >
+              {{ $t("new-recipe.recipe-markup-specification") }}
+            </a>
+          </div>
+        </v-alert>
+      </v-expand-transition>
     </div>
   </v-form>
 </template>
@@ -191,6 +242,7 @@ async function createFromHtmlOrJson(htmlOrJsonData: string | object | null, impo
     dataString = JSON.stringify(htmlOrJsonData);
   }
 
+  state.error = false;
   state.loading = true;
   const { response } = await api.recipes.createOneByHtmlOrJson(
     dataString,
@@ -203,3 +255,9 @@ async function createFromHtmlOrJson(htmlOrJsonData: string | object | null, impo
   handleResponse(response, importKeywordsAsTags);
 }
 </script>
+
+<style scoped>
+.force-url-white a {
+  color: white !important;
+}
+</style>