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();
+        settle({ response: { status: 201, data: slug } as any, data: slug, error: null });
-        resolve({ 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;
+          ({ message } = JSON.parse(e.data) as SSEDataEventMessage);
-          sse.close();
-          resolve({ response: null, data: null, error: new Error(message) });
         }
         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>

mealie/routes/recipe/recipe_crud_routes.py

@@ -193,6 +193,24 @@ class RecipeController(BaseRecipeController):
         async for event in self._create_recipe_from_web(req):
             yield event
 
+    @staticmethod
+    def _error_message(ex: Exception) -> str:
+        """
+        Extract a meaningful message from an exception raised during recipe creation.
+
+        Scraper failures surface as an HTTPException carrying a `ParserErrors` value
+        (e.g. BAD_RECIPE_DATA), which is far more useful to the client than the class name.
+        """
+
+        if isinstance(ex, HTTPException):
+            detail = ex.detail
+            if isinstance(detail, dict) and (details := detail.get("details")):
+                return str(details)
+            if isinstance(detail, str) and detail:
+                return detail
+
+        return ex.__class__.__name__
+
     async def _create_recipe_from_web(self, req: ScrapeRecipe | ScrapeRecipeData) -> AsyncIterable[ServerSentEvent]:
         """
         Create a recipe from the web, returning progress via SSE.
@@ -236,7 +254,7 @@ class RecipeController(BaseRecipeController):
                 self.logger.exception("Error in streaming recipe creation")
                 await queue.put(
                     ServerSentEvent(
-                        data=SSEDataEventMessage(message=e.__class__.__name__),
+                        data=SSEDataEventMessage(message=self._error_message(e)),
                         event=SSEDataEventStatus.ERROR,
                     )
                 )

tests/integration_tests/user_recipe_tests/test_recipe_crud.py

@@ -29,6 +29,7 @@ from mealie.schema.recipe.recipe_notes import RecipeNote
 from mealie.schema.recipe.recipe_tool import RecipeToolSave
 from mealie.services.recipe.recipe_data_service import RecipeDataService
 from mealie.services.scraper.recipe_scraper import DEFAULT_SCRAPER_STRATEGIES
+from mealie.services.scraper.scraper import ParserErrors
 from tests import utils
 from tests.utils import api_routes
 from tests.utils.factories import random_int, random_string
@@ -335,6 +336,46 @@ def test_create_by_html_or_json_stream_error(
     assert "error" in event_types
 
 
+@pytest.mark.parametrize(
+    "data",
+    [
+        # valid JSON, but not tagged as a schema.org Recipe
+        json.dumps({"name": "Test", "recipeIngredient": ["1 cup flour"], "recipeInstructions": [{"text": "Mix"}]}),
+        # not valid JSON at all
+        '{"name": "Test",,,}',
+        # no recipe data whatsoever
+        "<html><body>not a recipe</body></html>",
+    ],
+    ids=["missing-schema-declaration", "malformed-json", "no-recipe-data"],
+)
+def test_create_by_html_or_json_stream_invalid_data(api_client: TestClient, unique_user: TestUser, data: str):
+    """Unparseable data must report an error to the client, rather than silently ending the stream"""
+
+    response = api_client.post(
+        api_routes.recipes_create_html_or_json_stream,
+        json={"data": data},
+        headers=unique_user.token,
+    )
+
+    assert response.status_code == 200
+    events = parse_sse_events(response.text)
+
+    error_events = [e for e in events if e["event"] == "error"]
+    assert error_events
+    assert error_events[0]["data"]["message"] == ParserErrors.BAD_RECIPE_DATA.value
+
+
+def test_create_by_html_or_json_invalid_data(api_client: TestClient, unique_user: TestUser):
+    response = api_client.post(
+        api_routes.recipes_create_html_or_json,
+        json={"data": json.dumps({"name": "Test"})},
+        headers=unique_user.token,
+    )
+
+    assert response.status_code == 400
+    assert response.json()["detail"]["message"] == ParserErrors.BAD_RECIPE_DATA.value
+
+
 def test_create_recipe_from_zip(api_client: TestClient, unique_user: TestUser, tempdir: str):
     database = unique_user.repos
     recipe_name = random_string()